Feature Request: Built-in API provider for custom IconifyJSON

[Aareksio]

Motivation

As is, iconify is great for free, public icon sets. For commercial purposes, you may want to use commercially licensed icon pack - the most popular example being Font Awesome Pro. Iconify already provides a way of converting custom icon packs into IconifyJSON definition. However, Including the whole IconifyJSON in the app is costly, it can easily weigh over 100 kB (raw). Therefore, iconify by default uses API provider to deliver only the requested icon definitions on demand. It is currently not possible to easily host your own icon packs definitions.

Feature Request

Since nuxt already hosts server routes, it would be great if the module could provide a streamlined method of hosting Iconify API provider. This way, the end-user could easily use their non-free icon packs benefiting from the on-demand architecture of iconifi's loadIcon.

Example module configuration could look like this:

defineAppConfig({
  nuxtIcon: {
    customCollections: [
      resolve('./assets/icons/collections/my-icons.json')
    ]
  }
})

To achieve this, the module would have to expose http API conforming to the Iconify API standard. The API is very straight forward

Example definition:

{
  "prefix": "my-icons",
  "lastModified": 1691181322,
  "icons": {
    "a": { "body": "<path d=\"_path_a_\"/>" },
    "b": { "body": "<path d=\"_path_b_\"/>" },
    "c": { "body": "<path d=\"_path_c_\"/>" }
  },
  "width": 24,
  "height": 24,
}

Example API response to GET /api/iconify-provider/my-icons.json?icons=a,c

{
  "prefix": "my-icons",
  "icons": {
    "a": { "body": "<path d=\"_path_a_\"/>" },
    "c": { "body": "<path d=\"_path_c_\"/>" }
  },
  "width": 24,
  "height": 24,
}

Module would have to register the custom provider with iconify library:

import { addAPIProvider } from '@iconify/vue'
addAPIProvider('nuxt', { resources: ['/api/iconify-provider'] })

And the icons should be usable as per example:

<icon name="@nuxt:my-icons:a"/>
<icon name="@nuxt:my-icons:c"/>

[JohnCampionJr]

Any chance we could get this soon with the new version now done?

[antfu]

I believe you could do that already:

icon/src/types.ts

Lines 66 to 70 in cb44eed

	export interface ServerBundleOptions {
	/**
	* Iconify collection names to be bundled
	*/
	collections?: (string | CustomCollection | IconifyJSON | RemoteCollection)[]

[JohnCampionJr]

@antfu any chance you could provide a sample showing how to load icons from a custom json file?