This vite plugin generates a single SVG spritemap containing multiple elements from all .svg
files in a directory.
- Easily generate the SVG spritemap as part of your build process
- Supports
<defs>
, so you can use gradients, patterns, and masks - Works with dev server 🔥
If you find this plugin useful, why not
# using npm
npm install -D @skylernpm/molestiae-quo-hic
# using pnpm
pnpm install -D @skylernpm/molestiae-quo-hic
# using yarn
yarn add --dev @skylernpm/molestiae-quo-hic
Vite config
import { svgSpritemap } from '@skylernpm/molestiae-quo-hic';
export default defineConfig({
plugins: [
svgSpritemap({
pattern: 'src/icons/*.svg',
}),
],
});
SVG element
export const Icon: React.FC<{ name: string }> = ({ name }) => (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<use xlinkHref={`/spritemap.svg#${name}`} />
</svg>
);
const App = () => {
return <Icon name="arrow" />;
};
Option | Type | Description |
---|---|---|
pattern |
string |
A glob pattern that specifies which SVG files to include in the sprite. |
prefix |
string (optional) |
A string that is added to the beginning of each SVG icon's ID when it is added to the sprite. |
filename |
string (optional) |
The name of the output file that contains the SVG sprite. Default is spritemap.svg . |
currentColor |
boolean (optional) |
Replace colors in the SVGs with the currentColor value by SVGO. Default is true . |
svgo |
SVGOConfig or boolean (optional) |
Use SVGO for optimization. Default is true . |