However, I do not like the idea of every time that I add a new icon, I have to come into the app component. This is the critical component of our entire application, without it, nothing works. And that's really a bad place to say that I would like to have a spinner icon.

So I think that we can do better than this, and that's what this guide is gonna be about. We're gonna clean up this app component from the perspective of organizing all of these icons. And we're gonna learn a pretty critical skill along the way, we're gonna learn how we can create our own helper modules.

Now, this is not related to React whatsoever, this is pure JavaScript. We are going to create a function, and we're going to have that function run, and we're going to call it and have it render out all of the same functionality that we have right here, but we are going to be able to organize it into its own dedicated code file.

So let's walk through this process. I'm going to create a new directory, so let's close out our components directory. We're in the src directory, and I'm gonna create a new folder here, called helpers. So this is gonna be where we can put any type of functions or anything that maybe isn't React related.

Maybe it's just a special JavaScript function that returns a value, and that's exactly what we're gonna be doing with our icons. Now, the convention for creating helper files is to just create the file, have it all be in a lowercase name, and say icon, or icons.js. And now inside of here, this is where we can bring in all of that icon code.

icon.js

import {
  faTrash,
  faSignOutAlt,
  faEdit,
  faSpinner,
  faPlusCircle
} from "@fortawesome/free-solid-svg-icons";

So open up the app file, and let's grab our import statement for all of our font awesome icons, and then let's also grab the library, and put that here, and now what I wanna do, is I want to wrap the library call. This import statement we can treat like a normal import statement, just like any other code library. And now I'm going to take our library, and I'm gonna say const Icons, and I'm gonna use this as a uppercase function.

And it's just gonna be a normal arrow function, and inside of here, I'm going to return the library. So at the very front of where it says library, I'm just gonna say return this library and then close off the function, and hit save. Let's make sure that we have all of the correct values here, so I'm having const Icons, and oh, and let's see, yeah, so I'm returning the correct values, yes. I believe that I have everything that I need there.

icons.js

const Icons = () => {
  return library.add(faTrash, faSignOutAlt, faEdit, faSpinner, faPlusCircle);
};

Now let's just export this, so I'll say export default, and this is gonna be default Icons.

icons.js

export default Icons;

So now that we have all of this, the process that should be able to take place is I should be able to call my icons here, and call it like a normal function. It will run this library, it will add in all of the other icons, and it'll work exactly like before. So let's test this out.

I'm going to now import icons from, and I have to jump back a directory, so I'll say two dots /helpers/icons, and then hit save.

app.js

import Icons from "../helpers/icons";

And now inside of our constructor, I can call that function. So here I can call our Icons function, hit save, and let's go test this out and make sure that it's working. Nope, and it looks like it's not. We have a little bit of an error, let's see what is going on with this. It says library is not defined,

Oh, and you know what, I forgot to import something. So let's come up here, and you notice here on line four, where it says library? Let's get rid of that, and make sure we add that, and import it inside of our Icons function.

icons.js

import {
  faTrash,
  faSignOutAlt,
  faEdit,
  faSpinner,
  faPlusCircle
} from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";

Hit save on both files, now let's see if it's working. There we go, everything is working. You can see that we have each one of the icons that we are using throughout the site. They're being called properly, our spinner little loading icon is working, so everything that we already had in place is there, but now we have a much better code organization process.

Anytime you want to add a new icon, you do not have to go through the giant application file. You can simply come to the dedicated helper file for icons. You add your import for the icon you're wanting, add it to the library, and you're done. Everything else from that point is going to work. They're all gonna be imported exactly the way that you need in each one of your components, and this is a lot better from a code organization perspective.

But even beyond that, hopefully you can see, and what one of my big goals with this guide was showing you, that there is not a lot of magic that goes on with React. It's part of the reason why React is so popular, is because you can configure it however you need to for your applications requirements.

So for this example right here, all we did, we created a file. This is not related to the way React is structured or anything. We created a plain old JavaScript file. We performed our imports in it. We had a function run in this function, yeah it brought in the library, but we could've had it do anything. We could've had it call an API, we could've had it do anything that we needed it to do. And then from there, we called it from another file.

So in a sense, we created our own little library, just like we've been working with other libraries throughout this entire course, we've created our own custom one that manages the icons on the site. So hopefully whenever you're building out your own applications, if you run into a situation like this where you feel like you're adding a lot of functionality to a component and the file's getting really long, definitely try to do something like this. Try to abstract out one of those features into its own helper file, into its own component.

Call it from that other file, so that you can have a cleaner code base, and also learn the way that JavaScript works even a little bit more.

Resources

• Source code