Merge pull request #10 from author-more/fix/material-design-icon-color

fix: material design icons' color to match theme
author-more · Aug 31, 2024 · 4121e59 · 4121e59
2 parents 0dbc6e1 + 89c853e
commit 4121e59
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -88,7 +88,12 @@ function App() {
     };
   }, [iconSetsSettings]);
 
-  function generateIconList(icons: (typeof iconSets)[number]["icons"]) {
+  function generateIconList(
+    icons: (typeof iconSets)[number]["icons"],
+    {
+      iconSettings: { svg: { attributes: customSvgAttributes = "" } = {} } = {},
+    }: Pick<(typeof iconSets)[number], "iconSettings">,
+  ) {
     return Object.entries(icons)
       .filter(([name]) => {
         return name.toLowerCase().includes(searchPhrase.toLowerCase());
@@ -101,7 +106,12 @@ function App() {
           },
         ]) => {
           const svg = `<svg ${attributes}>${elements}</svg>`;
-          const icon = <Icon attributes={attributes} elements={elements} />;
+          const icon = (
+            <Icon
+              attributes={`${attributes} ${customSvgAttributes}`}
+              elements={elements}
+            />
+          );
 
           return (
             <IconButton
@@ -125,7 +135,7 @@ function App() {
   }
 
   const iconGrids = iconSets.map(
-    ({ id, name, website, license, variantOptions, icons }) => {
+    ({ id, name, website, license, variantOptions, icons, iconSettings }) => {
       const hasMultipleVariants = variantOptions.length > 1;
       const { showIcons: shouldShowIcons } = iconSetsSettings[id];
 
@@ -170,7 +180,9 @@ function App() {
           </ControlsBar>
           {shouldShowIcons && (
             <GridList
-              items={generateIconList(icons)}
+              items={generateIconList(icons, {
+                iconSettings,
+              })}
               emptyMessage={`No icons found for "${searchPhrase}" in ${name} library.`}
             />
           )}

diff --git a/src/icons.ts b/src/icons.ts
@@ -12,6 +12,11 @@ type IconLibrary = {
     url: string;
   };
   icons: IconSetVariant[];
+  iconSettings?: {
+    svg?: {
+      attributes?: string;
+    };
+  };
   defaultSettings?: Partial<IconSetSettings>;
 };
 
@@ -89,6 +94,11 @@ export const iconLibraries: IconLibrary[] = [
       "sharp",
       "two-tone",
     ]),
+    iconSettings: {
+      svg: {
+        attributes: 'fill="currentColor"',
+      },
+    },
     defaultSettings: { selectedVariant: "outlined" },
   },
 ];