Vue3批量引入svg图标

node版本：20.13.1

在vue3项目中，需要批量导入某个文件夹内数量不确定的svg文件用来作为图标，开发完成后能够通过增减文件夹内的svg文件，从而影响图标的数量。

使用步骤

下载svg插件

npm i vite-plugin-svg-icons -D

配置vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

main.ts引入注册脚本

//svg插件需要配置代码
import 'virtual:svg-icons-register'

注意：如果这步引入后报错，

要么执行指定命令后重启项目，npm i fast-glob -D

或者tsconfig.json中compilerOptions里面添加 "types": ["vite-plugin-svg-icons/client"]

编写组件

<template>
  <div class="container">
    <svg :style="{ width, height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  color: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
});
</script>

<style lang="scss" scoped>
</style>

相关问题

问题：main.ts 引入报错

执行安装命令 npm i fast-glob -D 后重启

sass通过@import引入报错，sass版本高于1.8.0就要把@import改成@use