vite+vue3 使用svg icon(包括element-p

1、安装依赖

npm i @element-plus/icons-vue -S
npm i vite-plugin-svg-icons -D

2、在vite.config.ts文件中

import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 版本不同引入方式不同
export default defineConfig({
  ...
  plugins: [
    ...
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ]
});

且按照iconDirs中路径准备好svg文件

image.png

3、创建引入全部element-plus文件，以及创建SvgIcon组件

在components文件夹下创建如下文件

image.png
components/SvgIcon/svgicon.ts文件内容如下

// 注册所有 @element-plus/icons-vue 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
  install: (app: App<Element>) => {
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
  }
};

components/SvgIcon/index.vue文件内容如下

// 注册自定义图标
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  iconClass: { // 图标名称与assets/icon/svg下使用的文件名一致
    type: String,
    required: true
  },
  className: { // 给图标添加class
    type: String,
    default: ''
  },
  color: { // 设置图标颜色
    type: String,
    default: '#333'
  }
});
const iconName = computed(() => {
  return `#icon-${props.iconClass}`;
});
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return 'svg-icon';
});
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

4、在main.ts中引入

// 注册所有图标
import 'virtual:svg-icons-register';  // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue';
import elementIcons from '@/components/SvgIcon/svgicon';
app.component('SvgIcon', SvgIcon);
app.use(elementIcons);

5、使用方法

// 自定义的svg图标
<svg-icon icon-class="lock" class="loack-icon"></svg-icon>

// element-plus图标
<el-icon><user-filled /></el-icon>