flame-assets

Design system SVG assets, such as icons and flags.

📚 Storybook

Installing

npm install @lightspeed/flame-assets

Usage

Massive SVG libraries are always kind of a pain to setup. We've create 2 primary methods to access these SVGs.

(Recommended) Spritesheets

Spritesheets are the recommended way to use icons and flags, since they are not only framework agnostic, but can be easily cached, do not inflate bundle sizes and do not get factored in the initial JS parsing phase.

Assuming you have a public folder and that you've added the spritesheets into that folder, you can actually refer to them directly via a regular svg tag.

For example, if you wish to load the add icon from the spritesheet, you can do something like this:

<svg viewBox="0 0 16 16" style="height: 16px; width: 16px">
  <!-- important to note, that in jsx, you'll need to use "xlinkHref" -->
  <use xlink:href="/public/icon-sprite.svg#fl-icon-add"></use>
</svg>
<svg viewBox="0 0 16 16" style="height: 16px; width: 16px">
  <!-- Same deal as above -->
  <use xlink:href="/public/flag-sprite.svg#CA"></use>
</svg>

As react components

All components are transpiled and available in the react folder.

To import an icon simply:

import { IconAdd } from '@lightspeed/flame-assets/react/icons/Add'

//...

function App() {
  return (
    <div>
      <IconAdd />
    </div>
  )
}

This will allow you to use the "raw" svg as a react component.