add new --allow-override-fill option

Author: MoOx

README.md

@@ -36,9 +36,11 @@ Options
   --with-web-for-typescript, -rnwts     Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files
   --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons
   --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons
+  --allow-override-fill, -aof                 Replace all 'fill' properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}. If fills[N] is undefined, fallback to the original value. Useful to dynamically control icon color(s).
 
 Example
   $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill
+  $ react-from-svg assets/svgs src/Svgs --with-web --allow-override-fill
 ```
 
 Generated components will allow you to inject all the props you could use on an `<svg>`/`<Svg>`, such as:

src/adjust-svg.ts

@@ -73,6 +73,31 @@ const transformStyleAttributes = (svg: string): string => {
   });
 };
 
+// Replace each existing fill with fill={fills[N]} (N = index of occurrence)
+// If fills[N] is strictly undefined, keep the original value unless removeFill is true, then fallback to undefined
+function allowOverrideFillWithProp(
+  svg: string,
+  removeFill: boolean = false,
+): string {
+  let fillIndex = 0;
+  return svg.replace(
+    /(<(?!svg)[^\s>]+)([^>]*?)\sfill="([^"]*)"([^>]*>)/g,
+    function (
+      match: string,
+      startTag: string,
+      beforeFill: string,
+      fillValue: string,
+      afterFill: string,
+    ) {
+      const idx = fillIndex++;
+      // If removeFill: no fallback to the original value
+      // Otherwise: fallback to the original value
+      const fallback = removeFill ? "undefined" : `"${fillValue}"`;
+      return `${startTag}${beforeFill} fill={typeof fills !== 'undefined' && typeof fills[${idx}] !== 'undefined' ? fills[${idx}] : ${fallback}}${afterFill}`;
+    },
+  );
+}
+
 export {
   cleanupStart,
   prepareSvgProps,
@@ -83,4 +108,5 @@ export {
   deleteFill,
   deleteStroke,
   transformStyleAttributes,
+  allowOverrideFillWithProp,
 };

src/all-combinations.test.ts

@@ -11,6 +11,7 @@ const __dirname = path.dirname(__filename);
 const optionalFlags = [
   { name: "remove-fill", alias: "rf", bool: true },
   { name: "remove-stroke", alias: "rs", bool: true },
+  { name: "allow-override-fill", alias: "aof", bool: true, value: '["#f00"]' },
 ];
 
 // Create specific core combinations as requested

src/bin.ts

@@ -15,6 +15,7 @@ const cli = meow(
     --with-web-for-typescript, -rnwts     Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files
     --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons
     --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons
+    --allow-override-fill, -aof                 Replace all 'fill' properties from SVGs
 
   Example
     $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill
@@ -28,6 +29,7 @@ const cli = meow(
       withWebForTypescript: { type: "boolean", shortFlag: "rnwts" },
       removeFill: { type: "boolean", shortFlag: "rf" },
       removeStroke: { type: "boolean", shortFlag: "rs" },
+      allowOverrideFill: { type: "boolean", shortFlag: "aof" },
     },
   },
 );

src/templates.ts

@@ -1,12 +1,31 @@
 const sep = ";\n";
 
+// Helper for prop signature
+function getPropsSignature(
+  allowOverrideFill: boolean,
+  typescript: boolean,
+  native: boolean,
+): string {
+  const fillsType = `{fills?: (${native ? "ColorValue" : "string"} | undefined)[]}`;
+  const optionalPropsType = typescript
+    ? ` : ${
+        native ? "SvgProps" : "React.SVGProps<SVGSVGElement>"
+      }${allowOverrideFill ? " & " + fillsType : ""}`
+    : "";
+  return `(${allowOverrideFill ? "{ fills, ...props }" : "props"}${optionalPropsType})`;
+}
+
 const importReact = (): string => {
   return "import React from 'react'";
 };
 
-const jsExport = (name: string, svgOutput: string): string => {
+const jsExport = (
+  name: string,
+  svgOutput: string,
+  allowOverrideFill: boolean = false,
+): string => {
   const content =
-    `const ${name} = (props) => {
+    `const ${name} = ${getPropsSignature(allowOverrideFill, false, false)} => {
   return (${svgOutput});
 }` + sep;
   return `${content}
@@ -17,19 +36,24 @@ const tsxExport = (
   name: string,
   svgOutput: string,
   native: boolean,
+  allowOverrideFill: boolean = false,
 ): string => {
   const content =
-    `const ${name} = (props: ${
-      native ? "SvgProps" : "React.SVGProps<SVGSVGElement>"
-    }) => {
+    `const ${name} = ${getPropsSignature(allowOverrideFill, true, native)} => {
   return (${svgOutput});
 }` + sep;
   return `${content}
 export default ${name}`;
 };
 
-const web = (svgOutput: string, name: string): string => {
-  return importReact() + sep + jsExport(name, svgOutput) + sep;
+const web = (
+  svgOutput: string,
+  name: string,
+  allowOverrideFill: boolean = false,
+): string => {
+  return (
+    importReact() + sep + jsExport(name, svgOutput, allowOverrideFill) + sep
+  );
 };
 
 const RNSvgModules = [
@@ -58,37 +82,61 @@ const RNSvgModules = [
   "Use",
 ];
 
-const importReactNativeSvg = (typescript: boolean): string => {
+const importReactNativeSvg = (
+  typescript: boolean,
+  allowOverrideFill: boolean,
+): string => {
   return `import Svg, {
   ${RNSvgModules.join(",")}
-} from 'react-native-svg'
-${typescript ? "import type { SvgProps } from 'react-native-svg'" : ""}`;
+} from 'react-native-svg';${
+    typescript && allowOverrideFill
+      ? `import type { ColorValue } from 'react-native';`
+      : ""
+  }${typescript ? `import type { SvgProps } from 'react-native-svg';` : ""}
+`;
 };
 
-const native = (svgOutput: string, name: string): string => {
+const native = (
+  svgOutput: string,
+  name: string,
+  allowOverrideFill: boolean = false,
+): string => {
   return (
     importReact() +
     sep +
-    importReactNativeSvg(false) +
+    importReactNativeSvg(false, allowOverrideFill) +
     sep +
-    jsExport(name, svgOutput) +
+    jsExport(name, svgOutput, allowOverrideFill) +
     sep
   );
 };
 
-const nativeForTypescript = (svgOutput: string, name: string): string => {
+const nativeForTypescript = (
+  svgOutput: string,
+  name: string,
+  allowOverrideFill: boolean = false,
+): string => {
   return (
     importReact() +
     sep +
-    importReactNativeSvg(true) +
+    importReactNativeSvg(true, allowOverrideFill) +
     sep +
-    tsxExport(name, svgOutput, true) +
+    tsxExport(name, svgOutput, true, allowOverrideFill) +
     sep
   );
 };
 
-const webForTypescript = (svgOutput: string, name: string): string => {
-  return importReact() + sep + tsxExport(name, svgOutput, false) + sep;
+const webForTypescript = (
+  svgOutput: string,
+  name: string,
+  allowOverrideFill: boolean = false,
+): string => {
+  return (
+    importReact() +
+    sep +
+    tsxExport(name, svgOutput, false, allowOverrideFill) +
+    sep
+  );
 };
 
 export { web, native, nativeForTypescript, webForTypescript };

src/transformer.ts

@@ -13,6 +13,7 @@ import {
   deleteFill,
   deleteStroke,
   transformStyleAttributes,
+  allowOverrideFillWithProp,
 } from "./adjust-svg.js";
 import {
   web,
@@ -33,6 +34,7 @@ type Flags = {
   withWebForTypescript?: boolean;
   removeFill?: boolean;
   removeStroke?: boolean;
+  allowOverrideFill?: boolean;
 };
 
 const get = async (globPattern: string): Promise<File[]> => {
@@ -65,11 +67,18 @@ export const transformSvg = (
   options: {
     removeFill: boolean;
     removeStroke: boolean;
+    allowOverrideFill: boolean;
     pascalCaseTag: boolean;
     template: (svg: string) => string;
   },
 ): string => {
-  const { removeFill, removeStroke, pascalCaseTag, template } = options;
+  const {
+    removeFill,
+    removeStroke,
+    allowOverrideFill,
+    pascalCaseTag,
+    template,
+  } = options;
 
   let result = cleanupStart(svg);
   result = prepareSvgProps(result);
@@ -78,6 +87,9 @@ export const transformSvg = (
   result = transformStyleAttributes(result);
   result = pascalCaseTag ? tagToPascalCase(result) : result;
   result = cleanupEndWithoutSpace(result);
+  if (allowOverrideFill) {
+    result = allowOverrideFillWithProp(result, removeFill);
+  }
   result = removeFill ? deleteFill(result) : result;
   result = removeStroke ? deleteStroke(result) : result;
 
@@ -95,6 +107,7 @@ const transformFiles = (
     withWebForTypescript: boolean;
     removeFill: boolean;
     removeStroke: boolean;
+    allowOverrideFill: boolean;
   },
 ): File[] => {
   const {
@@ -104,6 +117,7 @@ const transformFiles = (
     withWebForTypescript,
     removeFill,
     removeStroke,
+    allowOverrideFill,
   } = options;
 
   return files.reduce((acc, file) => {
@@ -112,34 +126,40 @@ const transformFiles = (
       js: boolean;
       pascalCaseTag: boolean;
       template: (svg: string) => string;
-    }) => transformSvg(file.content, { removeFill, removeStroke, ...options });
+    }) =>
+      transformSvg(file.content, {
+        removeFill,
+        removeStroke,
+        allowOverrideFill,
+        ...options,
+      });
 
     const trsfNative = () =>
       trsf({
         js: true,
         pascalCaseTag: true,
-        template: (svg) => native(svg, name),
+        template: (svg) => native(svg, name, allowOverrideFill),
       });
 
     const trsfNativeForTs = () =>
       trsf({
         js: true,
         pascalCaseTag: true,
-        template: (svg) => nativeForTypescript(svg, name),
+        template: (svg) => nativeForTypescript(svg, name, allowOverrideFill),
       });
 
     const trsfWeb = () =>
       trsf({
         js: true,
         pascalCaseTag: false,
-        template: (svg) => web(svg, name),
+        template: (svg) => web(svg, name, allowOverrideFill),
       });
 
     const trsfWebForTs = () =>
       trsf({
         js: true,
         pascalCaseTag: false,
-        template: (svg) => webForTypescript(svg, name),
+        template: (svg) => webForTypescript(svg, name, allowOverrideFill),
       });
 
     if (
@@ -210,6 +230,7 @@ export const make = async (
     withWebForTypescript: flags.withWebForTypescript ?? false,
     removeFill: flags.removeFill ?? false,
     removeStroke: flags.removeStroke ?? false,
+    allowOverrideFill: flags.allowOverrideFill ?? false,
   });
 
   console.log("Files transformed", transformedFiles.length);

…t_remove-fill_remove-stroke/SVGClean.tsx …escript_allow-override-fill/SVGClean.tsxtests/components/with-native-for-typescript_remove-fill_remove-stroke/SVGClean.tsx renamed to tests/components/with-native-for-typescript_allow-override-fill/SVGClean.tsx tests/components/with-native-for-typescript_remove-fill_remove-stroke/SVGClean.tsx renamed to tests/components/with-native-for-typescript_allow-override-fill/SVGClean.tsx

@@ -24,8 +24,12 @@ import Svg, {
   TSpan as Tspan,
   Use,
 } from "react-native-svg";
+import type { ColorValue } from "react-native";
 import type { SvgProps } from "react-native-svg";
-const SVGClean = (props: SvgProps) => {
+const SVGClean = ({
+  fills,
+  ...props
+}: SvgProps & { fills?: (ColorValue | undefined)[] }) => {
   return (
     <Svg viewBox="0 0 30 30" {...props}>
       <Path d="m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z" />

…-fill_remove-stroke/SVGEdgeCaseWidth.tsx …allow-override-fill/SVGEdgeCaseWidth.tsxtests/components/with-native-for-typescript_remove-fill_remove-stroke/SVGEdgeCaseWidth.tsx renamed to tests/components/with-native-for-typescript_allow-override-fill/SVGEdgeCaseWidth.tsx tests/components/with-native-for-typescript_remove-fill_remove-stroke/SVGEdgeCaseWidth.tsx renamed to tests/components/with-native-for-typescript_allow-override-fill/SVGEdgeCaseWidth.tsx

@@ -24,8 +24,12 @@ import Svg, {
   TSpan as Tspan,
   Use,
 } from "react-native-svg";
+import type { ColorValue } from "react-native";
 import type { SvgProps } from "react-native-svg";
-const SVGEdgeCaseWidth = (props: SvgProps) => {
+const SVGEdgeCaseWidth = ({
+  fills,
+  ...props
+}: SvgProps & { fills?: (ColorValue | undefined)[] }) => {
   return (
     <Svg viewBox="0 0 512 512" {...props}>
       <Path d="M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48" />