fix(color): fix fill and stroke currentColor

ionic-team · Sep 17, 2019 · f0d22cc · f0d22cc
1 parent 65e1cfa
commit f0d22cc
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/scripts/build.ts b/scripts/build.ts
@@ -43,16 +43,31 @@ async function optimizeSvgs(srcSvgData: SvgData[]) {
     full: true,
     plugins: [
       {
-        removeAttrs: {
-          attrs: [
-            'fill',
-            'stroke',
-          ]
+        addFillNoneCss: {
+          type: 'perItem',
+          fn: (item, params) => {
+            if (!Array.isArray(params.attrs)) {
+              params.attrs = [params.attrs];
+            }
+            if (item.isElem()) {
+              item.eachAttr(attr => {
+                if (attr.name === 'fill') {
+                  if (attr.value === 'none') {
+                    item.class.add('ionicon-fill-none');
+                  }
+                  item.removeAttr('fill');
+
+                } else if (attr.name === 'stroke') {
+                  item.removeAttr('stroke');
+                }
+              });
+            }
+          }
         }
-      },
+      } as any,
       {
         addClassesToSVGElement: {
-          className: 'ionicon'
+          className: ['ionicon']
         }
       },
       {
@@ -73,6 +88,20 @@ async function optimizeSvgs(srcSvgData: SvgData[]) {
 }
 
 
+async function optimizeSvg(svgo: Svgo, svgData: SvgData) {
+  const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');
+  const optimizedSvg = await svgo.optimize(srcSvgContent, { path: svgData.srcFilePath });
+
+  svgData.optimizedSvgContent = optimizedSvg.data
+    .replace(
+      `fill="none"`,
+      `class=""`
+    );
+
+  await fs.writeFile(svgData.optimizedFilePath, svgData.optimizedSvgContent);
+}
+
+
 async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgData[]) {
   const testDir = join(rootDir, 'www');
   const testBuildDir = join(testDir, 'build');
@@ -90,16 +119,6 @@ async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgDa
 }
 
 
-async function optimizeSvg(svgo: Svgo, svgData: SvgData) {
-  const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');
-  const optimizedSvg = await svgo.optimize(srcSvgContent, { path: svgData.srcFilePath });
-
-  svgData.optimizedSvgContent = optimizedSvg.data;
-
-  await fs.writeFile(svgData.optimizedFilePath, svgData.optimizedSvgContent);
-}
-
-
 async function createSvgSymbols(version: string, distDir: string, srcSvgData: SvgData[]) {
   srcSvgData = srcSvgData.sort((a, b) => {
     if (a.iconName < b.iconName) return -1;
@@ -113,8 +132,11 @@ async function createSvgSymbols(version: string, distDir: string, srcSvgData: Sv
     `<svg data-ionicons="${version}" style="display:none">`,
     `<style>`,
     `.ionicon {`,
-    `  fill: #000;`,
-    `  stroke: #000;`,
+    `  fill: currentColor;`,
+    `  stroke: currentColor;`,
+    `}`,
+    `.ionicon-fill-none {`,
+    `  fill: none;`,
     `}`,
     `</style>`,
   ];

diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -11,6 +11,14 @@
   box-sizing: content-box !important;
 }
 
+:host .ionicon {
+  stroke: currentColor;
+}
+
+.ionicon-fill-none {
+  fill: none;
+}
+
 .icon-inner,
 .ionicon {
   display: block;

diff --git a/src/components/icon/validate.ts b/src/components/icon/validate.ts
@@ -16,7 +16,8 @@ export const validateContent = (svgContent: string | null) => {
     // must only have 1 root element
     const svgElm = div.firstElementChild;
     if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-      svgElm.setAttribute('class', 's-ion-icon');
+      const svgClass = svgElm.getAttribute('class') || '';
+      svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
 
       // root element must be an svg
       // lets double check we've got valid elements