39
loading...
Using fluentui-icons with Solid & Vite
Microsoft has a great MIT licensed icon library that contains ~1700 unique icons(regular and filled styles for each) here:
https://github.com/microsoft/fluentui-system-icons
https://github.com/microsoft/fluentui-system-icons
There is no library to use for Solid at the moment. This post documents some methods to use these icons.
You should also check out Heroicons library by @amoutonbrady
https://github.com/amoutonbrady/solid-heroicons
The first approach involves copying the SVG for each icon and creating components like below. Or maybe process all of SVGs to create the components, and publish a library while you are at it.
interface IFluentIconsProps {
primaryFill?: string;
className?: string;
size?: number;
}
export const Settings24Regular = (iconProps: IFluentIconsProps) => {
let { primaryFill, className, size } = iconProps;
if (!size) {
size = 24;
}
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className={className}
fill={primaryFill}
>
<path
d="(...removed for brevity...)"
fill="#212121"
/>
</svg>
);
};The second approach involves a quick workaround that doesn't require extra work for each icon.
1- Install:
npm install @fluentui/svg-icons2- Import the icons you want to use (note "?raw" at the end, that is important for Vite to get this SVG as text)
import Settings24Regular from "@fluentui/svg-icons/icons/settings_24_regular.svg?raw";`3- You can add some styling with CSS. Here I'm using Solid Styled Components
const SmallIcon = styled("div")`
svg {
width: 40px;
height: 40px;
fill: rebeccapurple;
}
flex-shrink: 0;
`;4- Use it!
<SmallIcon innerHTML={Settings24Regular}></SmallIcon>Let us know if you find a better & easier way! Or if you create a new library for Solid ecosystem 😉