可以在 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

According to the README you can add other icon packages by using library.add()

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

So if you format your own icon package in the same way as in for example free-brands-svg-icons , your should be able to add it.

Answer 2

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: