vue项目中svg图标的使用svg-icon

以下介绍的是vue项目中对svg-icon图标的使用流程

安装使用loader

npm i --save-dev svg-sprite-loader@6.0.9

修改webpack配置

在vue.config.js中修改完webpack配置之后，要重启项目

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const webpack = require('webpack')
module.exports = {
  chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('svg')
      // 忽略
      .exclude.add(resolve('src/icons'))
      // 结束
      .end()
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('icons')
      // 正则，解析 .svg 格式文件
      .test(/\.svg$/)
      // 解析的文件
      .include.add(resolve('src/icons'))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use('svg-sprite-loader')
      // 具体的loader
      .loader('svg-sprite-loader')
      // loader 的配置
      .options({
        symbolId: 'icon-[name]'
      })
      // 结束
      .end()
    config
      .plugin('ignore')
      .use(
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
      )
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

创建svgIcon组件

创建svgIcon组件便于复用

一下是 index.vue文件夹中的内容

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

<script setup>
// 此处用的是vue3中的setup函数语法糖
import { defineProps, computed } from 'vue'
const props = defineProps({ // 接收props参数
  icon: {
    type: String,
    required: true
  }
})

const iconName = computed(() => { // computed计算属性
  return `#icon-${props.icon}`
})
</script>

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

引入icons文件图标

svg文件夹中引入的是要用到的svg图标，并在icons文件夹下创建index.js文件

import SvgIcon from '@/components/SvgIcon'

const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))

export default (app) => {
  app.component('svg-icon', SvgIcon)
}

全局引入

在main.js中引入icon图标

// import * as ElIcons from '@element-plus/icons-vue'
// const app = createApp(App)
// for (const iconName in ElIcons) {
//   app.component(iconName, ElIcons[iconName])
// }
import SvgIcon from "@/icons"
SvgIcon(app)

在所需处引用

    <svg-icon icon="eye"></svg-icon>