0

I have an array with objects before, I applied icons from fontAwesome as a value, it looked like this

const SideBarColors = [
   {
        IconStyle: {
            Icon: faDotCircle,
        }
   }
]

Then in another component I got this icon like this

<FontAwesomeIcon icon={SideBarStyle.Icon} />

Now I use a different approach (React Icons), the point is that now I create icons in this way

<BsBraces />

In this case, I cannot assign this icon inside the object as a value, it gives an error

IconStyle: {
    IconTitle: <BsBraces />
}

What should I do in this case?

Synchro
  • 1,105
  • 3
  • 14
  • 44

2 Answers2

3

You just need to :

IconStyle: {
    IconTitle: BsBraces
}

without the </>

Apply it to JSX like:

<IconStyles.IconTitle />
Eldshe
  • 723
  • 6
  • 19
-1

Have you tried changing the file extension from .ts to .tsx? This will allow the JSX.Element (react icons) to be in the file.

Rokas
  • 1