Epic Stack Example with SVG Sprites

This feature is now built-in with the Epic Stack

This example shows how you can use SVG sprites to manage your icons. This is based on recommendations from the article The "best" way to manage icons in React.js

We will use the rmx-cli package to automate the sprite generation.

Install

1. Install the rmx-cli package as a dev dependency

npm install -D rmx-cli

2. Add a script to package.json to easily generate your sprites. This will scan for SVG files in the assets/svg/icons folder and generate the React component and sprite file in app/components/icons

"scripts": {
  "gen-svg-sprite": "rmx svg-sprite assets/svg/icons app/components/icons"
}

3. Copy the required SVG files from your icon set. If you have multiple sets or sizes or styles, make sure you separate them by folders. The tool will create the same folder structure in the output.

assets
└── svg
    └── icons
        └── heroicons
            ├── 20
            │   └── solid
            │       ├── arrow-left-on-rectangle.svg
            │       ├── pencil-square.svg
            │       └── user.svg
            └── 24
                └── outline
                    ├── computer-desktop.svg
                    ├── moon.svg
                    └── sun.svg

4. Generate the sprite file using the npm script. You can regenerate the sprites anytime you add new SVG files to your source folder.

npm run gen-svg-sprite

Usage

To use the new icons, you will need to first import the sprite file and add it to your links export. I recommend setting rel=preload to ensure the icon files gets loaded immediately.

Each sprite exports an href that is the URL of the generated sprite file. By default the generator will create a default React component with a typed icon prop. You can add the argument --components to the generator to create a named React component for each icon. It will be named the same as the filename in TitleCase.

import {
  default as HeroIcons20Solid,
  href as icons20solid,
} from '~/components/icons/heroicons/20/solid/index.tsx'
import { href as icons24outline }
  from '~/components/icons/heroicons/24/outline/index.tsx'

export const links: LinksFunction = () => {
  return [
    // Preload sprite icons
    { rel: 'preload', href: icons24outline, as: 'image' },
    { rel: 'preload', href: icons20solid, as: 'image' },
    ...
  ]
}

Styling the Icon

If you use the default Icon export, you will need to provide the icon name. This prop is typed so you can't accidentally select an invalid icon.

To style your icons, use the className prop to style your icons. You can specify the height, width, and color.

<HeroIcons20Solid icon="user" className="h-6 w-6 text-foreground/60" />

// if you use named component exports
<UserIcon className="h-6 w-6 text-foreground/60" />

Example

The example shows icons used in the User Dropdown Menu as well as the theme picker: