How to create custom Font Awesome 5 SVG definition?

问题

I want to add a new custom SVG icon to Fontawesome 5 and assume that I need to create a definition for it in the JavaScript file.

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"],

In the example code for "address-book" what do each of the items represent?

448=Width?
512=Height?
[]=?
f2b9=?
Last item=SVG Path?

回答1:

The whole object you would feed to fontawesome.library.add(…iconDefinitions) actually looks like this:

{
  "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
  ]
}

I can't point out documentation to support the interpretation, but in the source code fields are used accordingly.

The symbol viewBox is always rendered as "0 0 <width> <height>", so no x/y offsets are possible.

I haven't found any js code actually rendering ligatures, or icons defining them, so I am not sure what the content of that array would be. As they would be used for a search order, probably its meant to take a list of iconNames or codepoints. If this is related to the desktop ligature support, it is moot outside DTP applications and having the .otf files installed, anyway.

Unicode codepoints are used for the CSS Pseudo-elements method. and should be unique. All fontawesome codepoints seem to be above U+F000, so the range U+E000…U+EFFF looks to be good for custom entries.

来源：https://stackoverflow.com/questions/48994506/how-to-create-custom-font-awesome-5-svg-definition

标签

svg

font-awesome