@yme/vite-plugin-svg-icon
v0.2.0
Published
a vite plugin for svg icons, generate a svg sprite file and a helper function to use it
Downloads
1
Readme
vite-plugin-svg-icon
A vite plugin for generating svg sprite, based on vite-plugin-svg-icons
Install
pnpm add @yme/vite-plugin-svg-icon -D
Usage
import {defineConfig} from 'vite';
import {createSvgIconsPlugin} from '@yme/vite-plugin-svg-icon';
export default defineConfig({
plugins: [
createSvgIconsPlugin({
// 指定需要转换的目录
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
// 将第一层目录当作分组导入
// splitting: true
}),
],
});
How to splitting svg sprite
- enable
splitting
option in plugin config - import svg icons with directory name, e.g.
virtual:svg-icons-register?common
src
- assets
- icons
- common <-- directory name
- icon.svg
- if you enable the
splitting
option, thevirtual:svg-icons-register
will only load svg icons in top-level directories, e.g.assets/icons/*.svg
- otherwise, you can load multiple directories, e.g.
virtual:svg-icons-register?common&info
How about the svg components?
planning to support in the future (maybe), it should be like this:
// type-safe
import { IconLock, IconInfoLicense } from 'virtual:svg-icons-component';
// <IconLock />
// <IconInfoLicense />
License
MIT