Any troubles adding icons in React App using Vite?

Recently I crated React App and added icons (ffc blog). App is deployed, working and everything is great.
Then I started to use/experiment with Vite. And I noticed that adding icons come with some troubles and cannot render icons in my project.
I found some solutions but as beginner did not fully understand it. On vite-react readme file I see that was published 2yrs ago and by snyk that is not maintained.

Any suggestion how to solve this or how did you solve this?

What do you mean by not rendering? Is there an error, or do they just silently fail? If you open the inspector in the browser tools, are the icon elements missing, or empty? What’s the setup here?

If possible, can you put up a simple version that shows the issue – if you look at the Vite docs under “getting started” they’ve got links to Stackblitz, where there are basic projects set up and linked. If you add react-icons to one of those, do you get the same result (no icons) & if so can you share that here?

1 Like

Here is stckblitz

It is for another learning project so I don’t need more then few icons.
I tried to - Import SVGs Using the Vite Plugin for SVGR - (No.6.), but looks like I messed up something because picture doesn’t show up.

I managed to import icon, downloaded from icones and drag/drop in assets folder, and was ready to use as component.

Now it works, but was painful to figure it out.
I would like to have library with icons on disposal to use like in react-icons. Is it possible?

Yes, missing, empty and not showing. Sorry, I was too long in front of it so can’t precisely say which is from those three. Now it’s OK, and I wonder how it will go tomorrow when I try to apply it in project :sweat_smile:

Considering that package has 20 downloads a week and only 2 GitHub stars I wouldn’t use it. Why not use the package it was created from?

That or any React icon component library (search) should work.

1 Like

I just started to play with and learn React so it can be difficult to find out what is work best for me. Most of it is trial and error, and I’m getting it slowly.
I found that unplug-icons repo you posted, that is next one I will try to learn how to implement in project.
Thank you both for response :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.