ReactJs : Any idea on how to improve this code

#react #fontawsome #javascript

Hi all !

I'm learning ReactJs and i'm working on a simple component for my website, I want to display icons from font-awsome, i did something like this :

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faJs, faHtml5, faCss3Alt} from '@fortawesome/free-brands-svg-icons'

function IconTech (props) {

    return (
        <div className="square">
            {props.icon === "faJs" &&
                <FontAwesomeIcon icon={faJs} className={"icon " + props.color} size="5x" />
            }
            {props.icon === "faHtml5" &&
                <FontAwesomeIcon icon={faHtml5} className={"icon " + props.color} size="5x" />
            }
            {props.icon === "faCss3Alt" &&
                <FontAwesomeIcon icon={faCss3Alt} className={"icon " + props.color} size="5x" />
            }
            <div className={props.color}>{props.title}</div>
        </div>
    );
}


export default IconTech;

My first attempt was this, but it wasn't working :

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faJs, faHtml5, faCss3Alt} from '@fortawesome/free-brands-svg-icons'

function IconTech (props) {

    return (
        <div className="square">
        <FontAwesomeIcon icon={props.icon} className={"icon " + props.color} size="5x" />
            <div className={props.color}>{props.title}</div>
        </div>
    );
}

export default IconTech;

Any suggestions ?

Thanks !

Top comments (9)

Marian • Oct 27 '20

I usually import the package with npm "@fortawesome/fontawesome-free": "^5.14.0" and at the top of my files import "@fortawesome/fontawesome-free/css/all.css"

Then I use the Html they provide in my components.
I just use <i className="fab fa-js"></i> instead of <i class="fab fa-js"></i>. You can add additional classes to change font color, font size etc.

I can't get it to work in CodeSandbox right now, because I have never used it before :) Might try again tonight, if you still need help.

Pierre • Oct 27 '20

Thanks, good idea !

Do you know if the method i use to import FA icons only include the CSS i asked for in the build, or does it import everything in all.css ?

Marian • Oct 27 '20

I think it imports everything.
When I go to my app and check "Sources" in the Developer Tools in Chrome, I find an 'all.css' file with all the font awesome icons, roughly 4.500 lines.

BryceAMcDaniel • Oct 27 '20 • Edited

Here's one quick way you can try.

This works because it creates an object with key's corresponding to the Object, which you can select with the string passed into props.

It may not be the most efficient, I'm sure others will be able to suggest a more efficient way, but it should work.

codesandbox.io/s/silly-fast-bl7jc?...

Pierre • Oct 27 '20

That's already much better ! Thanks :)

Prateek Karki • Oct 27 '20

I would highly suggest using 'react-icons' package for this. It's much easier to integrate, supports icons from all other icon repositories and you can only import what you require.