diff --git a/src/App.tsx b/src/App.tsx index 126f864..cc6dcc5 100644 --- 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 = `${elements}`; - const icon = ; + const icon = ( + + ); return ( { + ({ id, name, website, license, variantOptions, icons, iconSettings }) => { const hasMultipleVariants = variantOptions.length > 1; const { showIcons: shouldShowIcons } = iconSetsSettings[id]; @@ -170,7 +180,9 @@ function App() { {shouldShowIcons && ( )} diff --git a/src/icons.ts b/src/icons.ts index a33d3b9..cc469a4 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -12,6 +12,11 @@ type IconLibrary = { url: string; }; icons: IconSetVariant[]; + iconSettings?: { + svg?: { + attributes?: string; + }; + }; defaultSettings?: Partial; }; @@ -89,6 +94,11 @@ export const iconLibraries: IconLibrary[] = [ "sharp", "two-tone", ]), + iconSettings: { + svg: { + attributes: 'fill="currentColor"', + }, + }, defaultSettings: { selectedVariant: "outlined" }, }, ];