From 9b226b2257c754ff6fd35f5295687f94cd05f064 Mon Sep 17 00:00:00 2001
From: Maciek Kucmus <maciejkucmus@gmail.com>
Date: Fri, 5 Dec 2025 13:25:06 +0100
Subject: [PATCH 1/2] docs(README): document extendable layer setup for Nuxt
 projects

Added instructions for using Nuxt as an extendable layer with createResolver
---
 README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/README.md b/README.md
index 3d60bedb..ac934074 100644
--- a/README.md
+++ b/README.md
@@ -177,6 +177,33 @@ export default defineNuxtConfig({
 > [!NOTE]
 > If you are running on Nuxt 4 with the new `app` directory, the assets directory is `'./app/assets/*'` instead of `'./assets/*'`.
 
+#### Using as an Extendable Layer
+
+If your Nuxt project is designed to be used as an extendable layer by other projects, you should use `createResolver` from `@nuxt/kit` to ensure paths resolve correctly relative to your layer's directory:
+
+```ts
+import { createResolver } from "@nuxt/kit"
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/icon'
+  ],
+  icon: {
+    customCollections: [
+      {
+        prefix: 'my-icon',
+        dir: resolve('./assets/my-icons'), // <-- use resolve() for layer compatibility
+      },
+    ],
+  },
+})
+```
+
+This ensures that when another Nuxt project extends your layer, the icon paths will correctly resolve to your layer's directory rather than the consuming project's directory. Without using `resolve()`, the paths would be relative to the project that extends your layer, causing icons to not be found.
+
+
 Then you can use the icons like this:
 
 ```vue

From 697e62cb05e7e417821bf109ea0830d787807782 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 8 Dec 2025 08:43:15 +0100
Subject: [PATCH 2/2] fix: apply suggestion from CR

---
 README.md | 34 +++++++---------------------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index ac934074..1de3cdf2 100644
--- a/README.md
+++ b/README.md
@@ -156,31 +156,6 @@ assets/my-icons
 
 In your `nuxt.config.ts`, add an item in `icon.customCollections`:
 
-```ts
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/icon'
-  ],
-  icon: {
-    customCollections: [
-      {
-        prefix: 'my-icon',
-        dir: './assets/my-icons',
-        // if you want to include all the icons in nested directories:
-        // recursive: true,
-      },
-    ],
-  },
-})
-```
-
-> [!NOTE]
-> If you are running on Nuxt 4 with the new `app` directory, the assets directory is `'./app/assets/*'` instead of `'./assets/*'`.
-
-#### Using as an Extendable Layer
-
-If your Nuxt project is designed to be used as an extendable layer by other projects, you should use `createResolver` from `@nuxt/kit` to ensure paths resolve correctly relative to your layer's directory:
-
 ```ts
 import { createResolver } from "@nuxt/kit"
 
@@ -194,15 +169,20 @@ export default defineNuxtConfig({
     customCollections: [
       {
         prefix: 'my-icon',
-        dir: resolve('./assets/my-icons'), // <-- use resolve() for layer compatibility
+        dir: resolve('./assets/my-icons'),
+        // if you want to include all the icons in nested directories:
+        // recursive: true,
       },
     ],
   },
 })
 ```
 
-This ensures that when another Nuxt project extends your layer, the icon paths will correctly resolve to your layer's directory rather than the consuming project's directory. Without using `resolve()`, the paths would be relative to the project that extends your layer, causing icons to not be found.
+> [!NOTE]
+> We use `createResolver` and `resolve()` to ensure paths work correctly both in regular projects and when your project is used as an extendable layer by other Nuxt projects. This ensures icon paths resolve relative to your project's directory rather than the consuming project's directory.
 
+> [!NOTE]
+> If you are running on Nuxt 4 with the new `app` directory, the assets directory is `'./app/assets/*'` instead of `'./assets/*'`.
 
 Then you can use the icons like this: