Typescript error converting AppConfig to a type with { nuxtConfig }

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch nuxt-icon@0.6.1 for the project I'm working on.

Original problem

When building my SSR nuxt app for production, I got these errors:

ℹ Building server...                                                                                 1:35:26 PM
ℹ vite v4.5.0 building SSR bundle for production...                                                  1:35:26 PM
transforming (103) ../node_modules/nuxt/dist/app/compat/capi.jsnode_modules/nuxt-icon/dist/runtime/Icon.vue:10:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

 10 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
 11   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 19   }
    ~~~
 20 }
    ~

  node_modules/nuxt-icon/dist/runtime/Icon.vue:11:3
    11   nuxtIcon: {
         ~~~~~~~~
    'nuxtIcon' is declared here.

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

  5 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
  6   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 14   }
    ~~~
 15 }
    ~

  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:3
    6   nuxtIcon: {
        ~~~~~~~~
    'nuxtIcon' is declared here.


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/nuxt-icon/dist/runtime/Icon.vue:10
     1  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5

Here is the diff that solved my problem:

diff --git a/node_modules/nuxt-icon/dist/runtime/Icon.vue b/node_modules/nuxt-icon/dist/runtime/Icon.vue
index 1546625..c170029 100644
--- a/node_modules/nuxt-icon/dist/runtime/Icon.vue
+++ b/node_modules/nuxt-icon/dist/runtime/Icon.vue
@@ -4,10 +4,11 @@ import type { IconifyIcon } from '@iconify/vue'
 import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon, addAPIProvider } from '@iconify/vue'
 import { ref, computed, watch } from 'vue'
+// @ts-ignore
 import { useAppConfig, useNuxtApp, useState } from '#imports'
 
 const nuxtApp = useNuxtApp()
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
   nuxtIcon: {
     size?: string
     class?: string
diff --git a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
index fcef2d3..aee8c81 100644
--- a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
+++ b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+// @ts-ignore
 import { useAppConfig } from '#imports'
 
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
   nuxtIcon: {
     size?: string
     class?: string

This issue body was partially generated by patch-package.

Start with the TypeScript casts in node_modules/nuxt-icon/dist/runtime/Icon.vue and IconCSS.vue, then reproduce the reported production SSR build with Nuxt. Check how useAppConfig() is typed in the generated runtime and verify the fix by confirming both files build without TS2352 errors.