快速开始

安装

前置条件

• Node.js 版本 18 或更高 LTS
• Vite 版本 5 或更高

运行以下命令安装，并且确保你的工作区配置正确：

pnpm

pnpm add -D vite-plugin-svg-icons-ng

npm

npm i -D vite-plugin-svg-icons-ng

yarn

yarn add -D vite-plugin-svg-icons-ng

Usage

在vite.config.ts/vite.config.js中导入并配置插件

vite.config.ts / vite.config.js

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'
import path from 'node:path'

export default defineConfig({
  plugins: [
    // ...
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      // other options
    }),
  ],
})

接着，在main.ts/main.js导入虚拟模块virtual:svg-icons/register

main.ts

import 'virtual:svg-icons/register' // recommended
import 'virtual:svg-icons-register' // deprecated

main.js

import 'virtual:svg-icons/register' // recommended
import 'virtual:svg-icons-register' // deprecated

WARNING !

虚拟模块 virtual:svg-icons-register 将在未来的版本中废弃，
因为它不符合虚拟模块的命名空间规范。
使用 virtual:svg-icons/register 代替。

至此，svg精灵已经生成并注入到HTML中，可以通过全局组件使用（组件样例）。

或者，直接在HTML中使用：

<svg>
  <use xlink:href="#icon-icon1"></use>
</svg>

获取SymbolId

可以通过virtual:svg-icons/ids获取所有SymbolId的数组

import ids from 'virtual:svg-icons/ids' // recommended
import ids from 'virtual:svg-icons-names' //deprecated
console.log(ids) // ['icon-icon1','icon-icon2','icon-icon3']

WARNING !

虚拟模块 virtual:svg-icons-names 将在未来的版本中废弃，
因为它不符合虚拟模块的命名空间规范。
应该使用 virtual:svg-icons/ids 代替。