From af313ed0b62aded5cfd9fe7bcd5bd26de102ff9e Mon Sep 17 00:00:00 2001
From: Wei He <github@weispot.com>
Date: Sat, 12 Nov 2022 02:53:13 -0500
Subject: [PATCH] feat: Add default color support (#165)

---
 .changeset/lemon-lemons-run.md |  5 +++++
 README.md                      | 13 ++++++++++++-
 scripts/generate-components.js |  2 +-
 scripts/templates.js           |  4 ++--
 src/base.tsx                   |  5 ++++-
 src/types.ts                   |  6 +++---
 6 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/lemon-lemons-run.md

diff --git a/.changeset/lemon-lemons-run.md b/.changeset/lemon-lemons-run.md
new file mode 100644
index 000000000..971deab93
--- /dev/null
+++ b/.changeset/lemon-lemons-run.md
@@ -0,0 +1,5 @@
+---
+'@icons-pack/react-simple-icons': minor
+---
+
+Add default color support
diff --git a/README.md b/README.md
index 97c5d60e4..97accc29f 100644
--- a/README.md
+++ b/README.md
@@ -92,12 +92,23 @@ function ChangeTitle() {
 }
 ```
 
+## Use default color
+
+Set color as `default` to use the default color for each icon
+
+```jsx
+import { ReactJs } from '@icons-pack/react-simple-icons';
+
+function DefaultColorExample() {
+  return <ReactJs color="default" size={24} />;
+}
+```
+
 ## Custom styles
 
 ```jsx
 import { ReactJs } from '@icons-pack/react-simple-icons';
 
-// title default "React"
 function CustomStyles() {
   return <ReactJs className='myStyle' />;
 }
diff --git a/scripts/generate-components.js b/scripts/generate-components.js
index fb4d7d092..12b042c95 100644
--- a/scripts/generate-components.js
+++ b/scripts/generate-components.js
@@ -38,7 +38,7 @@ Promise.all(
 
     return fsPromise.writeFile(
       componentFilePath,
-      iconFileTemplate(componentName, baseName, simpleIcons[baseName].path),
+      iconFileTemplate(componentName, baseName, `#${simpleIcons[baseName].hex}`, simpleIcons[baseName].path),
       formatFile,
     );
   }),
diff --git a/scripts/templates.js b/scripts/templates.js
index a92f2c2e2..5b10c2027 100644
--- a/scripts/templates.js
+++ b/scripts/templates.js
@@ -1,8 +1,8 @@
 /**
 This icon component file as `src/components/[componentName].ts`.
 */
-const iconFileTemplate = (componentName, baseName, path) => `import baseIcon from '../base';
-const ${componentName} = baseIcon('${baseName}', '${path}');
+const iconFileTemplate = (componentName, baseName, hex, path) => `import baseIcon from '../base';
+const ${componentName} = baseIcon('${baseName}', '${hex}', '${path}');
 export default ${componentName};\n`;
 
 /**
diff --git a/src/base.tsx b/src/base.tsx
index 5b1e7f22e..453a298b3 100644
--- a/src/base.tsx
+++ b/src/base.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { IconProps, IconType } from './types';
 
-const baseIcon = (iconTitle: string, iconPath: string): IconType =>
+const baseIcon = (iconTitle: string, hex: string, iconPath: string): IconType =>
   React.forwardRef<SVGSVGElement, IconProps>(function(
     { title = iconTitle, color = 'currentColor', size = 24, ...others },
     ref,
   ) {
+    if (color === 'default') {
+      color = hex;
+    }
     return (
       <svg
         xmlns='http://www.w3.org/2000/svg'
diff --git a/src/types.ts b/src/types.ts
index 82fc77794..bb0299441 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,15 +2,15 @@ import * as React from 'react';
 
 export type IconProps = React.ComponentPropsWithoutRef<'svg'> & {
   /**
-   * Hex color or color name
+   * The title provides an accessible short text description to the SVG
    */
   title?: string;
   /**
-   * The size of the Icon.
+   * Hex color or color name or `default` to use the default hex for each icon
    */
   color?: string;
   /**
-   * The title provides an accessible short text description to the SVG
+   * The size of the Icon.
    */
   size?: string | number;
 };