@ptkhanh94npm/labore-fuga-pariatur
v1.0.0
Published
This [vite](https://vitejs.dev/) plugin generates a single SVG spritemap containing multiple <symbol> elements from all `.svg` files in a directory.
Downloads
2
Maintainers
Keywords
Readme
@ptkhanh94npm/labore-fuga-pariatur
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 @ptkhanh94npm/labore-fuga-pariatur
# using pnpm
pnpm install -D @ptkhanh94npm/labore-fuga-pariatur
# using yarn
yarn add --dev @ptkhanh94npm/labore-fuga-pariatur
Usage
Vite config
import { svgSpritemap } from '@ptkhanh94npm/labore-fuga-pariatur';
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" />;
};
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 true
. |
| svgo
| SVGOConfig
or boolean
(optional) | Use SVGO for optimization. Default is true
. |