Show used icons to not mix all types of icons

[unpseudocomplique]

Clear and concise description of the problem

While using unplugin icons it's great since we can use a lot of different icons for differents usecase.
But with this benefit come with a price of risking to use too much different icons / set of icon and affect the overall experience.

For exemple arrow or lock could be used in our app and there is like 100 variant that we can use.
It's realy hard to found what we already used in our app.

Suggested solution

I was thinking of 2 solutions:

• Add a tab in vscode to have the project USED icons
• New tab on vite (vue) devtool that show as well used icons

Alternative

search in the whole code base with ctrl + shift + f what icons are used, but it can be hard since for exemple i have a lot of keyword in the app with lock (233 for exemple ^^')

Additional context

We are rebuilding an app to vue and there is like 1/3 that is done and i have like 500 imported icons where there should be a lot of icons that are not the same.

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[userquin]

IIRC we don't have VSCode extension, maybe you can try installing Iconify IntelliSense (not sure if it will work).

Integrating a viewer for used icons in vue dev tools looks a good idea to me, I'll try to find some free time and play with it (I don't promise anything, too busy).

You can use UnoCSS Preset Icons instead this package (will move all the icons to your css): Iconify IntelliSense works.

You can use icones to browse collections and icons:

or iconify icon-set:

[AlexRMU]

• import everything in one file
• place similar icons next to each other
• look at them with https://marketplace.visualstudio.com/items?itemName=antfu.iconify
• create a page where all the icons will be displayed with a description of where, when and how to use them