Option to use all icons if location is provided

[ineshbose]

Thanks for this project!

Would it be possible to implement being able to use a whole collection if collectionName.location is provided and collectionName.icons doesn't need to be manually handled?

Additionally if the plugin offers a main CDN option like @unocss/preset-icons without needing to add separate locations for each collection or if this is planned?

[JensDll]

Hey, here are my thoughts.

Would it be possible to implement being able to use a whole collection if collectionName.location is provided and collectionName.icons doesn't need to be manually handled?

I'm not sure if it's a good idea. Realistically a site doesn't use most of the icons of an extensive icon set, right? So by writing them out, I have this table of contents when looking at the tailwind config.

Additionally if the plugin offers a main CDN option like @unocss/preset-icons without needing to add separate locations for each collection or if this is planned?

Location is unnecessary if you've installed either @iconify/json or any of the @iconify-json/... packages. It's recommended to use these when possible and location for anything else, like a custom icon set. Which then might not be on npm or any CDN.

[ineshbose]

Thanks for your reply.

Realistically a site doesn't use most of the icons of an extensive icon set, right?

I can't say about this, but my use case lies because of a component library that makes use of an icon set which I prefer not to add to my list of dependencies but rather serve through Tailwind like UnoCSS; it's also difficult to predict which icons from that collection it uses behind the screen. @iconify/json or @iconify-json/[collection-name] add to the dependencies as well, and so I was hoping for a direct @unocss/preset-icons port for Tailwind which would use the Iconify JSON from a CDN since the collection fortunately is part of it, while I understand that custom icon sets may be tricky.

[JensDll]

my use case lies because of a component library that makes use of an icon set

Can you elaborate on this? For example, won't the users of the component library also have a tailwind.config file where they could use this plugin and select specific icons? Or is it like: Somebody can use any icon from this icon set next to the text of this button component?

[ineshbose]

Sorry for any misunderstandings - the component library isn't a Tailwind plugin! I meant a library for component-based frameworks such as React and Vue. They're typically not Tailwind based and so using & integrating Tailwind is a slight challenge, but they also tend to use their ecosystem where possible. For example - a Bootstrap component library making use of Bootstrap Icons by using the class bi-arrow-down. This means that in addition to installing the component library, I would need to add Bootstrap Icons to my dependencies, while @unocss/preset-icons is likely to handle that without adding the dependency.

[JensDll]

Hello, sorry for the delay on this. I'm down to adding an option to include all icons from a set. For example, the minimum usage would then look like below:

Icons(() => {
  return {
    bi: {
      includeAll: true
    }
  }
})

This is what you were looking for, right?

I'm still unclear about the CDN option. It seems to me that it would just save typing the whole URI. For example, https://esm.sh/ instead of https://esm.sh/@iconify-json/bi@1.1.8/icons.json. The latter is again desirable because there is no limitation to only CDN locations.

[ineshbose]

Hi, thanks for following up. That's exactly what I'm looking for and it looks absolutely great. Thank you for the feature. :)

I see and agree your point with not having a global CDN - while some use cases would still exist. Scoping is preferable!