Importing Font Awesome icons that have a dash ("-") in their name

Issue

I am using React.js to make a portfolio website. I decided to go with Font Awesome icons since I love the look of them. However when I go to import any icon that has that dash in the name, I can’t figure out how to import it. Here’s my code so far (for importing):

import "font-awesome/css/font-awesome.min.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// All these are single name icons
import {faPython} from "@fortawesome/free-brands-svg-icons/faPython";
import {faJs} from "@fortawesome/free-brands-svg-icons/faJs";
import {faReact} from "@fortawesome/free-brands-svg-icons/faReact";
import {faCuttlefish} from "@fortawesome/free-brands-svg-icons/faCuttlefish";

// This one is named "rectangle-code"
import {faRectangleCode} from "@fortawesome/free-solid-svg-icons/faRectangleCode";

I get this error:
portfolio importing error

I can’t import it using dashes in the name, so how do I import this icon without any errors?

EDIT: Click here to view the icon on Font Awesome’s website

Solution

Here’s the problem!

enter image description here

You’re attempting to use a pro icon – it doesn’t exist in the free icon packs.

(Edit: for future reference, a good way to debug import problems like this is to cd inside the @fortawesome directory in your terminal, and then use something like https://github.com/junegunn/fzf to look for the file you’re looking for. That’s what I did before realizing the icon doesn’t exist in the free version.)

Answered By – mitchazj

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.