vite-plugin-sprite-components-solid

A vite plugin to generate sprite sheets from imported svg files. The imported svg files are transformed into Solid components. For example:

1import Icon from './icon.svg?sprite-solid';
2
3export function App() {
4  return (
5    <nav>
6      <Icon />
7    </nav>
8  );
9}

icon.svg is packed into a sprite sheet in your build output, and the Icon component renders an inline svg that references said sprite sheet. The Icon component also has properly defined TypeScript types. See ../../examples/solid for a complete working example.

Quick Start:

vite.config.ts:

1import { defineConfig } from 'vite';
2import solidPlugin from 'vite-plugin-solid';
3import spritesPlugin from 'vite-plugin-svg-sprite-components-solid';
4
5export default defineConfig({
6  plugins: [solidPlugin(), spritesPlugin()],
7});

tsconfig.json:

1{
2  "compilerOptions": {
3    "types": ["vite-plugin-svg-sprite-components-solid/client"]
4  }
5}