【Vue】自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式

哇哦Q

已于 2022-09-16 17:17:52 修改

阅读量1.6k

点赞数 1

分类专栏： Vue 文章标签： echarts javascript 前端

于 2022-09-09 11:23:27 首次发布

本文链接：https://blog.csdn.net/Qxn530/article/details/126777811

版权

Vue 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

本文介绍了如何将图片转换为SVG格式，推荐了Inkscape软件和在线转换网站。同时，文章讨论了SVG在侧边栏应用时可能出现的问题，如图标无法高亮。为解决这个问题，提供了三种改变SVG颜色的方法，包括编辑SVG源代码、使用Iconfont的批量去色功能和CSS3的滤镜。此外，还给出了修改侧边栏图标和改变其颜色的步骤。

摘要由CSDN通过智能技术生成

将图片转换为svg格式

在这里推荐一个软件inkscape，这个软件可以把图片转换为svg。

或者使用网站格式转换，这个网站不管是图片也好还是文件，都可以转换成自己想要的，还是免费的。

注意：以上两个转换后的svg只是在xml中放了一个img，所以不推荐放在侧边栏上，因为点击侧边栏后图标不会高亮，也就是不会改变颜色。若没有这一要求，这两个还是很好用的。

修改侧边栏图标

把自己的图标放入src------icons-------svg中，然后直接使用名字即可

改变图标颜色

在侧边栏使用自定义图标时，点击菜单会发现图标颜色不会更改。以下有三种方法可以改变颜色。

1、需要找到对应svg，然后删除fill或者改成fill="#......"，一个svg可能有多个fill

2、在iconfont下载图标的时候，使用添加到项目，点击批量操作——批量去色

3、使用css3的滤镜filter中的属性drop-shadow改变svg的颜色

<img :src="weather.icon" width="80" height="80" class="img" />


.img {
  position: relative;
  left: -80px;
  filter: drop-shadow(#fff 80px 0); // 投影颜色
}
// svg {
//   fill: currentColor; //currentColor为css变量，自动读取当前元素颜色
// }