Learn how to use SVG icons right inside of your React app. We’ll first walk through installing the React Icons package to instantly get access to a bunch of popular icon libraries like Font Awesome. We’ll then learn how to create a new React component from scratch with raw SVG code.
Icons are a way to visually communicate concepts and meaning without the use of words. This could be for categorization, an action, or even a warning.
How can we add icons using SVG to our React apps to improve our visual communication?
- What is SVG?
- What makes SVG great for the web?
- Part 0: Creating a React app
- Part 1: Adding SVG icons with react-icons
- Part 2: Manually adding SVG files to a React component
What is SVG?
SVG stands for Scalable Vector Graphics. It’s a file format based on a markup language similar to XML that allows developers and designers to create vector-based images using path definitions.
What makes SVG great for the web?
SVG was born for the web. It’s an open standard that was created by W3C to provide a better way to add images to the web. If you open an SVG file on your computer, you might be surprised to find that it’s all code!
This plays a part in the small file size. Typically when using SVG, you can take advantage of its smaller size compared to larger image files that might be required to deliver the same high resolution.
Additionally, since we’re defining SVG as paths, they can scale as large or as small as we want. This makes them extra flexible for web usage, especially when making experiences responsive.
What are we going to create?
We’re first going to walk through using a package called react-icons that will allow us to easily import icons from popular icon sets like Font Awesome right into our app.
We’ll also take a look at how we can manually add SVG files right into our app by copying the code of an SVG file right into a new component.
Part 0: Creating a React app
For this walkthrough, you can use any React framework you’d like whether that’s Create React App or Next.js. You can even use an existing project.
Because we don’t need anything special to add our icons, I’m going to use create-react-app.
To get started with create-react-app, you can create a new project using the following command in your terminal:
yarn create react-app [project-name]
## or
npx create-react-app [project-name]
Note: replace _[project-name]_ with the name you want to use for your project. I’m going to use _my-svg-icons_.
Once you have your new app or your existing app, we should be ready to go!
New Create React App
Part 1: Adding SVG icons with react-icons
Adding react-icons to your project
To get started with react-icons, we want to install it in our project.
Inside of your project, run the following command:
yarn add react-icons
## or
npm install react-icons --save
Once it’s completed, we should be ready to use it in our project.
Selecting icons for a project
One of the cool things about react-icons is the extensive library they make available within the single package.
Not only do we have Font Awesome immediately available, we have GitHub’s Octicons, Heroicons, Material Design Icons, and a whole bunch more.
react-icons Heroicons
When choosing icons, you pretty much have the ability to use any icon you want at any time. That said, I would recommend trying to keep a consistent look and feel with your icons.
If you primarily use Font Awesome for your website, it might look a bit strange and inconsistent if you were to start adding Flat Color Icons to the mix. You ultimately want to provide an experience that people will be able to easily identify
the patterns that you create.
🗒️ Original Post: https://www.freecodecamp.org/news/how-to-use-svg-icons-in-react-with-react-icons-and-font-awesome/
#react #javascript #web-development #programming #developer
