@lexiang/vite-plugin-svg-sprite
v0.1.3
Published
SVG sprite plugin for Vite
Downloads
14
Readme
@lexiang/vite-plugin-svg-sprite
SVG sprite plugin for Vite. base on vite-plugin-svg-sprite
install
npm i @lexiang/vite-plugin-svg-sprite -D
Usage
Add the plugin to your vite.config.js
:
import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
const config = {
plugins: [
createSvgSpritePlugin({
symbolId: 'icon-[name]-[hash]',
}),
],
}
Then use it like that in your app code:
import appIcon from './path/to/icons/app.svg';
// react or vue component, as you want
export default function App() {
return (
<svg>
<use
xlinkHref={`#${appIcon.id}`}
/>
</svg>
);
}
You can also access the width
/height
attributes of the SVG with the size
export:
import appIcon, { size } from './path/to/icons/app.svg';
// react or vue component, as you want
export default function App() {
return (
<svg {...size}>
<use
xlinkHref={`#${appIcon.id}`}
/>
</svg>
);
}
If you're using TypeScript, add the following line to your vite-env.d.ts
:
/// <reference types="vite/client" />
+ /// <reference types="vite-plugin-svg-sprite/client" />
options
const plugin = createSvgSpritePlugin(options);
options.symbolId: string
For generating the id
attribute of <symbol>
element. Defaults to [name]
options.include: string | string[]
Match files that will be transformed. Defaults to '**.svg'
. See micromatch for the syntax document.
options.svgo: boolean | SvgoOptions
Enable SVGO for optimizing SVG. Defaults to true
.