unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

Home Page:https://www.npmjs.com/package/unplugin-icons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Whether to support the function of viewing the icons list

Hongbusi opened this issue · comments

unplugin-icons looks cool.

I want to use custom icons in my project, but it seems that viewing the icon list is not supported, so that the management and use of icons is inconvenient.

Thank you.

I think what @Hongbusi means is that @iconify provides a bunch of json files that list the icon names.

We can use these json files in our CMS or Apps to provide things like a select dropdown that lists all the icon names for the user to select.

The problem with @iconify at the moment is that there is this problem when importing those json files: iconify/iconify#204

I'm hoping that if i move to unplugin-icons I can avoid that problem while still getting a list of icons to list and then render:

<select onChange={({ target: { value }}) => saveIconChoice(value)}>
  {Object.entries(icons)
    .map(([id, icon]) => 
      <option value={id}>{MagicallyDisplayIcon(icon)}</option>
    )}
</select>

then later on:

function MagicallyAwesomeThingThatUsesIcons({ savedIconId }) {
  return <Icon icon={savedIconId} />
}

@airtonix @Hongbusi check #186 (comment), you can use a simple composable/function to do this, the example is to render any icon in the collection, use it with caution