使用 CSS 设计背景 SVG 图标 [重复]

Question

我正在学习 svg。我很想创建自己的基于 SVG 的 Web 图标库。我一直在尝试阅读很多 Chris Coyers 的资料，包括一本书。信息范围从 2012 年至今，有些地方可能有点混乱。

这导致我走上了grunticon的道路

这会通过将 svg 嵌入到 css 文件中来生成图标 css。

.icon-cog { background-image: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ctitle%3Ecog%3C%2Ftitle%3E%3Cpath%20d%3D%22M29.18%2019.07c-1.678-2.908-.668-6.634%202.256-8.328L28.29%205.295c-.897.527-1.942.83-3.057.83-3.36%200-6.085-2.743-6.085-6.126h-6.29c.01%201.042-.25%202.1-.81%203.07-1.68%202.906-5.41%203.895-8.34%202.21L.566%2010.726c.905.515%201.69%201.268%202.246%202.234%201.677%202.905.673%206.625-2.24%208.32l3.145%205.448c.895-.522%201.935-.82%203.044-.82%203.35%200%206.067%202.725%206.084%206.092h6.29c-.004-1.035.258-2.08.81-3.04%201.676-2.902%205.4-3.893%208.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16%2022.48c-3.578%200-6.48-2.902-6.48-6.48S12.423%209.52%2016%209.52c3.578%200%206.48%202.902%206.48%206.48s-2.902%206.48-6.48%206.48z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; }

作为 grunt 过程的一部分，svg 被最小化并移除填充：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>cog</title><path d="M29.18 19.07c-1.678-2.908-.668-6.634 2.256-8.328L28.29 5.295c-.897.527-1.942.83-3.057.83-3.36 0-6.085-2.743-6.085-6.126h-6.29c.01 1.042-.25 2.1-.81 3.07-1.68 2.906-5.41 3.895-8.34 2.21L.566 10.726c.905.515 1.69 1.268 2.246 2.234 1.677 2.905.673 6.625-2.24 8.32l3.145 5.448c.895-.522 1.935-.82 3.044-.82 3.35 0 6.067 2.725 6.084 6.092h6.29c-.004-1.035.258-2.08.81-3.04 1.676-2.902 5.4-3.893 8.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16 22.48c-3.578 0-6.48-2.902-6.48-6.48S12.423 9.52 16 9.52c3.578 0 6.48 2.902 6.48 6.48s-2.902 6.48-6.48 6.48z"/></svg>

这在 (Adobe Illustrator) 中如下所示：

由此也生成了 html（虽然我已经添加了图标类）：

<div class="icon icon-cog" style="width: 32px; height: 32px;"></div>

我想在接下来的几个小步骤中实现以下目标：

1. 更改背景颜色
2. 更改前景色

下面会改变背景颜色：

.icon {
    background-color: red;
}

呈现以下内容：

我已经尝试了以下和其他化身来尝试设置前景。

.icon path {
    fill: currentColor;
}

Answer 1

您可以将图标用作mask 来更改颜色。

