vue3中使用svg图标

安装依赖

npm i vite-plugin-svg-icons -D

vite.config.ts中添加配置

主要为指定svg图标存放路径以及命名方式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path';



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})

在main.ts中引入插件（这一步如果引入报错说缺少依赖，那就npm安装一下那个依赖即可）

import 'virtual:svg-icons-register'

使用

xlink:href="#icon-vue"中的icon-vue表示图标的名称，如此处我使用的图标名称为vue就直接写#icon-vue即可，vue才是名称，前面一截#icon-是固定标识

fill：图标的颜色

在svg标签里面可以书写行内样式，如图标宽高等等

<svg style="">
    <use xlink:href="#icon-vue" fill="skyblue"></use>
 </svg>

封装成组件使用

<script setup lang="ts">
import { } from 'vue'

defineOptions({
    name:"SvgName"
})

defineProps({
    prefix:{
        type:String,
        default:'#icon-'
    },
    name:{
        type:String,
        required:true
    },
    color:{
        type:String,
        default:''
    },
    width:{
        type:String,
        default:'15px'
    },
    height:{
        type:String,
        default:'15px'
    }
})

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

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