svg图片在项目中使用的非常广泛，今天记录一下我是如何在vue3 + vite 中使用svg图标。

• 预加载 在项目运行时就生成所有图标,只需操作一次 dom
• 高性能 内置缓存,仅当文件被修改时才会重新生成

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 中的配置插件

// 新增配置
const path = require('path')
import viteSvgIcons, {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

// 通用配置
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

module.exports = {
    base: '/hospital-vue',
    server: {
        port: 3000,
        //是否弹出浏览器
        open: false,
        //允许跨域
        cors: true
    },
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        //引入SVG图标素材文件
        createSvgIconsPlugin({
            iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
            symbolId: '[name]',
        })
    ]
}

3. 注册

在 src/main.js 内引入注册脚本

//导入Svg图片插件，可以在页面上显示Svg图片
import 'virtual:svg-icons-register';

如何在组件中使用
创建SvgIcon组件
/src/components/SvgIcon.vue

<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon',
      },
      name: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
      return { symbolId };
    },
  });
</script>

4. icons目录结构

# src/icons/svg

- icon1.svg
- icon2.svg
- icon3.svg

5. 使用

<SvgIcon name="worker_fill" class="icon-svg" />