feat: Add default color hex support (#195)

icons-pack · Sep 21, 2023 · 21ac0fd · 21ac0fd
1 parent 8ce7404
commit 21ac0fd
Show file tree

Hide file tree

Showing 3 changed files with 2,683 additions and 2,670 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,18 @@ function DefaultColorExample() {
 }
 ```
 
+### Use default color as hex
+
+Append `Hex` to the icon name to use the default color as hex string
+
+```jsx
+import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';
+
+function DefaultColorExample() {
+  return <SiReact color={SiReactHex} size={24} />;
+}
+```
+
 ## Custom styles
 
 ```jsx

diff --git a/scripts/templates.js b/scripts/templates.js
@@ -27,9 +27,11 @@ const iconComponenteTemplate = (componentName, title, colorHex, path) => {
       size?: string | number;
     }
 
+    const defaultColor = '${colorHex}';
+
     const ${componentName}: IconType = React.forwardRef<SVGSVGElement, ${componentName}Props>(function ${componentName}({title = '${title}', color = 'currentColor', size = 24, ...others }, ref) {
       if (color === 'default') {
-        color = '${colorHex}';
+        color = defaultColor;
       }
 
       return (
@@ -48,15 +50,14 @@ const iconComponenteTemplate = (componentName, title, colorHex, path) => {
       );
     });
 
-    export default ${componentName};
-
+    export { ${componentName} as default, defaultColor };
   `;
 };
 
 /**
 The single line for exporting component in `src/index.ts`.
 */
-const iconExportTemplate = (componentName) => `export { default as ${componentName} } from './icons/${componentName}';`;
+const iconExportTemplate = (componentName) => `export { default as ${componentName}, defaultColor as ${componentName}Hex } from './icons/${componentName}';`;
 
 
 module.exports = {