How to make Icon Module in React Applications

A complete guide to construct an independent module for maitaining icons in a react project

January 24, 2017 - 3 minute read -

With the onset of react everything in a web application is modularised, from head to toe, efforts are being made to modularise CSS also so that it can become dynamic by using props and states. Icons are one of the most repeated parts of code in an web application and also the most vulnerable to changes.

Icon module should be designed such that the icon representing a particular entity in application can changed withing the snap of fingers in the entire application and if we want to change the entity to be displayed at any place that also can be done very quickly

Here is one of the many approaches to build an Icon module, this one I prefer the most because of the above reasons

  1. Icon Directory

    Choose an assets directory which has all the icon files and make sure that most of the icon files are svg because:

    • SVGs are vector based hence changing the size won’t be problem with the resolution.
    • The second reason seems to weird but I find it very useful since SVGs are readable by any normal text editor and also we can edit the lines written in it. Hence we can make small changes related to the default size and color of it and it can be recorded in GIT (or any other SCM tool). icons

  2. CSS/SCSS styling file

    Now comes a css/scss file which will define all the css classes related to icons being used in you application. The styling file should be such that it can accomodate any icon with the minimum amount of code. If you guys love to use SCSS then there is a very sweet example, use the below mentioned SCSS mixin.

     @mixin icon($icon-name) {
       &::before {
         content: url('../../../assets/icons/' + $icon-name);
       }
     }
    

    The full file will look like this icons


  3. React Icon Component/Javascript Files

    The main Icon react component which has all the components for different icons will connect one common html dom element to css classes containing their respective icons, the method to create icons can look like this

     const makeIcon = (cssClass) => <i className={cssClass}></i>;
    

    The javascript file will look like this icons

Now guys since we have figured out how to make an react module rendering icons the most important thing is to know the advantages of such a long and too many file creating method and how to take benefit out of it.

Now if you have closely observed the screen shot there is one constant example of message icon which represented by file message.svg. Just imagine a situation where you want to change the message icon to something like a paper icon or @ symbol for mail message you just have to change name of the svg file in .scss file and everything will come in line.

The second advantage will be if you have two icons set in your css one is of a pencil writing on paper and another one just one pencil icon. If in a current situation the ‘only pencil icon’ is representing any of the edit icons and now you want to switch it to ‘pencil with paper’ icon it could be done in a second and effect will be seen allover the application.

Following file structure of the module might give you a deeper insight

Project
|
|   ....
|
|______Icons
|      |
|      |______index.jsx
|      |
|      |______styles.scss/style.css
|
|   ....