admin管理员组文章数量:1658441
将图片转换为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变量，自动读取当前元素颜色
// }版权声明：本文标题：【Vue】自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729807550a1213368.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论