Vue3+TS项目封装SVG图标显示组件vite-plugin-svg-icons插件使用

准备好svg文件 

假设从iconfont-阿里巴巴矢量图标库下载了一个svg格式的图标，放在我们项目里，并重命名为ic_money.svg，相对路径为：src\assets\images\icons\ic_money.svg

 安装vite-plugin-svg-icons插件

npm install vite-plugin-svg-icons -D

npm install vite-plugin-svg-icons@2 -D // 安装指定版本

本例插件版本如下

"vite-plugin-svg-icons": "^2.0.1"

 vite.config.ts中加入以下代码

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

const svgIconsPlugin = createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), 'src/assets/images/icons')],
  symbolId: 'icon-[dir]-[name]',
});

export default defineConfig({
  plugins: [
    ...
    svgIconsPlugin,
  ],
  ...
})

新建SvgIcon.vue文件

在src\components目录下新建组件：SvgIcon.vue

<template>
  <svg :style="iconStyle" aria-hidden="true">
    <use :xlink:href="iconUrl" :fill="color"/>
  </svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '14',
  },
  color: {
    type: String,
    default: '#3f99fa',
  },
})
const iconUrl = `#icon-${props.name}`;
const iconStyle = computed(() => {
  return {
    height: `${props.size}px`,
    width: `${props.size}px`,
  };
})
</script>
<style scoped>
</style>

main.ts中将SvgIcon注册为全局组件 

import 'virtual:svg-icons-register';
import SvgIcon from "@/components/SvgIcon.vue";


const app = createApp(App)

app.component("SvgIcon", SvgIcon);

页面中使用SvgIcon

// template中
<SvgIcon name="ic_money" size="20" color="#fbd95d"></SvgIcon>

// js中 导入组件
import SvgIcon from '@/components/SvgIcon.vue'

效果