1.0.1 • Published 3 months ago
vite-plugin-svg-spritemap v1.0.1
vite-plugin-svg-spritemap
This vite plugin generates a single SVG spritemap containing multiple elements from all .svg
files in a directory.
Features
- 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
Installation
# using npm
npm install -D vite-plugin-svg-spritemap
# using pnpm
pnpm install -D vite-plugin-svg-spritemap
# using yarn
yarn add --dev vite-plugin-svg-spritemap
Usage
Vite config
import { svgSpritemap } from 'vite-plugin-svg-spritemap';
export default defineConfig({
plugins: [
svgSpritemap({
pattern: 'src/icons/*.svg',
}),
],
});
SVG element
<svg>
<use xlink:href="/spritemap.svg#example"></use>
</svg>
React component example
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" />;
};
Options
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 false . |
svgo | SVGOConfig or boolean (optional) | Use SVGO for optimization. Default is true . |
emit | boolean (optional) | Additionally emit the file so that other vite plugins can process it (eg. compression). Default is false . |
1.0.1
3 months ago
1.0.0
3 months ago
0.0.18
7 months ago
0.0.17
9 months ago
0.0.14
10 months ago
0.0.16
10 months ago
0.0.13
12 months ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago