Implement: Typescript, Esbuild and vitest (#877 )

* init modernization * implement esbuild * Make first build work * Fix esbuild for lucide-react * Add vitest for lucide-react * add esbuild lucide and lucide-react * update package lock * implement preact * Add typescript and vitest * adjust workflows * Fix mocking react-native package * update lock file * Add esbuild in svelte * make svelte test work in vitest * Refactor lucide svelte * Transform lucide vue to typescript * Finish lucide-vue-next typescript * 0.104.0-beta.0 * remove version in main package.json * cleanup * Fix svelte tests snapshots * clean up * add rollup lucide-vue-next * Fix lucide svelte package * change to workspace link * revert filter position * revert preact workflow change * cleanup * Fix some types * add semi
📦 Bump lucide package versions to 0.103.0
2025-12-19 05:09:20 +01:00 · 2022-12-04 22:38:56 +01:00 · 2022-11-30 10:29:46 +00:00
135 changed files with 3672 additions and 4306 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,6 +34,7 @@ module.exports = {
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
-    ecmaVersion: 2020,
+    ecmaVersion: 'latest',
+    sourceType: 'module',
  },
 };
--- a/.github/workflows/lucide-angular.yml
+++ b/.github/workflows/lucide-angular.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-angular/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-angular/**
-      - pnpm-lock.yaml

 jobs:
  lucide-angular:
--- a/.github/workflows/lucide-font.yml
+++ b/.github/workflows/lucide-font.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - icons/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - icons/**
-      - pnpm-lock.yaml

 jobs:
  lucide-font:
--- a/.github/workflows/lucide-preact.yml
+++ b/.github/workflows/lucide-preact.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-preact/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-preact/**
-      - pnpm-lock.yaml

 jobs:
  lucide-preact:
--- a/.github/workflows/lucide-react-native.yml
+++ b/.github/workflows/lucide-react-native.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-react-native/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-react-native/**
-      - pnpm-lock.yaml

 jobs:
  lucide-react-native:
--- a/.github/workflows/lucide-react.yml
+++ b/.github/workflows/lucide-react.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-react/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-react/**
-      - pnpm-lock.yaml

 jobs:
  lucide-react:
--- a/.github/workflows/lucide-solid.yml
+++ b/.github/workflows/lucide-solid.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-solid/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-solid/**
-      - pnpm-lock.yaml

 jobs:
  lucide-solid:
--- a/.github/workflows/lucide-static.yml
+++ b/.github/workflows/lucide-static.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-static/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-static/**
-      - pnpm-lock.yaml

 jobs:
  lucide-static:
--- a/.github/workflows/lucide-svelte.yml
+++ b/.github/workflows/lucide-svelte.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-svelte/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-svelte/**
-      - pnpm-lock.yaml

 jobs:
  lucide-svelte:
--- a/.github/workflows/lucide-vue-next.yml
+++ b/.github/workflows/lucide-vue-next.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-vue-next/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-vue-next/**
-      - pnpm-lock.yaml

 jobs:
  lucide-vue-next:
--- a/.github/workflows/lucide-vue.yml
+++ b/.github/workflows/lucide-vue.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide-vue/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide-vue/**
-      - pnpm-lock.yaml

 jobs:
  lucide-vue:
--- a/.github/workflows/lucide.yml
+++ b/.github/workflows/lucide.yml
@@ -5,10 +5,6 @@ on:
    paths:
      - packages/lucide/**
      - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide/**
-      - pnpm-lock.yaml

 jobs:
  lucide:
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,20 +0,0 @@
-module.exports = {
-  presets: ['@babel/env'],
-  // babelrcRoots: ['.', './packages/*'],
-  env: {
-    test: {
-      presets: ['@babel/env'],
-      plugins: ['@babel/plugin-transform-runtime'],
-    },
-    dev: {
-      plugins: [
-        [
-          'transform-inline-environment-variables',
-          {
-            include: ['NODE_ENV'],
-          },
-        ],
-      ],
-    },
-  },
-};
--- a/icons/activity.json
+++ b/icons/activity.json
@@ -11,4 +11,4 @@
    "account",
    "social"
  ]
-}
+}
--- a/package.json
+++ b/package.json
@@ -28,37 +28,16 @@
    "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}"
  },
  "devDependencies": {
-    "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.6",
-    "@babel/node": "^7.20.0",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-typescript": "^9.0.2",
-    "babel-jest": "^29.2.2",
-    "babel-plugin-add-import-extension": "^1.6.0",
-    "core-js": "^3.26.0",
-    "esbuild": "^0.15.12",
    "eslint": "^8.26.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.1",
-    "jest": "^29.2.2",
    "lint-staged": "^13.0.3",
    "minimist": "^1.2.7",
    "node-fetch": "^3.2.10",
    "prettier": "2.7.1",
-    "rollup": "^3.2.4",
-    "rollup-plugin-license": "^3.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "svg-outline-stroke": "^1.3.1",
    "svgo": "^3.0.0",
    "svgson": "^5.2.1"
  },
@@ -70,5 +49,13 @@
  "lint-staged": {
    "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
  },
-  "packageManager": "pnpm@7.14.0"
+  "packageManager": "pnpm@7.14.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@babel/core",
+        "@babel/preset-env"
+      ]
+    }
+  }
 }
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-angular",
  "description": "A Lucide icon library package for Angular applications",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "author": "SMAH1",
  "license": "ISC",
  "homepage": "https://lucide.dev",
@@ -28,7 +28,7 @@
    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:ng",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtention=.ts --exportFileName=index.ts",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --exportFileName=index.ts",
    "build:ng": "ng build  --configuration production",
    "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
    "test:watch": "ng test",
--- a/packages/lucide-flutter/pubspec.yaml
+++ b/packages/lucide-flutter/pubspec.yaml
@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.102.0
+version: 0.103.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide

--- a/packages/lucide-preact/babel.config.js
+++ b/packages/lucide-preact/babel.config.js
@@ -1,6 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: ['preact'],
-  env: mainConfig.env,
-};
--- a/packages/lucide-preact/jest.config.js
+++ b/packages/lucide-preact/jest.config.js
@@ -1,9 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transformIgnorePatterns: [`/node_modules`],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-  },
-};
--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-preact",
  "description": "A Lucide icon library package for Preact applications",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -22,21 +22,25 @@
  ],
  "sideEffects": false,
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
-    "build:es": "babel src -d dist/esm",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "test": "vitest run",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
+    "@preact/preset-vite": "^2.4.0",
+    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/preact": "^2.0.1",
-    "babel-preset-preact": "^2.0.0",
-    "jest": "^26.6.3",
-    "preact": "^10.5.13"
+    "preact": "^10.11.2",
+    "rollup": "^3.5.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
  },
  "peerDependencies": {
    "preact": "^10.5.13"
--- a/packages/lucide-preact/rollup.config.mjs
+++ b/packages/lucide-preact/rollup.config.mjs
@@ -1,10 +1,10 @@
-import plugins from '../../rollup.plugins.mjs';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: "json" };

 const packageName = 'LucidePreact';
 const outputFileName = 'lucide-preact';
 const outputDir = 'dist';
-const inputs = [`src/lucide-preact.js`];
+const inputs = [`src/lucide-preact.ts`];
 const bundles = [
  {
    format: 'umd',
@@ -22,17 +22,35 @@ const bundles = [
    inputs,
    outputDir,
  },
+  {
+    format: 'es',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
 ];

 const configs = bundles
-  .map(({ inputs, outputDir, format, minify }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
    inputs.map(input => ({
      input,
      plugins: plugins(pkg, minify),
      external: ['preact', 'prop-types'],
      output: {
        name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
+        preserveModules,
        format,
        sourcemap: true,
        globals: {
--- a/packages/lucide-preact/src/createPreactComponent.js
+++ b/packages/lucide-preact/src/createPreactComponent.js
@@ -1,33 +0,0 @@
-import { h, toChildArray } from 'preact';
-import defaultAttributes from './defaultAttributes';
-
-/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
- */
-export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-export default (iconName, iconNode) => {
-  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }) =>
-    h(
-      'svg',
-      {
-        ...defaultAttributes,
-        width: size,
-        height: size,
-        stroke: color,
-        'stroke-width': strokeWidth,
-        class: `lucide lucide-${toKebabCase(iconName)}`,
-        ...rest,
-      },
-      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
-    );
-
-  Component.displayName = `${iconName}`;
-
-  return Component;
-};
--- a/packages/lucide-preact/src/createPreactComponent.ts
+++ b/packages/lucide-preact/src/createPreactComponent.ts
@@ -0,0 +1,46 @@
+import { ComponentType, h, JSX, toChildArray } from 'preact';
+import defaultAttributes from './defaultAttributes';
+
+type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
+
+interface LucideProps extends Omit<JSX.SVGAttributes<SVGElement>, "ref" | "size"> {
+  size?: string | number
+  color: string
+}
+
+
+
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const createPreactComponent = (iconName: string, iconNode: IconNode) => {
+  const Component = (
+    { color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }: LucideProps
+  ) =>
+    h(
+      'svg' as unknown as ComponentType<Partial<JSX.SVGAttributes<SVGElement> & { 'stroke-width': number | string }>>,
+      {
+        ...defaultAttributes,
+        width:  String(size),
+        height: size,
+        stroke: color,
+        ['stroke-width' as 'strokeWidth']: strokeWidth,
+        class: `lucide lucide-${toKebabCase(iconName)}`,
+        ...rest,
+      },
+      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+    );
+
+  Component.displayName = `${iconName}`;
+
+  return Component;
+};
+
+export default createPreactComponent
--- a/packages/lucide-vue-next/src/defaultAttributes.js
+++ b/packages/lucide-vue-next/src/defaultAttributes.js
@@ -5,7 +5,7 @@ export default {
  viewBox: '0 0 24 24',
  fill: 'none',
  stroke: 'currentColor',
-  'stroke-width': 2,
+  'stroke-width': '2',
  'stroke-linecap': 'round',
  'stroke-linejoin': 'round',
 };
