Icons in react, a simple guide.
If you’ve been working with React, then you know all about importing and exporting components. A React app is essentially a collection of components that can be exported from their own file and imported into another file within the project you are working on. Components make it easy to design a feature to use and reuse where ever you want. There are also a variety of external libraries that can be installed and imported for convenient access. One such library is React Icons. Icons are symbols that can be used instead of text to represent different actions that the user of your app can perform.
The first step is to install the library. Head to the project directory in your terminal and run:
Once install is complete, head to: https://react-icons.github.io/react-icons and search for the type of icon you are looking for. Clicking directly on the icon you want will save it to your clipboard for easy pasting in your file.
Now we want to import the icon into our component. I chose to import the FaBars icon. The ‘fa’ in the name and at then end of your import file name represents the library of Font Awesome.
Now we can use our bars anywhere we want. Bars are inserted into our html the same way as any other component.
Now I know what you are probably thinking right now: Do I have to import an icon every time I want to use a different icon in a component???
The answer is no! You can import all of the icons within a given library with one import:
The * represents all and you can then name this import anything you choose after the ‘as’. Then simply pass down the variable into your component by name.
Now you can add as many icons as you like. This example is only for the Font Awesome library, and the import process would have to be repeated for a different library. There are too many libraries to choose from, have fun exploring!
