From 5da46d237e0ba4515c6bd094ebc0b942ce2d9bf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 9 Nov 2023 14:41:48 +0100
Subject: [PATCH] Feat(icons): Do not remove colors from icons with `-colored`
 suffix #DS-990

---
 packages/icons/README.md           | 6 ++++++
 packages/icons/scripts/buildSvg.js | 9 ++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/icons/README.md b/packages/icons/README.md
index 343a1dacc4..49d1a42082 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -20,6 +20,12 @@ or
 npm install --save @lmc-eu/spirit-icons
 ```
 
+## Colors
+
+Icons with the suffix `-colored` come with predefined colors, so no additional coloring is needed.
+In contrast, icons without this suffix inherit the color from the `currentColor` CSS property of their parent element
+or themself.
+
 ## Usage
 
 ### SVG files
diff --git a/packages/icons/scripts/buildSvg.js b/packages/icons/scripts/buildSvg.js
index 13e3222832..a070980cfa 100644
--- a/packages/icons/scripts/buildSvg.js
+++ b/packages/icons/scripts/buildSvg.js
@@ -5,6 +5,9 @@ const { filterSvgFiles } = require('./shared');
 const svgSrcDir = path.resolve(__dirname, `../src/svg`);
 const svgDistDir = path.resolve(__dirname, `../dist/svg`);
 
+const normalizeSvgColors = (fileName, svgContent) =>
+  fileName.endsWith('-colored.svg') ? svgContent : svgContent.replace(/fill="#\w+"/g, 'fill="currentColor"');
+
 const normalizeAndCopySvg = (srcDir, distDir) => {
   fs.readdir(srcDir, (err, files) => {
     const svgs = filterSvgFiles(files);
@@ -17,12 +20,12 @@ const normalizeAndCopySvg = (srcDir, distDir) => {
         const svgPath = path.join(srcDir, svg);
         const svgDistPath = path.join(distDir, svg);
         const svgContent = fs.readFileSync(svgPath, 'utf8');
-        const svgContentFixed = svgContent.replace(/fill="#\w+"/g, 'fill="currentColor"');
-        const svgSpriteContent = svgContentFixed
+        const svgContentNormalized = normalizeSvgColors(svg, svgContent);
+        const svgSpriteContent = svgContentNormalized
           .replace(/<svg.*(viewBox="(\d+\s){3}\d+").*>/, `<symbol id="${svg.slice(0, -4)}" $1>`)
           .replace(/<\/svg>/g, '</symbol>');
         sprite += svgSpriteContent;
-        fs.writeFileSync(path.join(svgDistPath), svgContentFixed);
+        fs.writeFileSync(path.join(svgDistPath), svgContentNormalized);
       });
 
       sprite += '</svg>';