Fix type lucide-vue (#4883)

.github/workflows/lucide-vue.yml

@@ -47,3 +47,19 @@ jobs:
 
       - name: Test
         run: pnpm --filter @lucide/vue test
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm --filter @lucide/vue typecheck

packages/vue/package.json

@@ -35,7 +35,7 @@
     "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
-    "typecheck": "tsc",
+    "typecheck": "pnpm build:icons && tsc",
     "typecheck:watch": "tsc -w",
     "test": "pnpm build:icons && vitest run",
     "test:watch": "vitest watch"

packages/vue/src/Icon.ts

@@ -8,7 +8,6 @@ type IconProps =
       icon: LucideIconData;
       iconNode?: never;
       'icon-node'?: never;
-      name?: never;
     }
   | {
       icon?: never;
@@ -29,8 +28,8 @@ const Icon: FunctionalComponent<LucideProps & IconProps> = (
     iconNode,
     'icon-node': iconNodeKebabCase,
     icon = {
-      name: toKebabCase(name),
-      node: iconNode ?? iconNodeKebabCase,
+      name: name && toKebabCase(name),
+      node: iconNode ?? iconNodeKebabCase ?? [],
       size: 24,
       aliases: [],
     },
@@ -88,7 +87,7 @@ const Icon: FunctionalComponent<LucideProps & IconProps> = (
   });
 
   return h('svg', svgAttributes, [
-    ...builtIconNode.map((child) => h(...child)),
+    ...builtIconNode.map(([tag, attrs]) => h(tag, attrs)),
     ...(defaultSlot ?? []),
   ]);
 };

packages/vue/tests/lucide-vue.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, fireEvent, cleanup } from '@testing-library/vue';
+import { createTextVNode } from 'vue';
 import { Smile, Edit2, Pen } from '../src/lucide-vue';
 import createLucideIcon from '../src/createLucideIcon';
 import defaultAttributes from '../src/defaultAttributes';
@@ -112,7 +113,7 @@ describe('Using lucide icon components', () => {
   it('should handle non-extensible slots objects', () => {
     const Icon = createLucideIcon('test-icon', [['path', { d: 'M0 0h1', key: 'test-key' }]]);
     const slots = Object.freeze({
-      default: () => 'Hello World',
+      default: () => [createTextVNode('Hello World')],
     });
 
     expect(() =>
@@ -121,7 +122,6 @@ describe('Using lucide icon components', () => {
         {
           attrs: {},
           emit: vi.fn(),
-          expose: vi.fn(),
           slots,
         },
       ),

packages/vue/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "paths": {
       "@lucide/shared": ["../shared/src/index.ts"],
       "@lucide/shared/types": ["../shared/src/build/types.ts"]