Remove exports lucide-react

Language improvements for introduction text (#895 )
* Language improvements for introduction text * Updated number of icons
2025-12-17 01:17:41 +01:00 · 2022-12-05 14:26:07 +01:00 · 2022-12-04 22:49:57 +01:00 · 2022-12-04 21:45:15 +00:00 · 2022-12-04 22:38:56 +01:00 · 2022-11-30 10:29:46 +00:00
136 changed files with 3662 additions and 4312 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/docs/index.md
+++ b/docs/index.md
@@ -6,16 +6,15 @@ nextPage:
 ---

 # Introduction
+Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.

-An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
+Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons. 

-Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
+With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.

-With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
+When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.

-When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
-
-Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
+Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.

 Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).

--- 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.104.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.104.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.104.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.104.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.104.1",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -22,23 +22,31 @@
    "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",
  "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.104.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/Show More
+++ b/Show More
Author	SHA1	Message	Date
Eric Fennis	c784dd09c7	Remove exports lucide-react	2022-12-05 14:26:07 +01:00
Markus Napp	0f11acdd7f	Language improvements for introduction text (#895 ) * Language improvements for introduction text * Updated number of icons	2022-12-04 22:49:57 +01:00
Lucide Bot	2149645895	📦 Bump lucide package versions to 0.104.0	2022-12-04 21:45:15 +00:00
Eric Fennis	fa6ed02297	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	2022-12-04 22:38:56 +01:00
Lucide Bot	4a2c6ed8b0	📦 Bump lucide package versions to 0.103.0	2022-11-30 10:29:46 +00:00