What is the way to import only certain icons?

[dionsnoeijen]

This is all I can find: import feather from "feather-icons";.

It helps me to use feather.replace() in this class. But I don't want to load the whole set of icons in my js file. Can I only have the icons imported that I'm actually using?

Thanks!

[pizaranha]

Hi @dionsnoeijen, there is an approach you could consider to solve your need. If you use Icomoon (https://icomoon.io/app/#/select/library) you will see that Feather icons are included in their icon library. You select it and then Icomoon allows you to select which icons will be included in the final generated webfont.

The way I see it, it's a really good way to keep webfonts light and even to include custom icons. I hope this helps.

[Valexr]

https://github.com/feathericons/feather#feathericonsnametosvgattrs

[dionsnoeijen]

Thanks! I will try!

[dionsnoeijen]

@Valexr As soon as I import feather, all icons are imported into js. Am I missing something obvious here?

[Valexr]

Yep, it's not modularity... & bundled all icons in one Object...🤔

[pizaranha]

@Valexr As soon as I import feather, all icons are imported into js. Am I missing something obvious here?

Well, be sure to select only those you will use. I am talking about Icomoon app. When you touch each icon you can toggle the selection.

[Valexr]

One more alt way:

<img src=https://unpkg.com/[email protected]/dist/icons/activity.svg />

<!- or ->

<img src= https://cdn.jsdelivr.net/npm/[email protected]/dist/icons/activity.svg />

[Valexr]

& I make this file: https://gist.github.com/Valexr/6ed010b646470425d896726981c6fae1 Maybe it will be useful

[ajitzero]

I had opened an issue for this last January: #1028

In short, no, the current implementation does not support adding specific icons only in any way.