@yme/vite-plugin-svg-icon
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

vite-plugin-svg-icon

NPM Version NPM Downloads

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

  1. enable splitting option in plugin config
  2. import svg icons with directory name, e.g. virtual:svg-icons-register?common
src
  - assets
    - icons
      - common <-- directory name
        - icon.svg
  1. if you enable the splitting option, the virtual:svg-icons-register will only load svg icons in top-level directories, e.g. assets/icons/*.svg
  2. 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

Readme

Keywords

Package Sidebar

Install

npm i @yme/vite-plugin-svg-icon

Weekly Downloads

0

Version

0.2.0

License

MIT

Unpacked Size

27.2 kB

Total Files

6

Last publish

Collaborators

  • minosss