vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改

前言

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" />