Can Custom Icons Be Added to font-awesome-react

Question

This issue on the react-font-awesome repo suggests that this is at least possible, but doesn't outline what would be needed to add a custom SVG icon.

React Font Awesome allows you to add icons from libraries, however only from their own libraries.

Is there any way to create a library of your own icons and add that?

Why do I want to do this? Because react-font-awesome has build a lot of useful functionality around its <FontAwesomeIcon /> component and I would like to be able to use this single component for all the icons in my app, regardless of whether they are Font Awesome icons or my own.

Note: I understand how to author SVG files, I'm interested in packaging them as a library that can be loaded into react-font-awesome.

Answer 1

I just came across this issue today and solved it by creating an icon definition without having to do library.add().

Example

Icons

For this example, I'm using two icons:

1. A native Font Awesome icon

   

2. A custom Outlook icon from Simple Icons

   

Steps

1. Create a file that contains the custom icon definition.

   simpleIconsMicrosoftOutlook.ts

   import {
     IconDefinition,
     IconName,
     IconPrefix
   } from "@fortawesome/fontawesome-svg-core";
   
   export const simpleIconsMicrosoftOutlook: IconDefinition = {
     icon: [
       // SVG viewbox width (in pixels)
       24,
   
       // SVG viewbox height (in pixels)
       24,
   
       // Aliases (not needed)
       [],
   
       // Unicode as hex value (not needed)
       "",
   
       // SVG path data
       "M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z"
     ],
     iconName: "simple-icons-microsoft-outlook" as IconName,
     prefix: "simple-icons" as IconPrefix
   };
   

2. Pass the custom icon as a prop to FontAwesomeIcon:

   App.tsx

   import { faFontAwesome } from "@fortawesome/free-solid-svg-icons";
   import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
   
   import { simpleIconsMicrosoftOutlook } from "./simpleIconsMicrosoftOutlook";
   
   import "./styles.css";
   
   const App = () => {
     return (
       <>
         <p>
           <FontAwesomeIcon icon={faFontAwesome} />
           Native icon from <b>Font Awesome</b>
         </p>
   
         <p>
           <FontAwesomeIcon icon={simpleIconsMicrosoftOutlook} />
           Custom icon from <b>Simple Icons</b>
         </p>
       </>
     );
   };
   
   export default App;
   

3. Also, the css for reference:

   styles.css

   body {
     font-family: sans-serif;
     font-size: 1.5rem;
   }
   
   svg {
     margin-right: 0.5rem;
   }
   
   svg.fa-font-awesome[data-prefix="fas"] {
     color: crimson;
   }
   
   svg.fa-simple-icons-microsoft-outlook[data-prefix="simple-icons"] {
     /*
     * Outlook cyan.
     * See brand color at https://simpleicons.org/?q=outlook
     */
     color: #0078d4;
   }
   

4. Result: