Custom icons must be in kebab case

[huang-julien]

Description

iconify's getIcon uses validateIconName which enforce some validation for an icon's name.

One validation is that a name must be split with - which is often not the case with users custom icons

Reproduction

https://stackblitz.com/edit/nuxt-starter-qlykyd?file=icons%2FEuro.svg,nuxt.config.ts,app.vue

in this reproduction, we can't see my-icons:Euro because Euro is in PascalCase

Solution

Either a documentation fix about naming convention or fix it in iconify or we could also merge prefix with the name ?

[YaredFall]

Stumbled upon this quirk too.

It seems that only lowercase letters, digits and dash (-) is allowed inside icon filename.

I was hoping to be able to use uppercase letters and underscores... I wonder why this naming convention is never mentioned in the docs.

[huang-julien]

Because we're using @iconify and this is the convention @iconify uses

[huang-julien]

I'll work on it when i have some free time

[polarove]

Same here, tortured me for an hour

[JonathanXDR]

Would it also be possible to consider supporting dots (.) as separators for custom icons? This would add flexibility to naming conventions and align more closely with custom design systems, as, for example, it’s a common pattern at the company I work for.

[antfu]

/cc @cyberalien, do you see this possibly being supported by Iconify, or what do you suggest we do with a custom solution for it? Thanks a lot!

[antfu]

Duplicated as #257

[cyberalien]

Naming convention is used in all parts of Iconify ecosystem, so changing it would be tricky. It would require way too many code changes.

I recommend changing it internally in Nuxt Icon. Convert names when loading and when passing icon name parameter. It should be as simple as changing icon name to lower case.

[antfu]

I added automatical convention and warnings upon loading to make this more transparent - as a temporary workaround. (c09fdc7, v0.6.1)

In the long term, I do wish to support more relaxed conversion (at least _ and .) - which I think might require us to wrapping or hack the iconify runtime a bit to do that.

[cyberalien]

In the long term, I do wish to support more relaxed conversion (at least _ and .) - which I think might require us to wrapping or hack the iconify runtime a bit to do that.

I think support for any icon names can be added in future versions. Current convention will remain for icons loaded from API, but can be ignored for custom icons.

[antfu]

I would agree that the Iconify core should be kept limited. But would you consider that for custom provider/API endpoint, such custom names could still be useful to match with their custom conversion etc.? Maybe allow the provider to define a charset that is considered to be the valid name?

In a way Nuxt Icon has a server API endpoint that serves as a custom provider to serve the icon data in our app and fallback to Iconify's public API. This is also where we put custom icon data in. For some cases the custom icons could be bundled directly in the client via addIcon() API, but for the other cases, it might be served from a normal Iconify-liked endpoint.

(and this is a slide of my upcoming talk, for making it clear)

[cyberalien]

It is not simple. Icons are not loaded one by one, they are loaded in bulk from API, otherwise loading could take a while. So API end point is not easily customisable.

I think a simple solution would be to allow custom loaded based on prefix and/or provider. Then current API logic won't need to change, but it would allow custom solutions, which could be used to load icons from Nuxt. Then naming convention would apply only to icons loaded with default loader.