feat(icon): icon name extendable type

[m0ksem]

Right now, I made types for our Vuestic default aliases.

The main idea here is to allow user to extend VaIconName interface and add custom icon names.

declare module 'vuestic-ui' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface VaIconName extends MaterialIconsName {}
}

I'm using custom icon font in my project and I hate searching for correct icon name every time. I also use FontAwesome or MaterialIcons sometimes with Vuestic. Having an IDE suggestion will prevent me from spending time on searching correct icon name on docs site.

---

We can extend it feature with docs page.

MaterialIconsName is actually easy to make:

import type * as mdiIcons from '@mdi/js'

type KebabCase<T extends string> = T extends `${infer A}${infer B}`
  ? B extends Uncapitalize<B>
    ? `${Uncapitalize<A>}-${KebabCase<B>}`
    : `${Uncapitalize<A>}${KebabCase<B>}`
  : T
  
type RemoveMDIPrefix<T> = T extends `mdi${infer U}` ? U : T

type MaterialIconsName = KebabCase<RemoveMDIPrefix<keyof typeof mdiIcons>>

For FontAwesome we can use https://www.npmjs.com/package/@fortawesome/fontawesome-common-types?activeTab=code

[asvae]

Can we plan follow up on this before we merge?

The problem I see is that while this could be useful - right now we will probably solely use it for internal vuestic types.

It could also be confusing for contributors to understand what this code accomplishes due to absence of docs and even comments.

[asvae]

My concerns:

• We want this typing system to work out of the box for new vuestic-ui users with material symbols outline.
• We want some kind of introduction for other icon-fonts. I.e. tabs wiht mso/fa, under each tab - you have instruction on how to integrate font fully with your system.

[m0ksem]

In new types icon name for some reason is extract form VaIconName type. We'll need to rework this: