vue3 中使用svg-icon

准备

安装 svg-sprite-loader

npm i svg-sprite-loader@6.0.11

下载 iconfont 并导入项目

1. 在 assets 目录下新建 icons 目录，在 icons 目录下继续新建 svg 目录（用来存放svg图标）。
2. 在 svg 目录下新建 user.svg 文件。
3. 从 iconfont-阿里巴巴矢量图标库官方搜索 user，选择需要的图标，复制 SVG 代码到刚才创建的 user.svg 文件中。

配置 vue.config.js

const { defineConfig } = require('@vue/cli-service')

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)

module.exports = defineConfig({
  ……,
  chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

封装使用

封装 svg-icon 组件

在 components 目录下新建 SvgIcon.vue：

<template>
  <svg :class="svgClass" :style="{ width: size + 'px', height: size + 'px', color: color }" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    name: { type: String, required: true },     // svg 图标名称
    className: { type: String, default: '' },   // 指定的类样式
    size: { type: Number, default: 32 },        // 图标尺寸
    color: { type: String, default: "#000" }    // 图标颜色
  },
  computed: {  // 计算属性
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

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

导入图标

在上面新建的 assets/icons 目录下新建 index.js 文件：

const ctx = require.context("./svg", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(ctx)

在 main.js 文件中导入图标和图标组件：

import '@/assets/icons'  // 导入图标资源
import SvgIcon from '@/components/SvgIcon.vue'// svg component

var app = createApp(App)
app
  .component('svg-icon', SvgIcon)
  .mount('#app')

使用

<svg-icon name="user" color="red" size='48'></svg-icon>