参考链接:
https://juejin.cn/post/6844903697999200263https://juejin.cn/post/6844903697999200263
第一步:安装插件
npm install svg-sprite-loader
第二步:封装组件 SvgIcon.vue[在components/icon目录下]
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component({})
export default class SvgIcon extends Vue {
@Prop({
required: true,
})
private iconClass!: string;
@Prop({
default: "",
})
private className!: string;
private get iconName() {
return `#icon-${this.iconClass}`;
}
private get 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;
}
第三步:在src目录下创建icons文件夹,包含svg文件夹【存放svg文件】、index.ts文件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210324152711363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1NzM4NA==,size_16,color_FFFFFF,t_70#pic_center) index.ts
import Vue from 'vue'
import SvgIcon from '@/components/icon/SvgIcon.vue' // svg组件
// 注册到全局
Vue.component('svg-icon', SvgIcon)
const requireAll = (requireContext:any) => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
第四步: main.ts导入
import './icons' // svg 图标
第五步:配置文件【重要】
const path = require('path')
function resolve (dir) {
return path.join(__dirname, './', dir)
}
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(args => {
const argv = process.argv
const icourt = argv[argv.indexOf('--icourt-mode') + 1]
args[0]['process.env'].MODE = `"${icourt}"`
return args
})
// svg rule loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
};
第六部:项目使用
<svg-icon icon-class="email"/>
遇到的问题:
1
在安装插件的时候,最下面 found 9 个高危…
npm audit fixto fix them, or
npm audit` for details
解决办法:
npm audit fix
npm audit fix --force
npm audit
参考链接
https://blog.csdn.net/weixin_38610651/article/details/107021204
2 运行程序的时候 (npm run serve)
Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin.
解决办法:
打开src/css/iconfont/iconfont.css【这个文件夹用于存放项目中需要使用的iconfont倒入的icon 使用的时候直接 而iconfont.css中
.icon-task:before {
content: "\e60a";
}
】
去掉这一行,并且把上面一行的逗号改为封号;
参考链接
https://blog.csdn.net/qq_40282732/article/details/107385220