一、装置依赖包
npm i -D svg-sprite-loader二、配置vue.config.js文件
在chainWebpack中减少下列配置
chainWebpack (config) { config.module.rule('svg') .exclude.add(resolve('src/icons')) config.module.rule('icons') .test(/\.svg$/) .include.add(resolve('./src/icons')).end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }三、实现SvgIcon组件
组件构造如下：
<template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>export default { props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }}</script><style lang="scss">.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>四、根目录下创立icons/svg目录
用于寄存咱们所须要用的svg文件
五、新建plugins目录及index.js文件
import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'const req = require.context('@/icons/svg', true, /\.svg$/)req.keys().map(req)Vue.component('svg-icon', SvgIcon)其作用是在Vue实例上创立SvgIcon组件，其中require.context的作用是获取一个特定的上下文,遍历文件夹中的指定文件，次要用来实现自动化导入模块
- 最初在main.js中引入plugins,
import '@/plugins'
六、SvgIcon 组件的应用
<svg-icon icon-class="icon-name" class="down"></svg-icon>其中icon-class为svg文件名， class为类名