Using an icon uploaded to a kit with fontawesome-react

Question

I have a React project that uses FontAwesome v6 via the react-fontawesome package. We have a pro licence.

From package.json

    "@fortawesome/fontawesome-pro": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/pro-regular-svg-icons": "^6.1.1",
    "@fortawesome/pro-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",

And then later we import icons like so:

import {
    faAlignCenter,
} from '@fortawesome/pro-solid-svg-icons';

Fairly simple stuff.

What I can't find a way to do is use custom icons uploaded to a kit on FA. All the instructions on how to use kits are assuming you're importing via a <script> tag, there's no mention anywhere I've been able to find of doing it via the react component. Is it even possible? It must be, right?

Answer 1

As a workaround I made a custom component that can accept either an IconDefinition (just as the FontAwesomeIcon component does) or a custom icon definition.

The component:

import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// Here I use the names of the icon's I've added on Fontawesome's website.
type CustomIconName = "my-icon-1" | "my-icon-2" | "my-icon-3";

// A type to indicate we'll be using a custom icon instead of a standard
// FontAwesome icon
type CustomIconDefinition = {
  prefix: "fa-kit";
  customIconName: CustomIconName;
};

// Union type so we can use this component both for standard icons and custom icons.
export type KitIconDefinition = IconDefinition | CustomIconDefinition;

type Props = {
  icon: KitIconDefinition;
};

export default function FontAwesomeKitIcon({ icon }: Props) {
  if (icon.prefix === "fa-kit") {
    return <i className={`fa-kit fa-${icon.customIconName}`} />;
  } else {
    return <FontAwesomeIcon icon={icon} />;
  }
}

And the usage is as follows:

I can either use a standard FontAwesome icon:

import { faStar } from "@fortawesome/pro-regular-svg-icons";
...
<FontAwesomeKitIcon icon={faStar}/>

Or I can use one of my custom icons:

const faMyIcon1= { prefix: "fa-kit", iconName: "my-icon-1" };
...
<FontAwesomeKitIcon icon={faMyIcon1} />

Or I can mix and match definitions using the same component to render them.

import { faStar, faBoat } from "@fortawesome/pro-regular-svg-icons";
import { myIcon1, myIcon2 } from "./myIconDefinitions";

const icons = [
  faStar,
  myIcon1,
  faBoat,
  myIcon2
];
...
icons.map(icon => <FontAwesomeKitIcon icon={icon} />)

Note that you still have to include the kit's script tag somewhere on the page though.

EDIT: I wrote a blog post which expands a bit on this answer.

Answer 2

It can't be done. I reached out to FA, this is what they said:

Right now, custom icons can only be used in pro kits and kits cannot be used in React. We are looking into supporting more ways to use kits in the future.