Feature Request: Custom Icon API

[JacobDB]

Sometimes my designers don't use Font Awesome and I'm stuck either substituting what they've got with Font Awesome icons or integrating their custom icons in addition to Font Awesome. It'd be nice to be able to specify a JSON path or something that contained custom icon definitions. Something like:

{
    "icon-name": {
        "light": "<svg-data>",
        "regular": "<svg-data>",
        "solid": "<svg-data>",
    }
}

[shaedrich]

Instead of a JSON, there could be a function for adding a javascript object or array of objects.

[Fensterbank]

Hi there,

technically you are able to add custom icon definitions by using the library.

fontawesome.library.add({
    faMyCustomIcon: {
        iconName: 'my-custom-icon',
        prefix: 'fac',
        icon: [
            480, // viewBox width
            ​​​512, // viewBox height
            ​​​[], // ligatures
            'f269', // unicode codepoint - private use area            
            ​​​'M478.1 235.3c-.7-4.5-1.4-7.1-1.4-...-.6-14.5-1.9-21.6z', // path
        ]
    }
})

see also here.

But in most cases people have nice svg files and unfortunateley there is no way to add new icons based on the svg data, so we yet have to create this array by hand (which is then used to create an svg tag).
Would be cool, if we could just set the svg data as string as value of the icon prop like @JacobDB proposed.

Another problem is, that this array only supports one path, but my svg files have multiple paths.
So even if I build these arrays for my few icons manually, I can not use them since of the one-path-policy.

Does anybody found a solution to this?
There must be an easier way to add custom svg icons to FontAwesome 5?

[shaedrich]

Maybe you could concat the d attribute of the paths to one path.

[JacobDB]

@Fensterbank can that be done even if I'm including the FontAwesome scripts the old fashioned way (i.e. not importing them with NPM)? Last time I tried using fontawesome.add I got an error ReferenceError: fontawesome is not defined. I haven't been serving FontAwesome via NPM because it complicates the install process for my other developers, since I'm using FontAwesome Pro.

[JacobDB]

Oh! Just figured out how to do this!

window.FontAwesome.library.add({
    faMyCustomIcon: {
        iconName: "custom-icon",
        prefix: "fac",
        icon: [
            260, // viewBox width
            260, // viewBox height
            [], // ligatures
            "f269", // unicode codepoint - private use area
            "M27.827, ..., 162.278Z", // path
        ]
    }
});

To use it:

<i class="fac fa-custom-icon"></i>.

This is great, going to be very useful going forward!

[rooby]

@Fensterbank
You can convert a multi-path SVG file to a single path using some image manipulation programs.
For example, the instructions here for GIMP worked for me: https://stackoverflow.com/a/43897155/1751497

I assume there are other programs that will do something similar too.

[rooby]

As far as I can tell, this doesn't work properly with Angular due to typescript typings for icon definitions. See #14199

[Fensterbank]

@shaedrich @rooby Thank you for your suggestions.
I can confirm that concatenating the d values worked perfectly.

[sgraham-merkle]

This package https://www.npmjs.com/package/oslllo-svg-fixer helped me to batch process number of SVGs from multi-path to single path by specifying src and dest and had accurate results.