VUE3项目--配置SVG图标在开发项目的时候经常会用到svg矢量图。该文章记录了在vue3项目中，使用Vite构建工具

在开发项目的时候经常会用到svg矢量图，而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且SVG文件比img要小很多，放在项目中几乎不占用资源。

如果你的项目是VUE3的，并且使用Vite构建工具，那么可以参考下面的步骤配置并使用svg图标。

一、安装

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

// vite.config.ts

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

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})

在入口文件main.ts中导入svg插件的注册脚本

// main.ts

// 引入svg插件的注册脚本
import 'virtual:svg-icons-register'

二、使用SVG图标

阿里巴巴矢量图标库含有大量的svg图标，我们需要的大部分图标都可以在里面找到。

下面是封装好的一个svg图标组件，可以直接使用。

<template>
  <!-- svg: 图标外层容器节点，内部需要与use标签结合使用 -->
  <svg aria-hidden="true" :style="{ width, height }">
    <!-- href: 执行用哪一个图标，属性值务必是：#icon-图标名称 -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use :href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts" name="SvgIconIndex">
defineProps({
  // href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  // 提供使用的图标名字。
  // 比如在src/assets/icons文件夹下有一个phone.svg的矢量图文件，那么name就是phone。
  name: {
    type: String,
    required: true
  },
  // 提供使用的图标颜色
  color: {
    type: String,
    default: '#333'
  },
  // 接受父组件传递过来的图标的宽度
  width: {
    type: String,
    default: '16px'
  },
  // 接受父组件传递过来的图标的高度
  height: {
    type: String,
    default: '16px'
  }
})
</script>