How to use uploaded fontawsome custom icons in react

Question

We are using fontawesome in our react app, so obviously we are doing it in the react way as says their docs here.

In our app , i'm importing these icons libraries :

import * as proSolidSvgIcons from "@fortawesome/pro-solid-svg-icons";
import * as proDuotoneSvgIcons from "@fortawesome/pro-duotone-svg-icons";
import * as sharpSolidSvgIcons from "@fortawesome/sharp-solid-svg-icons";
import * as proRegularSvgIcons from "@fortawesome/pro-regular-svg-icons";
import * as freeBrandsSvgIcons from "@fortawesome/free-brands-svg-icons";

And i'm collecting all these icons in a map fortawesomeIconsByName: {iconName : string => icon: IconProp} then i'm using them inside a FontAwesomeIcon components as the following :

<FontAwesomeIcon
  icon={fortawesomeIconsByName[iconName] as IconProp}
  key={index + "-" + icoIndex}
  title={iconName}
  className={"iconBtn btn-" + index}
  style={{ color: iconsColor }}
  onClick={() => {
   (...)
  }}
/>

In the other hand, we needed to upload our custom icons through our pro kit as indicated here. After the upload , now it's possible to use their tags in the html and get them displayed correctly :

<i className="fa-kit fa-ovh-icon"></i>
<i className="fa-kit fa-google-cloud-platform"></i>

But I need to find a way to add them to our icons set and use them in react in the same dynamic way we use other icons from @fortawesome libs. So I first tried this way but it didn't work. I used the same icon name as the one of the uploaded icon (screenshot). I got error messages saying that the icon wasn't resolved.

import { solid, regular, brands, icon } from "@fortawesome/fontawesome-svg-core/import.macro";
import { IconName } from "@fortawesome/fontawesome-svg-core";

const googleCloudPlatformSolidIcon = solid("google-cloud-platform");
const googleCloudPlatformRegularIcon = regular("google-cloud-platform");
const googleCloudPlatformBrandsIcon = brands("google-cloud-platform");

Then I found this answer which consist of defining the icon in our code but that's not what we wish do , we'd like to simply upload the icon and just import it to react (isn't that possible ?). I could add the svg itself in our code instead of defining the icon with a path. How could fontawsome not helping about this in a better way?

I also don't see how we can declare keywords for our custom uploaded icons. In our app we are using the fontawesome's graphql to search icons by a provided string which should be found in icons' keywords and we'd like that our custom icons will be taken into account when making that search.

How to use uploaded fontawsome custom icons in react

0 Answers0