设置SVG Material Design Icons的背景颜色

Question

我使用此处描述的方法使用Material Design Icons:

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

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

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

Answer 1

给定的代码是Google物料设计的“左V形”图标的示例。

现在，如果您想更改图标的颜色，请fill在第一个路径标签中添加属性。

如果您想更改其背景颜色，请fill在第二个路径标签中添加add 属性。对于没有背景颜色给没有其财产。

<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>

Answer 2

这应该只是为你的图标设置属性的问题fill。例如，向您的图标添加一个名为“red”的类<div>：

<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims red"></div>

然后在 CSS 中定义类 red"。

.red {
   fill: #ff0000;
}

请注意，您可以使用属性设置 SVG 元素的填充颜色fill，而不是像 HTML 元素那样设置“颜色”等。