1、安装svg依赖
npm install svg-sprite-loader --save-dev
2、## 创建svg文件夹存放svg图标
3、## vue.config.js 中配置svg图片
vue.config.js代码如下:
const path = require('path')
module.exports = {
chainWebpack:config=>{
// svg图标加载
config.module
.rule('svg')
.exclude.add(path.join(__dirname, 'src/icons/svg'))
.end()
config.module
.rule('icons')// 定义一个名叫 icons 的规则
.test(/\.svg$/)// 设置 icons 的匹配正则
.include.add(path.join(__dirname,'src/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()
}
}
作者:韩韩猫薄荷
链接:https://juejin.cn/post/7254786711702519863
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
4、## 在components文件夹下创建SvgIcon文件夹,并在其中创建index.vue文件
components/SvgIcon/index.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.15em;
fill: currentColor;
}
</style>
作者:韩韩猫薄荷
链接:https://juejin.cn/post/7254786711702519863
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
5、在icons文件夹创建index.js 自动导入所有svg图标
icons/index.js代码如下:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)
const req = require.context('@/icons/svg', false, /\.svg$/)
const requireAll = requireContext => {
// requireContext.keys()数据:['./404.svg', './agency.svg', './det.svg', './user.svg']
requireContext.keys().map(requireContext)
}
requireAll(req)
作者:韩韩猫薄荷
链接:https://juejin.cn/post/7254786711702519863
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
6、## main.js中引入icons/index.js
main.js代码如下:
import '@/icons/index.js'
7、执行npm run serve重启项目
已经完成啦,svg在vue中标签和写法如下