【Vue】引入并更改svg图标颜色，封装IconSvg组件

最新推荐文章于 2024-06-11 16:34:11 发布

Fortaro

最新推荐文章于 2024-06-11 16:34:11 发布

阅读量2k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Fortaro/article/details/133121981

版权

【Vue2】引入并更改svg图标颜色，封装IconSvg组件

在接手一个vue2项目的时候，发现里面居然逆天地用了svg的源码堆在html结构里，而且在不同的地方用了一样的图像，而且还用css修改了svg标签的颜色。因为要按照设计稿来，而且设计稿有些图标还没有svg，也没有说要用字体图标的方案。因此为了替换这样冗余的结构，想要用不失真的svg图标，但是又希望能随意改变它的颜色，我封装了一个IconSvg组件。

原本的逆天结构：
在这里插入图片描述

修改svg颜色的方案

1.使用源码的进行修改fill属性

在源码里面直接修改fill属性能直接达到修改颜色的效果。
如果是直接用svg源码（并不推荐），能够用css修改svg的颜色，如果css失效的话，说明svg源码里面的<g> <path>等属性有fill属性导致无法覆盖，需要手动对源码的fill设置为none或者删除。

svg {
	fill: red;
}

2.投影偏移

利用filter: drop-shadow投影出不同颜色的svg，用偏移量把投影替代原本的svg图像。
filter: drop-shadow：x轴偏移量 y轴偏移量模糊程度投影颜色

img{
  filter: drop-shadow(0px 0px #111);
}

模糊程度的参数缺省时，默认0，投影出另一个纯色的img。
利用绝对定位，移走原本的img标签，偏移投影到原本的位置替换。
overflow:hidden：隐藏被移走的img标签，留下投影。

在这里插入图片描述
为了保证有一定的大小空间，给偏移量设置大一点，这样即时是稍大一点的图像也可以确保原本的图像偏移出框外。
测试例子：

<style>
    body{
      display: flex;
    }
    .icon-view{
      position: relative;
      height: 100px;
      width: 100px;
      overflow: hidden;
    }
    img{
        position:absolute; 
        top: 0px; 
        left: -999px;
        height: 100%;
      }
      .img1{
        filter: drop-shadow(999px 0px rgb(255, 190, 12));
      }
      .img2{
        filter: drop-shadow(999px 0px rgb(255, 97, 97));
      }
      .img3{
        filter: drop-shadow(999px 0px rgb(0, 125, 184));
      }
  </style>
<body>
  <div class="icon-view">
    <img src="./warn_em.svg" class="img1">
  </div>
  <div class="icon-view">
    <img src="./warn_em.svg" class="img2">
  </div>
  <div class="icon-view">
    <img src="./warn_em.svg" class="img3">
  </div>
</body>

这样就可以做出不一样颜色的svg图标了（仅限于纯色svg图标）
在这里插入图片描述

`SvgIcon`

<template>
  <div class="icon-view">
    <!-- 利用filter: drop-shadow投影出不同颜色的svg，用偏移量把投影替代原本的svg图像 -->
    <img :src="iSrc" :style="`filter: drop-shadow(999px 0px ${iColor});`">
  </div>
</template>

<script>
  export default {
    name:'SvgIcon',
    props: {
      iColor: {
        type:String,
        // 默认为主题颜色#5273de
        default:'#5273de',
      },
      iSrc:{
        type:String,
        required:true
      }
    }
  }
</script>

<style lang="less" scoped>
.icon-view{
  position: relative;
  height: 100%;
  width: 100%;
  // 隐藏移出框外的源本img样式
  overflow: hidden;
  img{
    position:absolute; 
    top: 0px; 
    // 移走原本的svg
    left: -999px;
    height: 100%;
  }
}
</style>

使用例：

<SvgIcon:iSrc="MonitorImg.Warn" iColor="#1890ff" class="warn-icon"/>

Fortaro

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【Vue】引入并更改svg图标颜色，封装IconSvg组件

在接手一个vue2项目的时候，发现里面居然逆天地用了svg的源码堆在html结构里，而且在不同的地方用了一样的图像，而且还用css修改了svg标签的颜色。因为要按照设计稿来，而且设计稿有些图标还没有svg，也没有说要用字体图标的方案。因此为了替换这样冗余的结构，想要用不失真的svg图标，但是又希望能随意改变它的颜色，我封装了一个IconSvg组件。
复制链接

扫一扫