CODEWITHSUNDEEP
reactjs
Salitha Indrajith Pathiraja
Salitha Indrajith Pathiraja

Reputation: 393

Some of icons in react-icon are giving import error

I installed react-icons and some icons like FaBeer, FaBed are working but many of them (FaPencil, FaFloppyO, FaCalendarTimesO) generate following error. ./src/Note.js Attempted import error: 'FaClose' is not exported from 'react-icons/fa'.

  1. Why I get this error?
  2. Is there a premium (or something) version of react-icons?

PS: This is ReactJS project and I have a fresh install of everything.

Upvotes: 1

Views: 3228

Answers (2)

Alvin S. Lee
Alvin S. Lee

Reputation: 5182

The version of FontAwesome Icons used in the current react-icon package is the 5.4.0 free version. Some of the icons you may be trying to access are not available in that version.

For example, FaPencil is part of FontAwesome's pro package (paid version). You can, however, try FaPencilAlt instead - that one is available and working.

floppy-o, I believe, is a very old icon which has now been replaced in the current version with FaSave, which is available in react-icons?

FaCalendarTimes is available as well, but not (any longer) calendar-times-o

The list of free FontAwesome icons should be helpful for you to know which icons are available to you in react-icons.

If you'd like to bypass using react-icons and would instead like to use FontAwesome icons directly in your react project, then I would recommend using the react-fontawesome package. This allows you to add in free icons or also the pro icons (if you have paid for FontAwesome's pro package, that is). It also includes some functionality for customizing your icons which is specific to FontAwesome - this is functionality you wouldn't get in react-icons, which is working to provide a general all-purpose package for various icon packages.

Upvotes: 2

Germa Vinsmoke
Germa Vinsmoke

Reputation: 3759

You're getting error because you're importing icons with wrong name. For pencil it is FaPencilAlt

Check their official website for more icons

import { FaBeer, FaPencilAlt, FaCalendarTimes } from "react-icons/fa";

Check this Codepen link for other icons

Upvotes: 2

Related Questions