前言
svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗?
一、components下创建自定义公共svg组件
zc-svg.vue:
<template>
<div class="svgBox" :style="{ width: `${size}px`, height: `${size}px` }">
<img
:src="require(`./${type}.svg`)"
v-bind="{ alt: alt || type, width: size, height: size }"
:style="color ? { marginLeft: `-${size}px`, filter: `drop-shadow(${color} ${size}px 0)` } : null"
/>
</div>
</template>
<script>
/**
* @type 图标类型
* @size 图标尺寸
* @color 图标颜色
* @alt img的alt属性,seo需要,默认取值type
* description:如果有动态颜色在页面组件中通过css修改,如下
* /deep/ img {
* margin-left: -20px;
* filter: drop-shadow(red 20px 0);
* }
*/
export default {
props: {
type: {
type: String,
require: true
},
size: {
type: Number | String,
default: 20
},
color: String,
alt: String
}
}
</script>
<style lang="less" scoped>
.svgBox {
display: inline-block;
vertical-align: middle;
overflow: hidden;
img {
float: left;
}
}
</style>
二、注册和使用
Vue.component('ZcSvg', ZcSvg) //可在全局文件注册
<ZcSvg type="shandian" />