import icons dynamically react fontawesome

Question

I am using FontawesomeIcon in a react js project and the names of the icons are coming from the database. I want to import the icons coming from the database from @fortawesome/free-solid-svg-icons dynamically

import React, { Component } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import {faImage} from "@fortawesome/free-solid-svg-icons"; export class Features extends Component { render() { return ( <div id="features" className="text-center"> <div className="container-fluid"> <div className="features-listing"> {this.props.data.map((item, index) => ( <div key={`${index}`}> {" "} <FontAwesomeIcon icon={item.icon} /> <h3>{item.title}</h3> </div> ))} </div> </div> </div> ); } } export default Features;

Ander · Accepted Answer · 2021-05-28 05:08:44Z

There is actually a better way without having to iterate all icons (@Andrei Rosu's solution), you can export the whole brand and solid packages:

import { library } from '@fortawesome/fontawesome-svg-core' import { fab } from '@fortawesome/free-brands-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons' // This exports the whole icon packs for Brand and Solid. library.add(fab, fas)

and to use them:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' <FontAwesomeIcon icon={['fab', 'apple']} /> // any icon from Brand. <FontAwesomeIcon icon={['fas', 'coffee']} /> // any icon from Solid.

This could increase your bundle size considerably if only a small subset of the available icons are used

Andrei Rosu · Accepted Answer · 2021-01-13 08:40:19Z

14

In App.js, you can import all the icons, as seen in this post, like this:

import {library} from '@fortawesome/fontawesome-svg-core'; import * as Icons from '@fortawesome/free-solid-svg-icons'; const iconList = Object.keys(Icons) .filter((key) => key !== 'fas' && key !== 'prefix') .map((icon) => Icons[icon]); library.add(...iconList);

Then, inside components, only import the FontAwesomeIcon and use them:

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; <FontAwesomeIcon icon="times" />

edited Jan 13, 2021 at 8:40

answered Jan 12, 2021 at 9:49

Andrei Rosu

1,4452 gold badges13 silver badges30 bronze badges

5 Comments

Ammar Ismaeel Over a year ago

Thank you for your answer, The icons names I want to use are unknown, they are coming from a request to the database, so this way will not work

Andrei Rosu Over a year ago

@AmmarIsmaeel Please check my edited post on how you can import all those icons

Ammar Ismaeel Over a year ago

Thx, It worked, though I did not like the idea of importing all icons, it seems its the only solution

Andrei Rosu Over a year ago

@AmmarIsmaeel It would be more problematic to import them one by one dynamically, because the process is asynchronous. It shouldn't be a problem if you import them all at the beginning.

like2think Over a year ago

I believe there are +26k icons. It's doubtful your database is referencing all of them. So maybe query the unique list of icon name, and create a subset or a kit. This should dramatically scale back the icon load.

Jaime Masson · Accepted Answer · 2022-10-02 06:14:44Z

this can be done without importing all icons using react's dynamic imports. just replace the import string with whatever dynamic variable you need.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import React from 'react' function example(){ const Icon = React.lazy(() => import('@fortawesome/free-solid-svg-icons/faEnvelope').then(({definition}) => ({default: () => <FontAwesomeIcon icon={definition} />}))); return <React.Suspense><Icon /></React.Suspense>; }

Konstantinos Gallis · Accepted Answer · 2022-12-23 13:08:38Z

I don't see any need to import all icons. You can import some icons in your app.js like:

import {library} from '@fortawesome/fontawesome-svg-core'; import { faAngleRight, faArrowRight ... } from '@fortawesome/pro-light-svg-icons'; library.add(faAngleRight, faArrowRight, ...)

Then use it like:

<FontAwesomeIcon icon="fal fa-angle-right" />

or for dynamic use to any component (like button with icon) as prop:

<FontAwesomeIcon icon={icon} />

Shankar Ganesh Jayaraman · Accepted Answer · 2020-12-22 08:28:33Z

-1

Just simply add the Fontawesome CDN to your HTML Header and use any icon you want,

it would be something like this in react:

 <i className={object.ico}><i/>

Object.ico should be a string containing the icon name like far fa-xyz

edited Dec 22, 2020 at 8:28

Shankar Ganesh Jayaraman

1,5011 gold badge16 silver badges26 bronze badges

answered Dec 22, 2020 at 6:09

Mahdi Rafiei

332 silver badges6 bronze badges

1 Comment

Ammar Ismaeel Over a year ago

But I want to use the @fortawesome/react-fontawesome package, I do not want to use any cdn and place it in the html, Its better to have packages in your project

Collectives™ on Stack Overflow

import icons dynamically react fontawesome

5 Answers 5

1 Comment

5 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

Comments

Comments

1 Comment

Linked

Related