Vue2中 svg图标的使用

一，安装svg依赖

npm install svg-sprite-loader --save-dev

二，创建svg文件夹

创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。

• 路径：src/assets/icons/svg

三，创建index.js文件

创建index.js 导入所有svg图标

• 路径：src/assets/icons/index.js

import Vue from "vue"
import SvgIcon from "./SvgIcon"
// 全局注册SvgIcon组件,这样就可以在其他地方使用这个svg-icon组件了
Vue.component("svg-icon", SvgIcon)

// 自动导入所有svg图标。
const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
    // requireContext.keys()数据：['./404.svg', './agency.svg', './det.svg', './user.svg']
    requireContext.keys().map(requireContext)
} 
requireAll(req)

四，配置vue.config.js

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

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack:config=>{
    // svg图标加载
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()
 
    config.module
      .rule('icons')// 定义一个名叫 icons 的规则
      .test(/\.svg$/)// 设置 icons 的匹配正则
      .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
      .end()
      .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
      .options({// 该 svg-sprite-loader 的配置
        symbolId:'icon-[name]'
      })
      .end()
  }
})

五，全局配置svg文件

• main.js

// 引入svg文件
import './assets/icons/index'

六，创建SvgIcon公共组件

• 路径：src/assets/icons/SvgIcon.vue

<template>
    <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
    <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="`#icon-${iconFileName}`" rel="external nofollow"  />
    </svg>
</template>
 
<script>
export default {
    name: 'SvgIcon',
    props: {
        iconFileName: {
            type: String,
            required: true
        }
    }
}
</script>
 
<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: -0.2em;
    fill: currentColor;
}
</style>