css – 设置SVG Material Design Icons的背景颜色

前端之家收集整理的这篇文章主要介绍了css – 设置SVG Material Design Icons的背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用此处描述的方法使用Material Design Icons:

https://github.com/google/material-design-icons#using-svg-sprites

但是,图标总是以黑色结束.我该怎么把它们的颜色改成白色呢?

我知道可以编辑SVG源代码以达到效果,但这似乎不是规范的方法.材料设计图标存储库的CSS图像精灵在不同的版本中取决于颜色,而SVG只有一种颜色(实际上,没有颜色,因为SVG代码中没有提到任何颜色).如果我需要不同的SVG精灵文件用于白色或黑色图标,它们会包含不同的版本,就像它们在CSS图像精灵的情况下那样,不是吗?

解决方法

给定的代码是google材料设计的“左V形图标”的图标的示例.

现在,如果您想更改图标的颜色,请在第一个路径标记添加填充属性.

如果要更改其背景颜色,请在第二个路径标记添加填充属性.没有背景颜色,不给它的属性.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fill="#fff"/>
    <path d="M0 0h24v24h-24z" fill="none"/>
</svg>

猜你在找的CSS相关文章