vite-plugin-svg-icons 教程

1. 项目介绍

vite-plugin-svg-icons 是一个适用于 Vite 的插件，用于快速创建 SVG 图标库。它会在项目运行期间自动生成SVG雪碧图，并且只需要一次性操作DOM。该插件具有高性能特点，内置缓存机制，只有在图标文件发生改变时才会重新生成，确保效率。

2. 项目快速启动

安装依赖

确保你的 Node.js 和 Vite 版本满足要求：

• Node.js >= 12.0.0
• Vite >= 2.0.0

然后通过以下命令安装 vite-plugin-svg-icons：

yarn add vite-plugin-svg-icons -D
# 或者
npm install vite-plugin-svg-icons -D
# 或者
pnpm install vite-plugin-svg-icons -D

配置Vite

在你的 vite.config.ts 文件中添加插件配置：

import { createVueApp } from '@vue/runtime-core'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      // 指定图标文件夹路径
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      // 设置symbol ID格式
      symbolId: 'icon-[dir]-[name]',
      // （可选）自定义插入位置，如：'body-first' 或 'body-last'
      inject: 'body-last',
      // （可选）自定义DOM ID
      customDomId: '__svg__icons__dom__'
    })
  ]
}

引入注册脚本

在 src/main.ts 中引入注册脚本：

import 'virtual:svg-icons-register'

现在你可以运行你的Vite项目，SVG雪碧图将会自动生成。

vite dev

3. 应用案例和最佳实践

在组件中使用SVG图标：

<template>
  <div>
    <!-- 使用动态绑定来选择图标 -->
    <svg-icon :name="iconName" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useSvgIcon } from 'your-custom-utils' // 导入自定义的SVG图标函数

const iconName = ref('search') // 替换为实际的图标名称

// useSvgIcon 是从你的自定义工具包导入的，它返回一个SVG组件
const SvgIconComponent = useSvgIcon(iconName.value)
</script>

在CSS中控制图标大小和颜色：

.svg-icon {
  width: 24px;
  height: 24px;
  fill: currentColor; /* 保持图标颜色与父元素一致 */
}

4. 典型生态项目

• Vitesse: 由吕立国（lilong）维护的基于Vite的全栈模板项目，集成了许多实用的插件，包括SVG图标处理。
• Vue 3: Vue 3 社区项目经常使用此插件来管理SVG图标，以提升开发效率和性能。
• Element Plus: 基于 Element UI 的 Vue 3 组件库，在其图标系统中可能采用了类似的方法。

以上就是对 vite-plugin-svg-icons 插件的基本介绍和使用指南，希望对你在构建SVG图标管理系统时有所帮助。