Icons

All icons are located in the src/public/icons folder.

Use an Icon

import { Icon } from "~/components/designSystem";

const MyComponent = () => {
  return <Icon name="apps" color="error" size="small" />;
};

Note : The name property should be the name of the file src/public/icons/[name].svg

Add a new Icon

1. Add it in the src/public/icons folder
2. Make sur to remove all the fill , height , width properties, <def> and <g> in the svg.
3. Add fill="currentColor" on the svg tag
4. Import the new Icon in src/components/designSystem/icons/mapping.tsx and add the name in ALL_ICONS (in the same file).

You're good to go !

// Ex for step 2 :
// Before
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.015 7.99001C16.015" fill="#66758F"/>
  </g>
  <defs>
    <clipPath id="clip0">
      <rect width="16" height="16" fill="white"/>
    </clipPath>
  </defs>
</svg>

// Should be
<svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.015 7.99001C16.015" />
</svg>