开始

概览

vite-plugin-svg-icons-ng 是一个专为 Vite 打造的高性能 SVG 图标插件。 它会从本地 SVG 文件自动生成 SVG 精灵，并在运行时完成注入，让你可以像使用普通图标一样高效地使用 SVG。 无需手动维护 sprite，无需额外请求，也无需复杂配置，即可构建一套统一、可复用的图标系统。

你将获得什么

• 以文件为输入，自动生成 SVG 精灵。
• 运行时自动注入，无额外网络请求。
• 在 dev / build / SSR 下保持稳定一致的行为。
• 内置缓存与 HMR，图标迭代更流畅。

如果你想先了解背景和动机，请阅读 为什么选择它。

快速开始

第一步：安装

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

第二步：配置插件

在 vite.config.ts / vite.config.js 中添加 createSvgIconsPlugin：

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')],
    }),
  ],
})

此时 SVG精灵已经生成并注入到DOM中。

第三步：继续

• 前往 使用指南 查看如何后续使用。
• 插件配置选项细节见 插件选项。