带有多色SVG图标的图标字体

Question

我们正在尝试为我们的自定义多色图标创建图标字体。 Icomoon 对于我们的 UI 图标（单色）来说就像一个魅力，但对于多色图标，需要多行才能使用图标（请看下面的示例）。对于多色 SVG 图标，是否有任何方法可以实现与单色类似的行为？

前

单色图标：

<span class="icon-name">

多色图标：

<span class="icon-name">
   <span class="path1">
  <span class="path2"> 
  <span class="path3">  
  <span class="path4">
  <span class="path5">
  <span class="path6">
  <span class="path7">
  <span class="path8">
</span>

Answer 1

“多层方法”

如果您需要使用图标字体（而不是内联 svgs），您可以创建由于负跟踪或字距调整值而“堆叠”的字形（如 fontAwesome 双色调图标）。例如，“O”可以呈现一个实心圆，“h”可以在其顶部呈现一个房子图标。由于左侧轴承为负，房屋图标被放置在圆圈的顶部。

Opentype SVG 字体

您可以使用

Opentype SVG 字体实现多色文本显示。虽然大多数现代浏览器支持大多数 Opentype SVG 字体功能，但存在不同的颜色表格式。因此，您可能需要添加多种字体以获得最佳向后兼容性。
对办公/图形应用程序的支持有点不稳定。

Photoshop CC 2017 及以上版本

插画家

Firefox，版本 32 及以上

Microsoft Edge、Windows 10 周年纪念版及以上版本

在 Windows 10 中，DirectWrite 和 Direct2D 平台组件允许在使用这些 API 的任何应用程序中支持 OpenType-SVG

为这样的字体文件创建 svgs 将需要更复杂的字体编辑器，或者至少需要更多的字体文件生成/编辑经验。

内嵌 SVG

直接使用 icon svgs 当然是最简单的方法。

您可以实现类似字体的行为，例如：

<defs>
```
 或 
```
<symbol>
将多个图标组合在一个 svg 中

示例：内联 svg 图标

let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
  iconInserts.forEach(function (iconSpan) {
    let iconName = iconSpan.getAttribute("data-icon");
    let symbolHref = "#" + iconName;
    let iconDef = iconDefs.querySelector(symbolHref);
    let viewBox = iconDef.getAttribute("viewBox");
    // insert
    let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    iconSVG.classList.add("svg-inline");
    iconSVG.setAttribute("viewBox", viewBox);
    let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
    iconSVG.appendChild(iconUse);
    iconSpan.appendChild(iconSVG);
    iconUse.setAttribute("href", symbolHref);
    iconUse.classList.add(iconName);
  });
}

body{
  font-size:15vmin;
}
.svg-inline{
  display:inline-block;
  height:1em;
  transform:translateY(20%);
}

.theme1{
  --col1:green;
  --col2:pink;
  --col3:purple;
  --col4:orange;
  --col5:lime;
  --col6:cyan;
  --col7:#444;
}

.theme2{
  --col1:green;
  --col2:green;
  --col3:green;
  --col4:orange;
  --col5:orange;
  --col6:orange;
  --col7:green;
}

.icon-news{
  --col1:green;
  --col2:pink;
  --col3:purple;
  --col4:orange;
  --col5:lime;
  --col6:cyan;
  --col7:#444;
}

<p>
  <svg class="svg-inline theme1" viewBox="0 0 1000 1000">
    <use href="#icon-news" />
  </svg>
Sample icon (colored by css vars)
  <svg class="svg-inline theme2" viewBox="0 0 1000 1000">
    <use href="#icon-news" />
  </svg>
Sample icon 2 (colored by css vars)
  <svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
    <use href="#icon-news2" />
  </svg>
Sample icon 3 (colored by currentColor)
  <span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)

</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
  <symbol id="icon-news" viewBox="0 0 1000 1000">
    <path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
    <path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
    <path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
    <path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
    <path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
    <path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
    <path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
  </symbol>

  <symbol id="icon-news2" viewBox="0 0 1000 1000">
    <path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
    <path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
  </symbol>
</svg>

您还可以编写一个简单的图标插入脚本，通过 svg 实例注入占位符范围元素（4.示例）

<span class="icon-insert" data-icon="icon-news"></span>

可以用这样的东西代替：

<span class="icon-insert" data-icon="icon-news">
   <svg class="svg-inline" viewBox="0 0 1000 1000">
      <use href="#icon-news" class="icon-news" />
    </svg>
</span>

一些图标库还提供类似的基于js的注入方法（例如

羽毛图标）

另请参阅：css-tricks：

内联 SVG 与图标字体 [CAGEMATCH]

Answer 2

如果我理解正确的话，你正在努力为 svgs 着色。

svg 代码可以包含填充元素（

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle 供参考）。

此外，您可以尝试使用CSS（颜色属性）来更改颜色。

带有多色SVG图标的图标字体

问题描述投票：0回答：2

2个回答

“多层方法”

最新问题

带有多色SVG图标的图标字体

问题描述 投票：0回答：2

2个回答

“多层方法”

最新问题

问题描述投票：0回答：2