vue使用svg自定义icon图标
1.安装 svg-sprite-loadersvg-sprite-loader 是用于创建SVG精灵图的Webpack加载程序,通过该插件可以将导入的SVG文件自动生成为symbol标签并插入进html中。npm install svg-sprite-loader --save-dev
·
1. 安装 svg-sprite-loader
svg-sprite-loader 是用于创建SVG精灵图的Webpack加载程序,通过该插件可以将导入的SVG文件自动生成为symbol标签并插入进html中。安装语句如下:
npm install svg-sprite-loader --save-dev
2. components文件下新建SvgIcon组件
index.vue的内容如下:
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg v-else :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: {
isExternal() {
return /^(https?:|mailto:|tel:)/.test(this.iconClass);
},
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
"-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
};
},
},
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
3. 在src文件夹下新建icons文件夹
在icons新建svg文件夹用于存放svg图片,再新建index.js
index.js内容如下:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
4. 在main.js中引入icon
5. 配置vue.config.js
以前旧版本是在webpack.base.conf.js中配置的,但vue-cli 升级成3.0以上版本webpack.base.conf.js就没有了。现在在vue.config.js中配置效果一样,代码如下图:
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack(config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end();
}
};
6. 使用
如下图,直接使用<svg-icon /> 在icon-class赋值svg图标的名称即可
更多推荐
已为社区贡献1条内容
所有评论(0)