.icon-cog {
  background-color:red;
  background-repeat: no-repeat;
  -webkit-mask: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ctitle%3Ecog%3C%2Ftitle%3E%3Cpath%20d%3D%22M29.18%2019.07c-1.678-2.908-.668-6.634%202.256-8.328L28.29%205.295c-.897.527-1.942.83-3.057.83-3.36%200-6.085-2.743-6.085-6.126h-6.29c.01%201.042-.25%202.1-.81%203.07-1.68%202.906-5.41%203.895-8.34%202.21L.566%2010.726c.905.515%201.69%201.268%202.246%202.234%201.677%202.905.673%206.625-2.24%208.32l3.145%205.448c.895-.522%201.935-.82%203.044-.82%203.35%200%206.067%202.725%206.084%206.092h6.29c-.004-1.035.258-2.08.81-3.04%201.676-2.902%205.4-3.893%208.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16%2022.48c-3.578%200-6.48-2.902-6.48-6.48S12.423%209.52%2016%209.52c3.578%200%206.48%202.902%206.48%206.48s-2.902%206.48-6.48%206.48z%22%2F%3E%3C%2Fsvg%3E')  0 / 100% 100%;
          mask: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ctitle%3Ecog%3C%2Ftitle%3E%3Cpath%20d%3D%22M29.18%2019.07c-1.678-2.908-.668-6.634%202.256-8.328L28.29%205.295c-.897.527-1.942.83-3.057.83-3.36%200-6.085-2.743-6.085-6.126h-6.29c.01%201.042-.25%202.1-.81%203.07-1.68%202.906-5.41%203.895-8.34%202.21L.566%2010.726c.905.515%201.69%201.268%202.246%202.234%201.677%202.905.673%206.625-2.24%208.32l3.145%205.448c.895-.522%201.935-.82%203.044-.82%203.35%200%206.067%202.725%206.084%206.092h6.29c-.004-1.035.258-2.08.81-3.04%201.676-2.902%205.4-3.893%208.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16%2022.48c-3.578%200-6.48-2.902-6.48-6.48S12.423%209.52%2016%209.52c3.578%200%206.48%202.902%206.48%206.48s-2.902%206.48-6.48%206.48z%22%2F%3E%3C%2Fsvg%3E')  0 / 100% 100%;
  display:inline-block;
  height:50px;
  width:50px;
}

<span class="icon-cog"></span>

如果要添加背景颜色，可以在伪元素中使用遮罩。

.icon-cog {
  display: inline-block;
  height: 50px;
  width: 50px;
  position: relative;
  background: yellow;
}

.icon-cog::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  background-repeat: no-repeat;
  -webkit-mask: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ctitle%3Ecog%3C%2Ftitle%3E%3Cpath%20d%3D%22M29.18%2019.07c-1.678-2.908-.668-6.634%202.256-8.328L28.29%205.295c-.897.527-1.942.83-3.057.83-3.36%200-6.085-2.743-6.085-6.126h-6.29c.01%201.042-.25%202.1-.81%203.07-1.68%202.906-5.41%203.895-8.34%202.21L.566%2010.726c.905.515%201.69%201.268%202.246%202.234%201.677%202.905.673%206.625-2.24%208.32l3.145%205.448c.895-.522%201.935-.82%203.044-.82%203.35%200%206.067%202.725%206.084%206.092h6.29c-.004-1.035.258-2.08.81-3.04%201.676-2.902%205.4-3.893%208.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16%2022.48c-3.578%200-6.48-2.902-6.48-6.48S12.423%209.52%2016%209.52c3.578%200%206.48%202.902%206.48%206.48s-2.902%206.48-6.48%206.48z%22%2F%3E%3C%2Fsvg%3E') 0 / 100% 100%;
          mask: url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ctitle%3Ecog%3C%2Ftitle%3E%3Cpath%20d%3D%22M29.18%2019.07c-1.678-2.908-.668-6.634%202.256-8.328L28.29%205.295c-.897.527-1.942.83-3.057.83-3.36%200-6.085-2.743-6.085-6.126h-6.29c.01%201.042-.25%202.1-.81%203.07-1.68%202.906-5.41%203.895-8.34%202.21L.566%2010.726c.905.515%201.69%201.268%202.246%202.234%201.677%202.905.673%206.625-2.24%208.32l3.145%205.448c.895-.522%201.935-.82%203.044-.82%203.35%200%206.067%202.725%206.084%206.092h6.29c-.004-1.035.258-2.08.81-3.04%201.676-2.902%205.4-3.893%208.325-2.218l3.144-5.447c-.9-.515-1.678-1.266-2.232-2.226zM16%2022.48c-3.578%200-6.48-2.902-6.48-6.48S12.423%209.52%2016%209.52c3.578%200%206.48%202.902%206.48%206.48s-2.902%206.48-6.48%206.48z%22%2F%3E%3C%2Fsvg%3E') 0 / 100% 100%;
}

<span class="icon-cog"></span>