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.

$3

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:

`html








`

$3

All components are transpiled and available in the react folder.

To import an icon simply:

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

//...

function App() {
return (



)
}
``

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