--- a/packages/lucide-preact/src/lucide-preact.ts
+++ b/packages/lucide-preact/src/lucide-preact.ts
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
-
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1
+
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+
+exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-preact/tests/lucide-preact.spec.tsx
+++ b/packages/lucide-preact/tests/lucide-preact.spec.tsx
@@ -1,4 +1,4 @@
-import { h } from 'preact'
+import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/preact'
 import { Grid } from '../src/icons'

--- a/packages/lucide-preact/tests/setupVitest.js
+++ b/packages/lucide-preact/tests/setupVitest.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/packages/lucide-preact/tsconfig.json
+++ b/packages/lucide-preact/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "noEmitOnError": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+  },
+  "exclude": ["**/node_modules"]
+}
--- a/packages/lucide-preact/vitest.config.ts
+++ b/packages/lucide-preact/vitest.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import preact from '@preact/preset-vite'
+
+export default defineConfig({
+  plugins: [preact()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    transformMode: {
+      web: [/\.jsx?$/],
+    },
+    setupFiles: './tests/setupVitest.js',
+    threads: false,
+    isolate: false,
+  },
+  resolve: {
+    mainFields: ['module'],
+  },
+});
--- a/packages/lucide-react-native/mocks/react-native-svg/index.ts
+++ b/packages/lucide-react-native/mocks/react-native-svg/index.ts
@@ -1,10 +1,10 @@
-// @flow
-
 // https://github.com/FormidableLabs/react-native-svg-mock
 import React from 'react';
+import type { LucideProps } from '../../src/createReactComponent';
+export type { SvgProps } from 'react-native-svg';

-const createComponent = function(name) {
-  const component = (props) => {
+const createComponent = function(name: string) {
+  const component = (props: LucideProps) => {
    return React.createElement(name, props, props.children);
  }

--- a/packages/lucide-react-native/babel.config.js
+++ b/packages/lucide-react-native/babel.config.js
@@ -1,19 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
-  env: {
-    ...mainConfig.env,
-    test: {
-      presets: ['react-app'],
-    },
-  },
-};
--- a/packages/lucide-react-native/jest.config.js
+++ b/packages/lucide-react-native/jest.config.js
@@ -1,9 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transformIgnorePatterns: [`/node_modules`],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-  },
-};
--- a/packages/lucide-react-native/package.json
+++ b/packages/lucide-react-native/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-react-native",
  "description": "A Lucide icon library package for React Native applications",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -26,21 +26,28 @@
    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "test": "vitest",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
-    "babel-preset-react-app": "^10.0.0",
-    "jest": "^26.6.3",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.21",
+    "@vitejs/plugin-react": "^2.1.0",
    "prop-types": "^15.7.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-native": "^0.69.0",
-    "react-native-svg": "^13.0.0"
+    "react-native-svg": "^13.0.0",
+    "rollup": "^3.5.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
  },
  "peerDependencies": {
    "prop-types": "^15.7.2",
--- a/packages/lucide-react-native/rollup.config.mjs
+++ b/packages/lucide-react-native/rollup.config.mjs
@@ -1,10 +1,10 @@
-import plugins from '../../rollup.plugins.mjs';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };

 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react-native';
 const outputDir = 'dist';
