Icons from a design file can reach code as a component per icon, one sprite, or a package of SVG files. Like a package, a sprite doesn't depend on a framework. Any page that can write HTML can draw a symbol from it:
<svg width="24" height="24" aria-hidden="true"><use href="/icons/sprite.svg#icon-arrow-right" /></svg>The sprite must be served from the same origin as the page, or inlined in the page and referenced as #icon-arrow-right. In this example, symbol ids carry the prefix icon-; in FISYCO that is the Symbol id prefix setting.
Sprite, components or package
The colour catch
CSS selectors can't reach the shapes inside a <use> copy, and icons exported from Figma carry their own fill or stroke colour. So a sprite icon keeps the colour it had in Figma.
To colour sprite icons from CSS, replace that colour with currentColor when the sprite is built, for example with a rule #000000 → currentColor. The icon then follows the text colour around it. In FISYCO, the sprite has its own Replace attribute values list, and component rules don't apply to it.
Related
- Icons in React: sprite settings, the symbol id prefix and colour rules.
- An SVG sprite from Figma, and when it beats components
- Figma icons to React components, end to end