【vite+vue3+ts】打包svg图标精灵地图

根据 icons 文件svg图片打包到项目中，通过组件使用图标

参考文档：GitHub - vbenjs/vite-plugin-svg-icons: Vite Plugin for fast creating SVG sprites.

1.安装插件 

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

 2.使用插件

vite.config.ts

import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: false,
      resolvers: [VantResolver({ importStyle: false })]
    }),
+    createSvgIconsPlugin({
+      // 指定图标文件夹，绝对路径（NODE代码）
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
+    })
  ],

3.导入到main.ts

+import 'virtual:svg-icons-register'

4.使用svg精灵图

 <svg aria-hidden="true">
      <!-- #icon-文件夹名称-图片名称 -->
     <!-- 唯一标识symbolId: 'icon-[dir]-[name]' -->
      <use href="#icon-login-eye-off" />
 </svg>

• icons文件打包的产物？

  • 会生成一个 svg 结构（js创建的）包含所有图标，理解为 精灵图

• 怎么使用svg图标？

  • 通过 svg 标签 #icon-文件夹名称-图片名称 指定图片，理解 精灵图定位坐标