-const inputs = ['src/lucide-react-native.js'];
+const inputs = ['src/lucide-react-native.ts'];
 const bundles = [
  {
    format: 'umd',
@@ -23,6 +23,11 @@ const bundles = [
    outputDir,
    preserveModules: true,
  },
+  {
+    format: 'es',
+    inputs,
+    outputDir,
+  },
  {
    format: 'esm',
    inputs,
@@ -36,7 +41,7 @@ const configs = bundles
    inputs.map(input => ({
      input,
      plugins: plugins(pkg, minify),
-      external: ['react', 'prop-types', 'lucide', 'react-native-svg'],
+      external: ['react', 'prop-types', 'react-native-svg'],
      output: {
        name: packageName,
        ...(preserveModules
@@ -54,7 +59,6 @@ const configs = bundles
          react: 'react',
          'react-native-svg': 'react-native-svg',
          'prop-types': 'PropTypes',
-          lucide: 'lucide',
        },
      },
    })),
--- a/packages/lucide-react-native/scripts/buildTypes.mjs
+++ b/packages/lucide-react-native/scripts/buildTypes.mjs
@@ -5,16 +5,15 @@ import {
  resetFile,
  toPascalCase,
  writeFile,
-  getCurrentDirPath
+  getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';

-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 const srcDirectory = path.join(currentDir, '../dist');

 // Declare type definitions
 const typeDefinitions = `\
 /// <reference types="react" />
-import { SVGAttributes } from 'react'

 declare module 'lucide-react-native'

@@ -38,7 +37,7 @@ writeFile(typeDefinitions, TYPES_FILE, srcDirectory);

 const svgFiles = readSvgDirectory(ICONS_DIR);

-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
  const iconName = path.basename(svgFile, '.svg');
  const componentName = toPascalCase(iconName);

--- a/packages/lucide-react-native/src/createReactComponent.ts
+++ b/packages/lucide-react-native/src/createReactComponent.ts
@@ -1,11 +1,18 @@
-import { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, ReactSVG, ReactNode, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import * as NativeSvg from 'react-native-svg';
 import defaultAttributes from './defaultAttributes';
+import type { SvgProps } from 'react-native-svg';
+type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]

-const createReactComponent = (iconName, iconNode) => {
+
+export interface LucideProps extends SvgProps {
+  size?: string | number
+}
+
+const createReactComponent = (iconName: string, iconNode: IconNode) => {
  const Component = forwardRef(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }: LucideProps, ref) =>
      createElement(
        NativeSvg.Svg,
        {
@@ -19,10 +26,10 @@ const createReactComponent = (iconName, iconNode) => {
        },
        [
          ...iconNode.map(([tag, attrs]) => {
-            const uppercasedTag = tag.charAt(0).toUpperCase() + tag.slice(1);
-            return createElement(NativeSvg[uppercasedTag], attrs);
+            const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg);
+            return createElement(NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>, attrs);
          }),
-          ...(children || []),
+          ...(children as ReactNode[] || []),
        ],
      ),
  );
--- a/packages/lucide-react-native/src/defaultAttributes.ts
+++ b/packages/lucide-react-native/src/defaultAttributes.ts
--- a/packages/lucide-react-native/src/lucide-react-native.ts
+++ b/packages/lucide-react-native/src/lucide-react-native.ts
--- a/packages/lucide-react-native/tests/snapshots/lucide-react-native.spec.js.snap
+++ b/packages/lucide-react-native/tests/snapshots/lucide-react-native.spec.js.snap
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
-
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-react-native/tests/snapshots/lucide-react-native.spec.tsx.snap
+++ b/packages/lucide-react-native/tests/snapshots/lucide-react-native.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1
+
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+
+exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-react-native/tests/lucide-react-native.spec.tsx
+++ b/packages/lucide-react-native/tests/lucide-react-native.spec.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render } from '@testing-library/react'
 import { Grid } from '../src/icons'

+vi.mock('react-native-svg')
+
+type Attributes = Record<string, { value: unknown}>
+
 describe('Using lucide icon components', () => {
  it('should render an component', () => {
-    const { container } = render( <Grid/> );
+    const { container } = render(<Grid /> );

    expect( container.innerHTML ).toMatchSnapshot();
  });
@@ -21,10 +25,10 @@ describe('Using lucide icon components', () => {
    );

    const { attributes } = getByTestId(testId);
-    expect(attributes.stroke.value).toBe('red');
-    expect(attributes.width.value).toBe('48');
-    expect(attributes.height.value).toBe('48');
-    expect(attributes['stroke-width'].value).toBe('4');
+    expect((attributes as unknown as Attributes).stroke.value).toBe('red');
+    expect((attributes as unknown as Attributes).width.value).toBe('48');
+    expect((attributes as unknown as Attributes).height.value).toBe('48');
+    expect((attributes as unknown as Attributes)['stroke-width'].value).toBe('4');

    expect( container.innerHTML ).toMatchSnapshot();
  });
--- a/packages/lucide-react-native/tests/setupVitest.js
+++ b/packages/lucide-react-native/tests/setupVitest.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/packages/lucide-react-native/tsconfig.json
+++ b/packages/lucide-react-native/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ESNext",
+    "lib": [
+      "es2019",
+      "DOM"
+    ],
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "isolatedModules": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "skipLibCheck": false
+  },
+  "exclude": [
+    "node_modules",
+  ]
+}
--- a/packages/lucide-react-native/vitest.config.ts
+++ b/packages/lucide-react-native/vitest.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    transformMode: {
+      web: [/\.jsx?$/],
+    },
+    setupFiles: './tests/setupVitest.js',
+    // threads: false,
+    // isolate: false,
+    mockReset: true,
+  },
+});
--- a/packages/lucide-react/babel.config.js
+++ b/packages/lucide-react/babel.config.js
@@ -1,19 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
-  env: {
-    ...mainConfig.env,
-    test: {
-      presets: ['react-app'],
-    },
-  },
-};
--- a/packages/lucide-react/jest.config.js
+++ b/packages/lucide-react/jest.config.js
@@ -1,9 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transformIgnorePatterns: [`/node_modules`],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-  },
-};
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-react",
  "description": "A Lucide icon library package for React applications",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -18,27 +18,50 @@
  "unpkg": "dist/umd/lucide-react.min.js",
  "typings": "dist/lucide-react.d.ts",
  "sideEffects": false,
+  "exports": {
+    "browser": {
+      "import": "./dist/es/lucide-react.js",
+      "require": "./index-require.cjs",
+      "default": "./dist/umd/lucide-react.js"
+    },
+    "node": {
+      "import": "./dist/esm/lucide-react.js",
+      "require": "./dist/cjs/lucide-react.js",
+      "default": "./dist/cjs/lucide-react.js"
+    },
+    "deno": {
+      "default": "./dist/es/lucide-react.js"
+    }
+  },
  "files": [
    "dist"
  ],
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm typecheck && pnpm build:bundles && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
-    "build:es": "babel src -d dist/esm",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "typecheck": "tsc",
+    "typecheck:watch": "tsc -w",
+    "test": "vitest run",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^11.2.6",
-    "babel-preset-react-app": "^10.0.0",
-    "jest": "^26.6.3",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.21",
+    "@vitejs/plugin-react": "^2.1.0",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "rollup": "^3.5.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
  },
  "peerDependencies": {
    "prop-types": "^15.7.2",
--- a/packages/lucide-react/rollup.config.mjs
+++ b/packages/lucide-react/rollup.config.mjs
@@ -1,10 +1,10 @@
-import plugins from '../../rollup.plugins.mjs';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };

 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react';
 const outputDir = `dist`;
-const inputs = [`src/lucide-react.js`];
+const inputs = [`src/lucide-react.ts`];
 const bundles = [
  {
    format: 'umd',
@@ -22,23 +22,40 @@ const bundles = [
    inputs,
    outputDir,
  },
+  {
+    format: 'es',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
 ];

 const configs = bundles
-  .map(({ inputs, outputDir, format, minify }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
    inputs.map(input => ({
      input,
      plugins: plugins(pkg, minify),
-      external: ['react', 'prop-types', 'lucide'],
+      external: ['react', 'prop-types'],
      output: {
        name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
        format,
        sourcemap: true,
+        preserveModules,
        globals: {
          react: 'react',
-          'prop-types': 'PropTypes',
-          lucide: 'lucide',
+          'prop-types': 'PropTypes'
        },
      },
    })),
--- a/packages/lucide-react/scripts/buildTypes.mjs
+++ b/packages/lucide-react/scripts/buildTypes.mjs
@@ -5,10 +5,10 @@ import {
  resetFile,
  toPascalCase,
  writeFile,
-  getCurrentDirPath
+  getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';

-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 const srcDirectory = path.join(currentDir, '../dist');

 // Declare type definitions
@@ -38,7 +38,7 @@ writeFile(typeDefinitions, TYPES_FILE, srcDirectory);

 const svgFiles = readSvgDirectory(ICONS_DIR);

-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
  const iconName = path.basename(svgFile, '.svg');
  const componentName = toPascalCase(iconName);

--- a/packages/lucide-react/src/createReactComponent.ts
+++ b/packages/lucide-react/src/createReactComponent.ts
@@ -1,7 +1,14 @@
-import { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, ReactSVG, SVGProps } from 'react';
 import PropTypes from 'prop-types';
 import defaultAttributes from './defaultAttributes';

+type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
+
+export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>
+
+export interface LucideProps extends SVGAttributes {
+  size?: string | number
+}
 /**
 * Converts string to KebabCase
 * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -10,10 +17,10 @@ import defaultAttributes from './defaultAttributes';
 * @param {string} string
 * @returns {string} A kebabized string
 */
-export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

-export default (iconName, iconNode) => {
-  const Component = forwardRef(
+const createReactComponent = (iconName: string, iconNode: IconNode) => {
+  const Component = forwardRef<SVGSVGElement, LucideProps>(
    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
      createElement(
        'svg',
@@ -27,7 +34,12 @@ export default (iconName, iconNode) => {
          className: `lucide lucide-${toKebabCase(iconName)}`,
          ...rest,
        },
-        [...iconNode.map(([tag, attrs]) => createElement(tag, attrs)), ...(children || [])],
+        [
+          ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+          ...(
+            (Array.isArray(children) ? children : [children]) || []
+          )
+        ],
      ),
  );

@@ -41,3 +53,5 @@ export default (iconName, iconNode) => {

  return Component;
 };
+
+export default createReactComponent
--- a/packages/lucide-react/src/defaultAttributes.ts
+++ b/packages/lucide-react/src/defaultAttributes.ts
--- a/packages/lucide-react/src/lucide-react.ts
+++ b/packages/lucide-react/src/lucide-react.ts
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
+++ b/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
-
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.tsx.snap
+++ b/packages/lucide-react/tests/snapshots/lucide-react.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1
+
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+
+exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-react-native/tests/lucide-react-native.spec.js
+++ b/packages/lucide-react-native/tests/lucide-react-native.spec.js
@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react'
 import { Grid } from '../src/icons'
@@ -20,7 +21,7 @@ describe('Using lucide icon components', () => {
      />,
    );

-    const { attributes } = getByTestId(testId);
+    const { attributes } = getByTestId(testId) as unknown as{ attributes: Record<string, { value: string }>};
    expect(attributes.stroke.value).toBe('red');
    expect(attributes.width.value).toBe('48');
    expect(attributes.height.value).toBe('48');
--- a/packages/lucide-react/tests/setupVitest.js
+++ b/packages/lucide-react/tests/setupVitest.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/packages/lucide-react/tsconfig.json
+++ b/packages/lucide-react/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "noEmitOnError": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "declarationMap": true,
+    "jsx": "react-jsx",
+  },
+  "exclude": ["**/node_modules"]
+}
--- a/packages/lucide-react/vitest.config.ts
+++ b/packages/lucide-react/vitest.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    transformMode: {
+      web: [/\.jsx?$/],
+    },
+    setupFiles: './tests/setupVitest.js',
+    threads: false,
+    isolate: false,
+  },
+  resolve: {
+    conditions: ['development', 'browser'],
+  },
+});
--- a/packages/lucide-solid/babel.config.js
+++ b/packages/lucide-solid/babel.config.js
@@ -1,6 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: ['solid'],
-  env: mainConfig.env,
-};
--- a/packages/lucide-solid/package.json
+++ b/packages/lucide-solid/package.json
@@ -22,26 +22,24 @@
  ],
  "sideEffects": false,
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
-    "build:es": "babel src -d dist/esm",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test:jest": "jest",
-    "test": "vitest",
+    "test": "vitest run",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
    "@testing-library/jest-dom": "^5.16.5",
    "babel-preset-solid": "^1.5.4",
-    "jest": "^26.6.3",
    "jsdom": "^20.0.0",
+    "rollup": "^3.5.1",
    "solid-js": "^1.4.7",
    "solid-testing-library": "^0.3.0",
-    "solid-jest": "^0.2.0",
-    "vite": "^2.6.4",
+    "vite": "^3.2.4",
    "vite-plugin-solid": "^2.3.0",
    "vitest": "^0.23.2"
  },
--- a/packages/lucide-solid/rollup.config.mjs
+++ b/packages/lucide-solid/rollup.config.mjs
@@ -1,10 +1,10 @@
-import plugins from '../../rollup.plugins.mjs';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };

 const packageName = 'LucideSolid';
 const outputFileName = 'lucide-solid';
 const outputDir = 'dist';
-const inputs = [`src/lucide-solid.js`];
+const inputs = [`src/lucide-solid.ts`];
 const bundles = [
  {
    format: 'umd',
@@ -22,17 +22,35 @@ const bundles = [
    inputs,
    outputDir,
  },
+  {
+    format: 'es',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
 ];

 const configs = bundles
-  .map(({ inputs, outputDir, format, minify }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
    inputs.map(input => ({
      input,
      plugins: plugins(pkg, minify),
      external: ['solid-js', 'solid-js/h'],
      output: {
        name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
+        preserveModules,
        format,
        sourcemap: true,
        globals: {
--- a/packages/lucide-solid/scripts/buildTypes.mjs
+++ b/packages/lucide-solid/scripts/buildTypes.mjs
@@ -5,10 +5,10 @@ import {
  resetFile,
  toPascalCase,
  appendFile,
-  getCurrentDirPath
+  getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';

-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 const srcDirectory = path.join(currentDir, '../dist');

 // Declare type definitions
@@ -16,9 +16,8 @@ const typeDefinitions = `\
 /// <reference types="solid-js" />
 import { JSX } from 'solid-js'

-interface LucideProps extends Partial<JSX.IntrinsicElements & JSX.SvgSVGAttributes<SVGSVGElement>> {
+interface LucideProps extends Partial<JSX.SvgSVGAttributes<SVGSVGElement>> {
  key?: string | number;
-  ref?: string | ((component: any) => any);
  color?: string
  size?: string | number
  strokeWidth?: string | number
@@ -36,7 +35,7 @@ writeFile(typeDefinitions, TYPES_FILE, srcDirectory);

 const svgFiles = readSvgDirectory(ICONS_DIR);

-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
  const iconName = path.basename(svgFile, '.svg');
  const componentName = toPascalCase(iconName);

--- a/packages/lucide-solid/src/createSolidComponent.ts
+++ b/packages/lucide-solid/src/createSolidComponent.ts
@@ -1,7 +1,17 @@
 import h from 'solid-js/h';
-import { splitProps } from 'solid-js';
+import { JSX, splitProps } from 'solid-js';
 import defaultAttributes from './defaultAttributes';

+type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
+
+interface LucideProps extends Partial<JSX.SvgSVGAttributes<SVGSVGElement>> {
+  key?: string | number;
+  color?: string
+  size?: string | number
+  strokeWidth?: string | number
+  class?: string
+}
+
 /**
 * Converts string to KebabCase
 * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -10,10 +20,10 @@ import defaultAttributes from './defaultAttributes';
 * @param {string} string
 * @returns {string} A kebabized string
 */
-export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

-export default (iconName, iconNode) => {
-  const Component = props => {
+export default (iconName: string, iconNode: IconNode) => {
+  const Component = (props: LucideProps) => {
    const [localProps, rest] = splitProps(props, [
      'color',
      'size',
--- a/packages/lucide-preact/src/defaultAttributes.js
+++ b/packages/lucide-preact/src/defaultAttributes.js
--- a/packages/lucide-solid/src/lucide-solid.ts
+++ b/packages/lucide-solid/src/lucide-solid.ts
--- a/packages/lucide-svelte/babel.config.js
+++ b/packages/lucide-svelte/babel.config.js
@@ -1,14 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
-  env: mainConfig.env,
-};
--- a/packages/lucide-svelte/jest.config.js
+++ b/packages/lucide-svelte/jest.config.js
@@ -1,11 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  transformIgnorePatterns: [`/node_modules`],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.svelte$': 'svelte-jester',
-  },
-  moduleFileExtensions: ['js', 'svelte'],
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-};
--- a/packages/lucide-svelte/package.json
+++ b/packages/lucide-svelte/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-svelte",
  "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.102.0",
+  "version": "0.104.0-beta.6",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -12,42 +12,45 @@
  },
  "author": "Eric Fennis",
  "amdName": "lucide-svelte",
-  "main": "dist/cjs/lucide-svelte.js",
-  "main:umd": "dist/umd/lucide-svelte.js",
+  "type": "module",
+  "main": "dist/esm/lucide-svelte.js",
  "module": "dist/esm/lucide-svelte.js",
-  "svelte": "dist/esm/lucide-svelte.js",
-  "unpkg": "dist/umd/lucide-svelte.min.js",
+  "svelte": "dist/svelte/lucide-svelte.js",
  "typings": "dist/lucide-svelte.d.ts",
  "sideEffects": false,
  "files": [
    "dist"
  ],
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles && pnpm build:types",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:strip && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.svelte && rm -f index.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.js --iconFileExtention=.svelte --pretty=false",
-    "build:es": "babel src -d dist/esm --copy-files",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.ts --iconFileExtension=.svelte --pretty=false",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "build:strip": "svelte-strip strip src/ dist/svelte",
+    "test": "vitest",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@sveltejs/vite-plugin-svelte": "^1.2.0",
    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/preact": "^2.0.1",
    "@testing-library/svelte": "^3.0.3",
-    "babel-preset-preact": "^2.0.0",
-    "jest": "^28.1.3",
+    "@tsconfig/svelte": "^3.0.0",
+    "jsdom": "^20.0.3",
+    "rollup": "^3.5.1",
    "rollup-plugin-svelte": "^7.1.0",
-    "svelte": "^3.49.0",
-    "svelte-jester": "^2.3.1",
-    "svelte-preprocess": "^4.10.1",
-    "svelte2tsx": "^0.4.12"
+    "svelte": "^3.53.1",
+    "svelte-check": "^2.9.2",
+    "svelte-preprocess": "^4.10.7",
+    "svelte-strip": "^1.0.3",
+    "typescript": "^4.9.3",
+    "vite": "^3.1.0",
+    "vitest": "^0.23.2"
  },
  "peerDependencies": {
-    "svelte": "^3.49.0",
-    "svelte2tsx": "^0.4.12"
+    "svelte": "^3.49.0"
  }
 }
--- a/packages/lucide-svelte/rollup.config.mjs
+++ b/packages/lucide-svelte/rollup.config.mjs
@@ -1,66 +1,76 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import svelte from 'rollup-plugin-svelte';
-import preprocess from 'svelte-preprocess';
-import bundleSize from '@atomico/rollup-plugin-sizes';
-import { terser } from 'rollup-plugin-terser';
-import license from 'rollup-plugin-license';
-import resolve from '@rollup/plugin-node-resolve';
-import commonJS from '@rollup/plugin-commonjs';
 import pkg from './package.json' assert { type: 'json' };
+import plugins from '@lucide/rollup-plugins';
+import resolve from '@rollup/plugin-node-resolve';
+import svelteConfig from './svelte.config.js';

 const packageName = 'LucideSvelte';
 const outputFileName = 'lucide-svelte';
 const outputDir = 'dist';
-const inputs = ['./src/lucide-svelte.js'];
+const inputs = ['./src/lucide-svelte.ts'];
 const bundles = [
+  // Not sure if this one is needed for Svelte
+  // {
+  //   format: 'cjs',
+  //   inputs,
+  //   outputDir,
+  // },
  {
-    format: 'umd',
+    format: 'es',
    inputs,
    outputDir,
-    minify: true,
-    sourcemap: true,
  },
  {
-    format: 'umd',
+    format: 'esm',
    inputs,
    outputDir,
-    sourcemap: true,
+    preserveModules: true,
  },
  {
-    format: 'cjs',
+    format: 'svelte',
    inputs,
    outputDir,
-    sourcemap: true,
+    preserveModules: true,
  },
 ];

 const configs = bundles
-  .map(({ inputs, outputDir, format, minify }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
    inputs.map(input => ({
      input,
      plugins: [
-        svelte({
-          preprocess,
-          compilerOptions: {
-            dev: false,
-          },
-          emitCss: false,
-        }),
-        resolve(),
-        commonJS({
-          include: 'node_modules/**',
-        }),
-        minify && terser(),
-        license({
-          banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
-        }),
-        bundleSize(),
+        ...(format !== 'svelte' ? [
+          svelte({
+            ...svelteConfig,
+            include: 'src/**/*.svelte',
+            compilerOptions: {
+              dev: false,
+              css: false,
+              hydratable: true,
+            },
+            emitCss: false,
+          }),
+          resolve({
+            browser: true,
+            exportConditions: ['svelte'],
+            extensions: ['.svelte']
+          }),
+        ] : []),
+        ...plugins(pkg, minify),
      ],
-      external: ['svelte'],
+      external: format === 'svelte' ? [/\.svelte/] : ['svelte'],
      output: {
        name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
-        format,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
+        preserveModules,
+        format: format === 'svelte' ? 'esm' : format,
        sourcemap: true,
        globals: {
          svelte: 'svelte',
--- a/packages/lucide-svelte/scripts/buildTypes.mjs
+++ b/packages/lucide-svelte/scripts/buildTypes.mjs
@@ -5,16 +5,16 @@ import {
  resetFile,
  toPascalCase,
  appendFile,
-  getCurrentDirPath
+  getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';

-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 const srcDirectory = path.join(currentDir, '../dist');

 // Declare type definitions
 const typeDefinitions = `\
 /// <reference types="svelte" />
-/// <reference types="svelte2tsx/svelte-jsx" />
+/// <reference types="svelte-check/dist/src/svelte-jsx" />
 import { SvelteComponentTyped } from "svelte";

 interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
@@ -41,7 +41,7 @@ writeFile(typeDefinitions, TYPES_FILE, srcDirectory);

 const svgFiles = readSvgDirectory(ICONS_DIR);

-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
  const iconName = path.basename(svgFile, '.svg');
  const componentName = toPascalCase(iconName);

--- a/packages/lucide-svelte/scripts/exportTemplate.mjs
+++ b/packages/lucide-svelte/scripts/exportTemplate.mjs
@@ -1,17 +1,14 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { stringify } from 'svgson';
-
-export default ({ iconName, children }) => {
-  const iconChildNodes = children.map(([name, attributes]) => ({ name, attributes, children: [] }));
-  const iconChildrenHTML = iconChildNodes.map(stringify).join('\n  ');
-  return `\
-<script>
+export default ({ iconName, children }) =>
+  `\
+<script lang="ts">
 import Icon from '../Icon.svelte';
+import type { IconNode } from '../types';
+
+const iconNode: IconNode = ${JSON.stringify(children)};
 </script>

-<Icon name="${iconName}" {...$$props} >
-  ${iconChildrenHTML}
+<Icon name="${iconName}" {...$$props} iconNode={iconNode}>
  <slot/>
 </Icon>
 `;
-};
--- a/packages/lucide-svelte/src/Icon.svelte
+++ b/packages/lucide-svelte/src/Icon.svelte
@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
  import defaultAttributes from './defaultAttributes'
-  export let name
+  import type { IconNode } from './types';
+
+  export let name: string
  export let color = 'currentColor'
  export let size = 24
  export let strokeWidth = 2
+  export let iconNode: IconNode
 </script>

 <svg
@@ -15,5 +18,8 @@
  stroke-width={strokeWidth}
  class={`lucide-icon lucide lucide-${name} ${$$props.class ?? ''}`}
 >
+  {#each iconNode as [tag, attrs]}
+    <svelte:element this={tag} {...attrs}/>
+  {/each}
  <slot />
 </svg>
--- a/packages/lucide-svelte/src/defaultAttributes.ts
+++ b/packages/lucide-svelte/src/defaultAttributes.ts
@@ -1,4 +1,6 @@
-export default {
+import type { Attrs } from "./types";
+
+const defaultAttributes: Attrs = {
  xmlns: 'http://www.w3.org/2000/svg',
  width: 24,
  height: 24,
@@ -9,3 +11,5 @@ export default {
  'stroke-linecap': 'round',
  'stroke-linejoin': 'round',
 };
+
+export default defaultAttributes;
--- a/packages/lucide-svelte/src/lucide-svelte.ts
+++ b/packages/lucide-svelte/src/lucide-svelte.ts
@@ -0,0 +1,2 @@
+export * from './icons';
+export { default as defaultAttributes } from './defaultAttributes'
--- a/packages/lucide-svelte/src/types.ts
+++ b/packages/lucide-svelte/src/types.ts
@@ -0,0 +1,5 @@
+/// <reference types="svelte" />
+/// <reference types="svelte2tsx/svelte-jsx" />
+
+export type Attrs = svelte.JSX.SVGProps<SVGSVGElement>
+export type IconNode = [elementName: keyof svelte.JSX.IntrinsicElements, attrs: Attrs][]
--- a/packages/lucide-svelte/svelte.config.js
+++ b/packages/lucide-svelte/svelte.config.js
@@ -1,6 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const sveltePreprocess = require('svelte-preprocess');
+import sveltePreprocess from 'svelte-preprocess';

-module.exports = {
-  preprocess: sveltePreprocess(),
+export default {
+  preprocess: sveltePreprocess({
+    typescript: true,
+  }),
 };
--- a/packages/lucide-svelte/tests/TestSlots.svelte
+++ b/packages/lucide-svelte/tests/TestSlots.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import Smile from '../src/icons/smile.svelte'
 </script>

--- a/packages/lucide-svelte/tests/snapshots/lucide-svelte.spec.ts.snap
+++ b/packages/lucide-svelte/tests/snapshots/lucide-svelte.spec.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1

-exports[`Using lucide icon components should add a class to the element 1`] = `
+exports[`Using lucide icon components > should add a class to the element 1`] = `
 <svg
  class="lucide-icon lucide lucide-smile my-icon"
  fill="none"
@@ -18,29 +18,30 @@ exports[`Using lucide icon components should add a class to the element 1`] = `
    cy="12"
    r="10"
  />
-   
+  
  <path
    d="M8 14s1.5 2 4 2 4-2 4-2"
  />
-   
+  
  <line
    x1="9"
    x2="9.01"
    y1="9"
    y2="9"
  />
-   
+  
  <line
    x1="15"
    x2="15.01"
    y1="9"
    y2="9"
  />
-   
+  
+  
 </svg>
 `;

-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
 <body>
  <div>
    <svg
@@ -60,31 +61,32 @@ exports[`Using lucide icon components should adjust the size, stroke color and s
        cy="12"
        r="10"
      />
-       
+      
      <path
        d="M8 14s1.5 2 4 2 4-2 4-2"
      />
-       
+      
      <line
        x1="9"
        x2="9.01"
        y1="9"
        y2="9"
      />
-       
+      
      <line
        x1="15"
        x2="15.01"
        y1="9"
        y2="9"
      />
-       
+      
+      
    </svg>
  </div>
 </body>
 `;

-exports[`Using lucide icon components should render an component 1`] = `
+exports[`Using lucide icon components > should render an component 1`] = `
 <body>
  <div>
    <svg
@@ -104,31 +106,32 @@ exports[`Using lucide icon components should render an component 1`] = `
        cy="12"
        r="10"
      />
-       
+      
      <path
        d="M8 14s1.5 2 4 2 4-2 4-2"
      />
-       
+      
      <line
        x1="9"
        x2="9.01"
        y1="9"
        y2="9"
      />
-       
+      
      <line
        x1="15"
        x2="15.01"
        y1="9"
        y2="9"
      />
-       
+      
+      
    </svg>
  </div>
 </body>
 `;

-exports[`Using lucide icon components should render an icon slot 1`] = `
+exports[`Using lucide icon components > should render an icon slot 1`] = `
 <body>
  <div>
    <svg
@@ -148,25 +151,26 @@ exports[`Using lucide icon components should render an icon slot 1`] = `
        cy="12"
        r="10"
      />
-       
+      
      <path
        d="M8 14s1.5 2 4 2 4-2 4-2"
      />
-       
+      
      <line
        x1="9"
        x2="9.01"
        y1="9"
        y2="9"
      />
-       
+      
      <line
        x1="15"
        x2="15.01"
        y1="9"
        y2="9"
      />
-       
+      
+      
      <text>
        Test
      </text>
--- a/packages/lucide-svelte/tests/lucide-svelte.spec.ts
+++ b/packages/lucide-svelte/tests/lucide-svelte.spec.ts
@@ -1,8 +1,10 @@
-import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
 import { Smile } from '../src/icons'
 import TestSlots from './TestSlots.svelte'

 describe('Using lucide icon components', () => {
+  afterEach(() => cleanup())
  it('should render an component', () => {
    const { container } = render(Smile);
    expect(container).toMatchSnapshot();
--- a/packages/lucide-svelte/tests/setupVitest.ts
+++ b/packages/lucide-svelte/tests/setupVitest.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/packages/lucide-svelte/tsconfig.json
+++ b/packages/lucide-svelte/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "tests/**/*.ts"
+  ],
+}
--- a/packages/lucide-svelte/vitest.config.ts
+++ b/packages/lucide-svelte/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default defineConfig({
+  plugins: [svelte({ hot: false })],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/setupVitest.ts',
+    threads: false,
+    isolate: false,
+  },
+});
--- a/packages/lucide-vue-next/babel.config.js
+++ b/packages/lucide-vue-next/babel.config.js
@@ -1,14 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
-  env: mainConfig.env,
-};
--- a/packages/lucide-vue-next/jest.config.js
+++ b/packages/lucide-vue-next/jest.config.js
@@ -1,15 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
-  },
-  transformIgnorePatterns: [`/node_modules`],
-  snapshotSerializers: ['jest-serializer-vue'],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-};
--- a/packages/lucide-vue-next/package.json
+++ b/packages/lucide-vue-next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue-next",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 3 applications",
  "license": "ISC",
@@ -24,24 +24,27 @@
    "nuxt.js"
  ],
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
    "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs  --renderUniqueKey",
-    "build:es": "babel src -d dist/esm",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
    "build:types": "node ./scripts/buildTypes.mjs",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
-    "test:watch": "jest --watchAll",
+    "test": "vitest",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
-    "@testing-library/vue": "^6.4.2",
-    "@vue/compiler-sfc": "3.0.6",
-    "@vue/test-utils": "2.0.0-rc.18",
-    "jest-serializer-vue": "^2.0.2",
-    "vue": "3.0.6",
-    "vue-jest": "^5.0.0-alpha.10"
+    "@lucide/rollup-plugins": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/vue": "^6.6.1",
+    "@vue/compiler-sfc": "3.2.45",
+    "@vue/test-utils": "2.2.4",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "rollup": "^3.5.1",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3",
+    "vue": "3.2.45",
+    "jsdom": "^20.0.3"
  },
  "peerDependencies": {
    "vue": ">=3.0.1"
--- a/packages/lucide-vue-next/rollup.config.mjs
+++ b/packages/lucide-vue-next/rollup.config.mjs
@@ -1,10 +1,10 @@
-import plugins from '../../rollup.plugins.mjs';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };

 const packageName = 'LucideVueNext';
 const outputFileName = 'lucide-vue-next';
 const outputDir = 'dist';
-const inputs = ['src/lucide-vue-next.js'];
+const inputs = ['src/lucide-vue-next.ts'];
 const bundles = [
  {
    format: 'umd',
@@ -22,18 +22,36 @@ const bundles = [
    inputs,
    outputDir,
  },
+  {
+    format: 'es',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
 ];

 const configs = bundles
-  .map(({ inputs, outputDir, format, minify }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
    inputs.map(input => ({
      input,
      plugins: plugins(pkg, minify),
      external: ['vue'],
      output: {
        name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
        format,
+        preserveModules,
        sourcemap: true,
        globals: {
          vue: 'vue',
--- a/packages/lucide-vue-next/scripts/buildTypes.mjs
+++ b/packages/lucide-vue-next/scripts/buildTypes.mjs
@@ -5,10 +5,10 @@ import {
  resetFile,
  appendFile,
  toPascalCase,
-  getCurrentDirPath
+  getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';

-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);

 const TARGET_DIR = path.join(currentDir, '../dist');
 const ICONS_DIR = path.resolve(currentDir, '../../../icons');
@@ -32,7 +32,7 @@ appendFile(typeDefinitions, TYPES_FILE_NAME, TARGET_DIR);

 const svgFiles = readSvgDirectory(ICONS_DIR);

-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
  const nameSvg = path.basename(svgFile, '.svg');
  const componentName = toPascalCase(nameSvg);

--- a/packages/lucide-vue-next/src/createVueComponent.ts
+++ b/packages/lucide-vue-next/src/createVueComponent.ts
@@ -1,6 +1,15 @@
 import { h } from 'vue';
+import type { SVGAttributes, FunctionalComponent } from 'vue';
 import defaultAttributes from './defaultAttributes';

+// Create interface extending SVGAttributes
+export interface SVGProps extends Partial<SVGAttributes> {
+  size?: 24 | number
+}
+
+
+type IconNode = [elementName: string, attrs: Record<string, string>][]
+
 /**
 * Converts string to KebabCase
 * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -9,11 +18,11 @@ import defaultAttributes from './defaultAttributes';
 * @param {string} string
 * @returns {string} A kebabized string
 */
-export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

-const createVueComponent = (iconName, iconNode) => (
+const createVueComponent = (iconName: string, iconNode: IconNode): FunctionalComponent<SVGProps> => (
  { size, color, ...props }, // props
-  { attrs, emit, slots } // context
+  { attrs, slots } // context
  ) => {
  return h(
    'svg',
--- a/packages/lucide-vue-next/src/defaultAttributes.ts
+++ b/packages/lucide-vue-next/src/defaultAttributes.ts
--- a/packages/lucide-vue-next/src/lucide-vue-next.ts
+++ b/packages/lucide-vue-next/src/lucide-vue-next.ts
--- a/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.ts.snap
+++ b/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1

-exports[`Using lucide icon components should add a class to the element 1`] = `
+exports[`Using lucide icon components > should add a class to the element 1`] = `
 <div>
  <svg
    class="my-icon"
@@ -38,7 +38,7 @@ exports[`Using lucide icon components should add a class to the element 1`] = `
 </div>
 `;

-exports[`Using lucide icon components should add a style attribute to the element 1`] = `
+exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
 <div>
  <svg
    class="lucide lucide-smile-icon"
@@ -77,7 +77,7 @@ exports[`Using lucide icon components should add a style attribute to the elemen
 </div>
 `;

-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
 <div>
  <svg
    class="lucide lucide-smile-icon"
@@ -117,7 +117,7 @@ exports[`Using lucide icon components should adjust the size, stroke color and s
 </div>
 `;

-exports[`Using lucide icon components should pass children to the icon slot 1`] = `
+exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
 <div>
  <svg
    class="lucide lucide-smile-icon"
@@ -160,7 +160,7 @@ exports[`Using lucide icon components should pass children to the icon slot 1`]
 </div>
 `;

-exports[`Using lucide icon components should render an component 1`] = `
+exports[`Using lucide icon components > should render an component 1`] = `
 <div>
  <svg
    class="lucide lucide-smile-icon"
--- a/packages/lucide-vue-next/tests/lucide-vue-next.spec.ts
+++ b/packages/lucide-vue-next/tests/lucide-vue-next.spec.ts
@@ -1,7 +1,10 @@
-import {render, fireEvent} from '@testing-library/vue'
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import {render, fireEvent, cleanup } from '@testing-library/vue'
 import { Smile } from '../src/icons'

 describe('Using lucide icon components', () => {
+  afterEach(() => cleanup())
+
  it('should render an component', () => {
    const { container } = render(Smile)
    expect(container).toMatchSnapshot();
@@ -55,7 +58,7 @@ describe('Using lucide icon components', () => {
  });

  it('should call the onClick event', async () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
    render(Smile, {
      attrs: {
        onClick,
--- a/packages/lucide-vue-next/tests/setupVitest.js
+++ b/packages/lucide-vue-next/tests/setupVitest.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/packages/lucide-vue-next/tsconfig.json
+++ b/packages/lucide-vue-next/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+}
--- a/packages/lucide-vue-next/vitest.config.ts
+++ b/packages/lucide-vue-next/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/setupVitest.js',
+  },
+});
--- a/packages/lucide-vue/babel.config.js
+++ b/packages/lucide-vue/babel.config.js
@@ -1,14 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
-  env: mainConfig.env,
-};
--- a/packages/lucide-vue/jest.config.js
+++ b/packages/lucide-vue/jest.config.js
@@ -1,15 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
-  },
-  transformIgnorePatterns: [`/node_modules`],
-  snapshotSerializers: ['jest-serializer-vue'],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-};
--- a/packages/lucide-vue/package.json
+++ b/packages/lucide-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue",
-  "version": "0.102.0",
+  "version": "0.103.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 2 applications",
  "license": "ISC",
@@ -23,24 +23,27 @@
    "nuxt.js"
  ],
  "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
    "copy:license": "cp ../../LICENSE ./LICENSE",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs",
-    "build:es": "babel src -d dist/esm",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtention=.ts --exportFileName=index.ts",
    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
-    "test:watch": "jest --watchAll",
+    "test": "vitest",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
+    "@lucide/rollup-plugins": "workspace:*",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/vue": "^5.8.2",
+    "@vitejs/plugin-vue2": "^2.0.1",
    "@vue/test-utils": "1.3.0",
    "jest-serializer-vue": "^2.0.2",
-    "vue": "2.6.14",
-    "vue-jest": "^3.0.7",
-    "vue-template-compiler": "2.6.14"
+    "rollup": "^3.5.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3",
+    "vue": "2.7.14",
+    "vue-template-compiler": "2.7.14"
  },
  "peerDependencies": {
    "vue": "^2.6.12"
--- a/Show More
+++ b/Show More