feat: support i- prefix (#95)

README.md

@@ -67,6 +67,8 @@ You can use any name from the https://icones.js.org collection:
 <Icon name="uil:github" />
 ```
 
+It supports the `i-` prefix (for example `i-uil-github`).
+
 ### Emoji
 
 ```html

playground/app.vue

@@ -26,14 +26,16 @@
     </p>
     <p>
       CSS:
-      <IconCSS name="uil:github" />
+      <IconCSS name="i-uil-github" />
       <IconCSS name="uil:github" size="24" />
       <IconCSS name="uil:github" size="48" />
       <IconCSS name="nuxt" size="48" style="color: #00DC82;" />
     </p>
     <p>
       Failing:
-      <Icon name="uil:bad">☀️</Icon>
+      <Icon name="uil:bad">
+        ☀️
+      </Icon>
       <Icon name="uil:bad" />
     </p>
   </div>

src/runtime/Icon.vue

@@ -1,6 +1,5 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { IconifyIcon } from '@iconify/vue'
 import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
@@ -9,13 +8,10 @@ import { useAppConfig, useNuxtApp, useState } from '#imports'
 
 const nuxtApp = useNuxtApp()
 const appConfig = useAppConfig()
-const aliases = appConfig?.nuxtIcon?.aliases || {}
-
-type AliasesKeys = keyof typeof aliases
 
 const props = defineProps({
   name: {
-    type: String as PropType<AliasesKeys | (string & {})>,
+    type: String,
     required: true
   },
   size: {
@@ -26,7 +22,7 @@ const props = defineProps({
 
 const state = useState<Record<string, IconifyIcon | undefined>>('icons', () => ({}))
 const isFetching = ref(false)
-const iconName = computed(() => (appConfig.nuxtIcon?.aliases || {})[props.name] || props.name)
+const iconName = computed(() => ((appConfig.nuxtIcon?.aliases || {})[props.name] || props.name).replace(/^i-/, ''))
 const icon = computed<IconifyIcon | undefined>(() => state.value?.[iconName.value])
 const component = computed(() => nuxtApp.vueApp.component(iconName.value as string))
 const sSize = computed(() => {

src/runtime/IconCSS.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
 
 const appConfig = useAppConfig()
-const aliases = appConfig?.nuxtIcon?.aliases || {}
-
-type AliasesKeys = keyof typeof aliases
 
 const props = defineProps({
   name: {
-    type: String as PropType<AliasesKeys | (string & {})>,
+    type: String,
     required: true
   },
   size: {
@@ -19,7 +15,7 @@ const props = defineProps({
   }
 })
 
-const iconName = computed(() => ((appConfig as any)?.nuxtIcon?.aliases || {})[props.name] || props.name)
+const iconName = computed(() => ((appConfig.nuxtIcon?.aliases || {})[props.name] || props.name).replace(/^i-/, ''))
 const iconUrl = computed(() => `url('https://api.iconify.design/${iconName.value.replace(':', '/')}.svg')`)
 const sSize = computed(() => {
   // Disable size if appConfig.nuxtIcon.size === false