svg - 如何创建自定义 Font Awesome 5 SVG 定义？

Question

我想向 Fontawesome 5 添加一个新的自定义 SVG 图标，并假设我需要在 JavaScript 文件中为其创建一个定义。

var icons = {
"address-book": [448, 512, [], "f2b9", "M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-228-32c44.183 0 80 35.817 80 80s-35.817 80-80 80-80-35.817-80-80 35.817-80 80-80zm128 232c0 13.255-10.745 24-24 24H104c-13.255 0-24-10.745-24-24v-18.523c0-22.026 14.99-41.225 36.358-46.567l35.657-8.914c29.101 20.932 74.509 26.945 111.97 0l35.657 8.914C321.01 300.252 336 319.452 336 341.477V360z"],

在“地址簿”的示例代码中，每个项目代表什么？

448=宽度？

512=高度？

[]=?

f2b9=?

最后一项=SVG 路径？

Answer 1

您将提供给 fontawesome.library.add(…iconDefinitions) 的整个对象实际上看起来像这样:

{
  "prefix": "fa",  // probably better to use a custom one
  "iconName": "user",
  "icon": [
    512,          // viewBox width
    512,          // viewBox height
    [],           // ligatures
    "f007",       // unicode codepoint - private use area
    "M962…-112z"  // path
  ]
}

我无法指出支持解释的文档，但在 source code 中使用字段 accordingly .

符号 viewBox 始终呈现为 "0 0 <width> <height>" ，所以不可能有 x/y 偏移。

我还没有找到任何实际渲染连字或定义它们的图标的 js 代码，所以我不确定该数组的内容是什么。因为它们将用于 search order , 可能它的意思是获取 iconNames 的列表或代码点。如果这与 desktop ligature support有关，无论如何，它在 DTP 应用程序和安装 .otf 文件之外没有实际意义。

Unicode 代码点用于 CSS Pseudo-elements方法。并且应该是独一无二的。所有字体很棒的代码点似乎都在 U+F000 以上，所以范围 U+E000…U+EFFF 看起来适合自定义条目。