背景

继上篇文章《vue3使用iconfont的symbol方式引入》讲述引入iconfont网站的图标情景。在实际的工作中，设计师通常会将UI稿上传到蓝湖等协作平台，那么我们如何使用设计师UI稿中的图标呢？对于png，jpg等格式使用，我就不多说了。因为svg图标尺寸更小，且是可伸缩的，得到了广大开发者的钦赖。这里主要讲述下如何使用svg格式的图标，如果有问题，请大家指正。

下载svg图标

在蓝湖或其他协作平台下载图标时，支持不同格式的选择，选择svg格式，下载切图。

使用svg图标

1.新建svg文件夹，例如：src/assets/icons/svg，将svg图标放到该目录下。

2.下载插件

npm install vite-plugin-svg-icons -D

3.在vite.config.ts中新增如下配置

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default ({ mode, command }: { mode: any, command:any }) => {
  return defineConfig({
    plugins: [vue(), 
      vueJsx(),
      //引入SVG图标素材文件
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: {
          plugins: [
            {
              name: 'removeAttrs',
              params: { attrs: ['fill'] }
            }
          ]
        },
      }),
    ],
  })
}

4.在main.ts中新增

import 'virtual:svg-icons-register'

5.新建组件SvgIcon.vue，与《vue3使用iconfont的symbol方式引入》文章中封装的组件相同。

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
  iconClass: {
    type: String,
    required: true
  },
  className: {
    type: String
  }
})
const iconName = computed(() => {
  return `#icon-${props.iconClass}`
})
const svgClass = computed(() => {
  if (props.className) {
    return 'svg-icon ' + props.className
  } else {
    return 'svg-icon'
  }
})
</script>

<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

6.在项目中引入，iconClass传入的名称为svg文件夹中svg的图标名称。

<svg-icon iconClass="test_svg" className="icon" />

补充

在使用svg图标的时候，如果想改变图标线条的粗细，可以修改.svg文件的stroke-width属性，该属性可以设置成小数或者整数。