A CLI for icons

Run this command and icons will appear in your codebase

> npx @sly-cli/sly add

There's probably a better way to list all of these

Turn SVG Files into Spritesheets

Spritesheets are the fastest and most efficient way to ship icons.

With Vite

Use a vite plugin to bundle a directory of SVG icons into a spritesheet.

View plugin

With CLI

Bundle your spritesheet with a CLI tool that integrates with Sly's postinstall command.

Read Article

Manual Script

Create a manual postinstall script that reads your icons directory and assembles a spritesheet.

Read Article

Create an Icon component

Use this component for type-safe icons in any project.


import { type IconName } from './icons/name';
import href from './icons/sprite.svg';

export async function Icon({
	name,
	className,
	...props
}: React.SVGProps<SVGSVGElement> & {
	name: IconName;
}) {
	return (
		<svg {...props} className={`inline self-center ${className}`}>
			<use href={`${href}#${name}`} />
		</svg>
	);
}