vue开发移动端 svg图标颜色在iphone真机上无效小坑总结

前言

业余时间在开发仿小红书时, 开发 icon组件时用到 svg 图标, 通过 color 给图标设置自定义颜色时发现 安卓手机可以正常显示，但是 iphone 手机没有上色。

以上是谷歌浏览器，正常显示。

这张是真机调试时出现的问题。下面是 icon 组件的代码。

icon 组件

通过外部传递颜色值, 就通过 style="color: xxx;" 进行设置颜色，为什么在 iphone 真机上无效呢?

查阅文档之后，发现设置 svg 图标颜色时最好不要用 color 这个属性，应该使用 fill 这个属性。

来定义图形元素内部颜色。

将 icon组件中的 color 改为 fill 之后发现正常显示了。