@1001-digital/layers.base 0.0.11 → 0.0.13

package/.playground/app/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  base: {
+    name: 'Hello from Nuxt layer'
+  },
+})

package/.playground/{pages → app/pages}/index.vue

@@ -230,11 +230,13 @@
         <div class="component-demo">
           <h4>Dismissable Tags</h4>
           <Tags>
-            <Tag v-for="tag in dismissableTags" :key="tag" dismissable @dismiss="dismissableTags = dismissableTags.filter(t => t !== tag)">
+            <Tag v-for="tag in dismissableTags" :key="tag" dismissable
+              @dismiss="dismissableTags = dismissableTags.filter(t => t !== tag)">
               {{ tag }}
             </Tag>
           </Tags>
-          <Button v-if="dismissableTags.length === 0" class="small" @click="dismissableTags = ['Dismissable 1', 'Dismissable 2', 'Dismissable 3']">
+          <Button v-if="dismissableTags.length === 0" class="small"
+            @click="dismissableTags = ['Dismissable 1', 'Dismissable 2', 'Dismissable 3']">
             Reset Tags
           </Button>
         </div>
@@ -389,10 +391,8 @@ const fontSizes = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl']
 const sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 const spacers = ['xs', 'sm', 'default', 'md', 'lg', 'xl']
 const iconTypes = [
-  'add', 'check', 'chevron-down', 'chevron-left', 'chevron-right',
-  'chevron-up', 'close', 'code', 'discord', 'edit', 'email',
-  'folder', 'github', 'home', 'image', 'link', 'loader',
-  'maximize', 'times', 'trash', 'twitter', 'user', 'website', 'withdraw'
+  'lucide:plus', 'check', 'chevron-down', 'lucide:chevron-left', 'lucide:chevron-right',
+  'close',
 ]
 
 const showDialog = ref(false)

package/.playground/nuxt.config.ts

@@ -8,5 +8,10 @@ export default defineNuxtConfig({
       // Use the generated ESLint config for lint root project as well
       rootDir: fileURLToPath(new URL('..', import.meta.url))
     }
-  }
+  },
+  icon: {
+    aliases: {
+      close: 'ic:baseline-close',
+    },
+  },
 })

package/README.md

@@ -11,3 +11,18 @@ pnpm install
 ## Development
 
 Running `pnpm dev` will prepare and boot `.playground` directory, which imports the layer itself.
+
+## Icons
+
+The base `Icon` component relies on Nuxt Icon aliases. Extending layers or apps can override or add aliases via `nuxt.config`:
+
+```ts
+export default defineNuxtConfig({
+  icon: {
+    aliases: {
+      check: 'custom:check-circle',
+      add: 'heroicons:plus'
+    }
+  }
+})
+```

package/{app.config.ts → app/app.config.ts}

@@ -1,20 +1,14 @@
 export default defineAppConfig({
-  myLayer: {
+  base: {
     name: 'Hello from Nuxt layer'
   },
-  icons: {
-    map: {}
-  }
 })
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    myLayer?: {
+    base?: {
       /** Project name */
       name?: string
     }
-    icons?: {
-      map?: Record<string, string>
-    }
   }
 }

package/app/components/Icon.vue

@@ -1,48 +1,13 @@
+<template>
+  <NuxtIcon v-if="iconName" :name="iconName" class="icon" />
+</template>
+
 <script setup lang="ts">
 const props = defineProps<{ type: string }>()
-const appConfig = useAppConfig()
-
-const DEFAULT_ICON_MAP: Record<string, string> = {
-  add: 'lucide:plus',
-  check: 'lucide:check',
-  'chevron-down': 'lucide:chevron-down',
-  'chevron-left': 'lucide:chevron-left',
-  'chevron-right': 'lucide:chevron-right',
-  'chevron-up': 'lucide:chevron-up',
-  close: 'lucide:x',
-  copy: 'lucide:copy',
-  code: 'lucide:code',
-  discord: 'simple-icons:discord',
-  edit: 'lucide:pencil',
-  email: 'lucide:mail',
-  folder: 'lucide:folder',
-  github: 'simple-icons:github',
-  home: 'lucide:home',
-  help: 'lucide:circle-question-mark',
-  image: 'lucide:image',
-  link: 'lucide:link',
-  loader: 'lucide:loader-2',
-  maximize: 'lucide:maximize',
-  times: 'lucide:x',
-  trash: 'lucide:trash-2',
-  twitter: 'simple-icons:x',
-  user: 'lucide:user',
-  website: 'lucide:globe',
-  withdraw: 'lucide:undo',
-}
 
-const iconMap = computed(() => ({
-  ...DEFAULT_ICON_MAP,
-  ...(appConfig.icons?.map || {})
-}))
-
-const iconName = computed(() => iconMap.value[props.type] || props.type)
+const iconName = computed(() => props.type)
 </script>
 
-<template>
-  <NuxtIcon v-if="iconName" :name="iconName" class="icon" />
-</template>
-
 <style scoped>
 .icon {
   display: inline-flex;

package/nuxt.config.ts

@@ -11,11 +11,19 @@ export default defineNuxtConfig({
 
   icon: {
     componentName: 'NuxtIcon',
+    aliases: {
+      check: 'lucide:check',
+      'chevron-down': 'lucide:chevron-down',
+      close: 'lucide:x',
+      copy: 'lucide:copy',
+      help: 'lucide:circle-question-mark',
+      loader: 'lucide:loader-2',
+    }
   },
 
   css: [
     join(currentDir, './app/assets/styles/index.css'),
   ],
 
-  compatibilityDate: '2026-01-28'
+  compatibilityDate: '2026-01-28',
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.base",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.87",

package/.playground/app.config.ts

@@ -1,5 +0,0 @@
-export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
-})