loading...

ReactJs : Any idea on how to improve this code

pierreatwork profile image Pierre ・1 min read

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Any suggestions ?

Thanks !

Discussion

pic
Editor guide
Collapse
isarisariver profile image
Marian Beck

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.

Collapse
pierreatwork profile image
Pierre Author

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 ?

Collapse
isarisariver profile image
Marian Beck

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.

Collapse
bryceamcdaniel profile image
BryceAMcDaniel

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?...

Collapse
pierreatwork profile image
Pierre Author

That's already much better ! Thanks :)

Collapse
prateekkarki profile image
Prateek Karki

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.

Collapse
pierreatwork profile image
Pierre Author

Thanks i'll have a look a it !

Collapse
rexgalilae profile image
RexGalilae

Why is this a blog post on dev.to instead of a question on stack overflow? Lol

Collapse
pierreatwork profile image
Pierre Author

Why not ?
Here are the first lines on the dev.to about page.

About DEV
DEV is a community of software developers getting together to help one another out.

I think my post fits in perfectly.

Thanks !