Vue3 SVG图标配置

安装SVG依赖插件

-D表示该依赖添加在package.json里面的devDependencies。

devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的

npm install vite-plugin-svg-icons -D

在src目录下的assets文件夹下新建icons文件夹来存放svg图片。在main.js里面添加该句代码：

import 'virtual:svg-icons-register'

在vite.config.ts中配置插件

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

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
       // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      symbolId: "icon-[dir]-[name]",
    })
  ],
  resolve: {
    //别名配置
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    // 引入文件的时候，忽略以下文件后缀
    extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
  }
})

由于svg使用次数多，为了避免重复导入所以封装成全局组件

在components下新建SvgIcon/index.vue，其中name为图标文件名必传

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

<script setup lang="ts">

  const props = defineProps({
    // svg图标前缀
    prefix: {
      type: String,
      default: "#icon-"
    },
    // 图标名称
    name: {
      type: String,
      required:true
    },
    // 图标颜色
    color: {
      type: String,
      default:""
    },
    // 图标宽度
    width: {
      type: String,
      default:"16px"
    },
    // 图标高度
    height: {
      type: String,
      default:"16px"
    },
  })
</script>

插件化，在components下新建index.ts

//引入svg组件
import SvgIcon from './SvgIcon/index.vue'

// 组件全局对象
const allGlobalComponent = {SvgIcon}

// 对外暴露
export default {
    install(app){
        Object.keys(allGlobalComponent).forEach(key=>{
            // 注册
            app.component(key,allGlobalComponent[key])
        })
    }
}

入口文件挂载
 

import globalComponent from '@/components'

app.use(globalComponent)