CODEWITHSUNDEEP
reactjsfont-awesomefont-awesome-5
dmikester1
dmikester1

Reputation: 1362

React-fontawesome - icon says class is 'fa fa-undefined fa-2x'

I'm trying to use the window-close icon in my react app. https://fontawesome.com/icons/window-close?style=regular

It's not showing up and the class list says: fa fa-undefined fa-2x so something must not be working right.

My component is pretty small so it's not a lot of code. Details component:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { faWindowClose } from '@fortawesome/free-regular-svg-icons';

const Details = (props) => {
    const className =
        'col details-col' + (props.showDetails ? '' : ' d-none');

    return (
        <div className={className}>
            <FontAwesome icon={faWindowClose} size={'2x'} />
            <h3 className={'text-center title details-title'}>
                Order Details
            </h3>
            <h4>{props.activeOrder.title}</h4>
        </div>
    );
};

export default Details;

Here is the full rendered HTML:

<span icon="[object Object]" aria-hidden="true" class="fa fa-undefined fa-2x"></span>

Upvotes: 1

Views: 1040

Answers (1)

dmikester1
dmikester1

Reputation: 1362

I guess I was importing the wrong fontawesome library. I removed import FontAwesome from 'react-fontawesome'; from my imports. I added import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; to my imports after installing it and it worked beautifully!

As requested by brooksrelyt, I followed the excellent tutorial here: https://scotch.io/tutorials/using-font-awesome-5-with-react

Upvotes: 1

Related Questions