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, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论