vue项目中使用svg图标

1. 下载依赖

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

2. 在vue.config.js文件下添加以下代码

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
        include: ['./src/icons']
      })
  },

3. 在icons文件下添加两个文件，分别是index.js和SvgIcon.vue

• index.js文件内容如下

import Vue from "vue";
import SvgIcon from "./SvgIcon.vue";
Vue.component('svg-icon',SvgIcon)

//require.context 读取指定目录的所有文件
//第一个：目录
//第二个：是否遍历子集目录
//第三个：定义遍历文件规则

const req = require.context('./svg',false,/\.svg$/)//读取结尾为。svg的文件
//es6
const requireAll = requireContext => {
	return requireContext.keys().map(requireContext)
}
requireAll(req)

• SvgIcon.vue文件内容如下

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>
<script>
import { ref, computed, onMounted } from '@vue/composition-api';
export default {
    name: "svgIcon",
    // props: ['iconClass', 'className'],
    props: {
        // 分页
        iconClass: {
            type: String,  // 定义接收的值类型
            default: ''
        },
        className : {
            type: String,
            default: ''
        }
    },
    setup(props){
        const msg = ref("手把手撸码的说法的前端");
        const number = ref(1);
        // 计算属性，得出最终结果，并返回
        const iconName = computed(() => `#icon-${props.iconClass}`)
        const svgClass = computed(() => {
            if(props.className) {
                return `svg-icon ${props.className}`
            }else{
                return `svg-icon`
            }
        })
        return {
            msg,
            iconName,
            svgClass
        }
    }
}
</script>
<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    /* fill: currentColor; */
	/* background-color: #000; */
}
</style>

4. 在main.js中引入svg

5. 添加svg图片

6. 在页面中使用svg图标

	<svg-icon iconClass="视频章节" className="视频章节" />

其中iconClass和className都为svg图标的名称

以下为显示效果

祝大家成功！