Custom SVG Definition for @fortawesome/react-fontawesome

README.md

Usage

Wherever you are initialising the FontAwesome library:

import { library } from '@fortawesome/fontawesome-svg-core';
import faTheName from 'custom-icon';

...

library.add(faTheName);

Wherever you are using the icon:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

...

<FontAwesomeIcon icon="the-name" />

Extra Notes

The following may help with the custom icon presenting better when used with other FA icons. After performing any of these things, re-export to get the SVG path to update your definition.

Remove extra whitespace

If the SVG turns out too small despite the correct dimensions being set, might have whitespace.

Use Inkscape to scale the contents to the max width of the canvas.

Note: This may create a transform attribute. See Remove transform attribute to get rid of it.

Vertically centre the SVG

Use Inkscape.

Select the contents. Under Object -> Align and Distribute, select Relative to Page and vertically centre the content.

Remove transform attribute

If there is a transform attribute, pick up the Apply Transforms plugin and install it.

Select the contents. Click on Extensions -> Modify Path -> Apply Transforms.

Full instructions here: http://blog.greggant.com/posts/2018/10/03/inkscape-extensions-on-mac-remove-transforms-in-svg.html

custom-icon.js

const prefix = 'fas';
// Convention appears to be lowercase with hyphen-separated words
const iconName = 'custom-icon'; // CHANGE
// Set width and height to the dimensions in the original SVG
const width = 512; // CHANGE
const height = 512; // CHANGE
const ligatures = [];
// If unsure, look up an icon you're not going to be using on https://fontawesome.com/icons/
// and use the unicode value from there
const unicode = 'THE UNICODE'; // CHANGE
const svgPathData = 'THE SVG PATH; // CHANGE

const definition = {
  prefix: prefix,
  iconName: iconName,
  icon: [width, height, ligatures, unicode, svgPathData]
};

export { prefix, iconName, width, height, ligatures, unicode, svgPathData };

export default definition;