How to Use FontAwesome Icons in React Applications
You may not realize it, but icons and logos are an essential part of modern applications. While building interfaces in React, developers can use many different toolkits and packages that contain icons. FontAwesome is one of the best options because it offers a wide variety of icons. The team behind FontAwesome also made an effort to integrate the icons into React ecosystem.
Using FontAwesome in React
Picking a FontAwesome Icon for React
Once you’ve determined what type of icons your application needs, you can search for related keywords on Font Awesome Icons page to find something suitable. The filters you see on the left side are essential for narrowing down your options. They can help you find what exactly you’re looking for, and more importantly, tell you which FontAwesome package you need to install.
To install regular icons, execute the following command in the command line:
npm install --save @fortawesome/free-regular-svg-icons
To explore all the different packages you can install, look over this guide.
Creating a Library
As your application grows, you’re going to need icons in many different files. Importing the same icons over and over can be exhausting. Instead, you can import every icon that you need in one JavaScript file, where you’ll create a FA library.
It is customary to store your icon libraries in the src
folder. The library should contain all the icons used throughout your React application. Once done, import the library in a parent component (usually App.js
) so that all children have access to it.
Here’s what a simple icon library would look like:
import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';
library.add(
faCoffee,
faCheckSquare,
);
Using <FontAwesomeIcon/>
The react-fontawesome
package includes a <FontAwesomeIcon />
custom component explicitly created to use FA icons in React applications. The separate component approach can give you performance gains and minimize the overall bundle size.
To use the <FontAwesomeIcon/>
component, you must install the react-fontawesome
package. You’re also going to need to import specific icons. For instance, if you’re going to use a Twitter logo, you would need to import the faTwitter
icon.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
class App extends Component {
render() {
return <FontAwesomeIcon icon={ faTwitter }/>
}
}
The icon
attribute is the most important, but other attributes can help you customize the icon.
The size
attribute accepts many different values - sm
for small, md
for medium, lg
for large, and xl
for extra-large. It also accepts numeric values, which can help you scale the icon relative to its standard size. You can use numeric values between 2x
and 6x
values to enlarge the icon accordingly. You can also use decimal values. You can also use inline styles to change the appearance of the <FontAwesomeIcon />
component.
Using className
If you’re developing a React application using the create-react-app
CLI, you can use the className
attribute to display icons. If you’re coming from other frameworks or languages, this is most likely how you’re used to using FontAwesome.
Don’t forget that in JSX syntax, you must use the className
attribute, much like regular DOM. This is necessary because the class
in JavaScript is a reserved word.
Once you’ve installed the font-awesome
library, you must import it into the index.js
file. The file must include:
import 'font-awesome/css/font-awesome.min.css';
Once you’ve imported the icon styles, you can use regular className
syntax in JSX:
render: function() {
return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn