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

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-icons

2- 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 😉

25

Tags:

SolidjsVite