vue-巧用svg-sprite-loader,提高效率利器;

Posted Keep runing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-巧用svg-sprite-loader,提高效率利器;相关的知识,希望对你有一定的参考价值。

vue.config.js

安装插件
npm i svg-sprite-loader -D
function resolve (dir){
return path.join(__dirname,dir)
}
chainWebpack(config) {
// 已有配置排除掉svg
config.module.rule("svg")
.exclude.add(resolve('src/icons'));
//配置svg
config.module.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({symbolId: 'icon-[name]'})
}
  • 定义svg components

<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>

<script>
export default {
name: 'SvgIcon',
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 scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
  • 根目录 创建icons文件

icons/svg/a.svg b.svg ...  存放svg文件
icons/index 配置js


index.js
import Vue from "vue"
import SvgIcon from '@/components/SvgIcon'
//自动加载
const req = require.context("./svg",false,/\.svg$/)
req.keys().map(req)

Vue.component('svg-icon',SvgIcon)
  • 引用svg

main.js
import "@/icons"



由于是全局组件 组件内可直接使用
<svg-icon icon-class="car"></svg-icon>
<svg-icon icon-class="heart"></svg-icon>


以上是关于vue-巧用svg-sprite-loader,提高效率利器;的主要内容,如果未能解决你的问题,请参考以下文章

svg-sprite-loader 使用教程

vue2&3自定义svg图标组件

巧用 Vue 中的函数式组件

(vue项目)巧用ES6中的数据类型Map

巧用CurrentThread.Name来统一标识日志记录(续)

vue 使用 svg 小图标