feat: add default icon size (#2)

README.md

@@ -69,6 +69,19 @@ You can use any name from the https://icones.js.org collection:
 
 Note that `NuxtIcon` needs to be inside `components/global/` folder (see [example](./playground/components/global/NuxtIcon.vue)).
 
+## Configuration
+
+To update the default size (`1em`) of the `<Icon />`, create an `app.config.ts` with the `nuxtIcon.size` property:
+
+```ts
+// app.config.ts
+export default defineAppConfig({
+  nuxtIcon: {
+    size: '24px' // default <Icon> size applied
+  }
+})
+```
+
 ## Contributing
 
 1. Clone this repository

package.json

@@ -24,13 +24,13 @@
   },
   "dependencies": {
     "@iconify/vue": "^3.2.1",
-    "@nuxt/kit": "^3.0.0-rc.8"
+    "@nuxt/kit": "^3.0.0-rc.9"
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.8",
+    "nuxt": "^3.0.0-rc.9",
     "standard-version": "^9.5.0"
   }
 }

playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  nuxtIcon: {
+    size: '1em'
+  }
+})

src/module.ts

@@ -2,10 +2,23 @@ import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
 
 export interface ModuleOptions {}
 
+declare module '@nuxt/schema' {
+  interface AppConfig {
+    /** nuxt-icon configuration */
+    nuxtIcon: {
+      /** default size */
+      size: string
+    }
+  }
+}
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'icon',
-    configKey: 'icon'
+    name: 'nuxt-icon',
+    configKey: 'icon',
+    compatibility: {
+      nuxt: '^3.0.0-rc.9'
+    }
   },
   defaults: {},
   setup (_options, nuxt) {

src/runtime/Icon.vue

@@ -6,25 +6,27 @@ import { loadIcon } from '@iconify/vue'
 import { useNuxtApp, useState, ref, computed, watch } from '#imports'
 
 const nuxtApp = useNuxtApp()
+const nuxtIcon = useAppConfig().nuxtIcon
 const props = defineProps({
   name: {
     type: String,
     required: true
   },
   size: {
     type: String,
-    default: '1em'
+    default: ''
   }
 })
 const state = useState('icons', () => ({}))
 const isFetching = ref(false)
 const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
 const component = computed(() => nuxtApp.vueApp.component(props.name))
 const sSize = computed(() => {
-  if (String(Number(props.size)) === props.size) {
-    return `${props.size}px`
+  const size = props.size || nuxtIcon?.size || '1em'
+  if (String(Number(size)) === size) {
+    return `${size}px`
   }
-  return props.size
+  return size
 })
 
 async function loadIconComponent () {