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

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
-    ecmaVersion: 2020,
+    ecmaVersion: 'latest',
+    sourceType: 'module',
   },
 };

.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:

.github/workflows/lucide-font.yml

@@ -5,10 +5,6 @@ on:
     paths:
       - icons/**
       - pnpm-lock.yaml
-  push:
-    paths:
-      - icons/**
-      - pnpm-lock.yaml
 
 jobs:
   lucide-font:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.github/workflows/lucide.yml

@@ -5,10 +5,6 @@ on:
     paths:
       - packages/lucide/**
       - pnpm-lock.yaml
-  push:
-    paths:
-      - packages/lucide/**
-      - pnpm-lock.yaml
 
 jobs:
   lucide:

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'],
-          },
-        ],
-      ],
-    },
-  },
-};

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"
+      ]
+    }
+  }
 }

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",

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
 

packages/lucide-preact/babel.config.js

@@ -1,6 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: ['preact'],
-  env: mainConfig.env,
-};

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',
-  },
-};

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:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
-    "build:es": "babel src -d dist/esm",
     "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",
+    "preact": "^10.11.2",
-    "jest": "^26.6.3",
+    "rollup": "^3.5.1",
-    "preact": "^10.5.13"
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
   },
   "peerDependencies": {
     "preact": "^10.5.13"

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: {

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;
-};

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

packages/lucide-preact/src/defaultAttributes.ts

@@ -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',
 };

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>"`;

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>"`;

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'
 

packages/lucide-preact/tests/setupVitest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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"]
+}

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'],
+  },
+});

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

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'],
-    },
-  },
-};

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',
-  },
-};

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",
+    "@types/prop-types": "^15.7.5",
-    "jest": "^26.6.3",
+    "@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",

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',
         },
       },
     })),

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);
 

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);
+            const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg);
-            return createElement(NativeSvg[uppercasedTag], attrs);
+            return createElement(NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>, attrs);
           }),
-          ...(children || []),
+          ...(children as ReactNode[] || []),
         ],
       ),
   );

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>"`;

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>"`;

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 as unknown as Attributes).stroke.value).toBe('red');
-    expect(attributes.width.value).toBe('48');
+    expect((attributes as unknown as Attributes).width.value).toBe('48');
-    expect(attributes.height.value).toBe('48');
+    expect((attributes as unknown as Attributes).height.value).toBe('48');
-    expect(attributes['stroke-width'].value).toBe('4');
+    expect((attributes as unknown as Attributes)['stroke-width'].value).toBe('4');
 
     expect( container.innerHTML ).toMatchSnapshot();
   });

packages/lucide-react-native/tests/setupVitest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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",
+  ]
+}

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,
+  },
+});

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'],
-    },
-  },
-};

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',
-  },
-};

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",
+    "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",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
-    "build:es": "babel src -d dist/esm",
     "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",
+    "@types/prop-types": "^15.7.5",
-    "jest": "^26.6.3",
+    "@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",

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',
+          'prop-types': 'PropTypes'
-          lucide: 'lucide',
         },
       },
     })),

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);
 

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 createReactComponent = (iconName: string, iconNode: IconNode) => {
-  const Component = forwardRef(
+  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

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>"`;

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>"`;

packages/lucide-react/tests/lucide-react.spec.tsx

@@ -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');

packages/lucide-react/tests/setupVitest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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"]
+}

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'],
+  },
+});

packages/lucide-solid/babel.config.js

@@ -1,6 +0,0 @@
-const mainConfig = require('../../babel.config');
-
-module.exports = {
-  presets: ['solid'],
-  env: mainConfig.env,
-};

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:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts",
-    "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test:jest": "jest",
+    "test": "vitest run",
-    "test": "vitest",
     "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": "^3.2.4",
-    "vite": "^2.6.4",
     "vite-plugin-solid": "^2.3.0",
     "vitest": "^0.23.2"
   },

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: {

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);
 

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) => {
+export default (iconName: string, iconNode: IconNode) => {
-  const Component = props => {
+  const Component = (props: LucideProps) => {
     const [localProps, rest] = splitProps(props, [
       'color',
       'size',

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,
-};

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'],
-};

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",
+  "type": "module",
-  "main:umd": "dist/umd/lucide-svelte.js",
+  "main": "dist/esm/lucide-svelte.js",
   "module": "dist/esm/lucide-svelte.js",
-  "svelte": "dist/esm/lucide-svelte.js",
+  "svelte": "dist/svelte/lucide-svelte.js",
-  "unpkg": "dist/umd/lucide-svelte.min.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:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.ts --iconFileExtension=.svelte --pretty=false",
-    "build:es": "babel src -d dist/esm --copy-files",
     "build:types": "node ./scripts/buildTypes.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "build:strip": "svelte-strip strip src/ dist/svelte",
-    "test:watch": "jest --watch",
+    "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",
+    "@tsconfig/svelte": "^3.0.0",
-    "jest": "^28.1.3",
+    "jsdom": "^20.0.3",
+    "rollup": "^3.5.1",
     "rollup-plugin-svelte": "^7.1.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.53.1",
-    "svelte-jester": "^2.3.1",
+    "svelte-check": "^2.9.2",
-    "svelte-preprocess": "^4.10.1",
+    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.4.12"
+    "svelte-strip": "^1.0.3",
+    "typescript": "^4.9.3",
+    "vite": "^3.1.0",
+    "vitest": "^0.23.2"
   },
   "peerDependencies": {
-    "svelte": "^3.49.0",
+    "svelte": "^3.49.0"
-    "svelte2tsx": "^0.4.12"
   }
 }

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({
+        ...(format !== 'svelte' ? [
-          preprocess,
+          svelte({
-          compilerOptions: {
+            ...svelteConfig,
-            dev: false,
+            include: 'src/**/*.svelte',
-          },
+            compilerOptions: {
-          emitCss: false,
+              dev: false,
-        }),
+              css: false,
-        resolve(),
+              hydratable: true,
-        commonJS({
+            },
-          include: 'node_modules/**',
+            emitCss: false,
-        }),
+          }),
-        minify && terser(),
+          resolve({
-        license({
+            browser: true,
-          banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
+            exportConditions: ['svelte'],
-        }),
+            extensions: ['.svelte']
-        bundleSize(),
+          }),
+        ] : []),
+        ...plugins(pkg, minify),
       ],
-      external: ['svelte'],
+      external: format === 'svelte' ? [/\.svelte/] : ['svelte'],
       output: {
         name: packageName,
-        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        ...(preserveModules
-        format,
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
+        preserveModules,
+        format: format === 'svelte' ? 'esm' : format,
         sourcemap: true,
         globals: {
           svelte: 'svelte',

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);
 

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 }) =>
-
+  `\
-export default ({ iconName, children }) => {
+<script lang="ts">
-  const iconChildNodes = children.map(([name, attributes]) => ({ name, attributes, children: [] }));
-  const iconChildrenHTML = iconChildNodes.map(stringify).join('\n  ');
-  return `\
-<script>
 import Icon from '../Icon.svelte';
+import type { IconNode } from '../types';
+
+const iconNode: IconNode = ${JSON.stringify(children)};
 </script>
 
-<Icon name="${iconName}" {...$$props} >
+<Icon name="${iconName}" {...$$props} iconNode={iconNode}>
-  ${iconChildrenHTML}
   <slot/>
 </Icon>
 `;
-};

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>

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;

packages/lucide-svelte/src/lucide-svelte.ts

@@ -0,0 +1,2 @@
+export * from './icons';
+export { default as defaultAttributes } from './defaultAttributes'

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][]

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 = {
+export default {
-  preprocess: sveltePreprocess(),
+  preprocess: sveltePreprocess({
+    typescript: true,
+  }),
 };

packages/lucide-svelte/tests/TestSlots.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Smile from '../src/icons/smile.svelte'
 </script>
 

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"
@@ -37,10 +37,11 @@ exports[`Using lucide icon components should add a class to the element 1`] = `
     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
@@ -79,12 +80,13 @@ exports[`Using lucide icon components should adjust the size, stroke color and s
         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
@@ -123,12 +125,13 @@ exports[`Using lucide icon components should render an component 1`] = `
         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
@@ -167,6 +170,7 @@ exports[`Using lucide icon components should render an icon slot 1`] = `
         y2="9"
       />
       
+      
       <text>
         Test
       </text>

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();

packages/lucide-svelte/tests/setupVitest.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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"
+  ],
+}

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,
+  },
+});

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,
-};

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'],
-};

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",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
-    "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:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "test": "vitest",
-    "test:watch": "jest --watchAll",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@testing-library/vue": "^6.4.2",
+    "@lucide/rollup-plugins": "workspace:*",
-    "@vue/compiler-sfc": "3.0.6",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@vue/test-utils": "2.0.0-rc.18",
+    "@testing-library/vue": "^6.6.1",
-    "jest-serializer-vue": "^2.0.2",
+    "@vue/compiler-sfc": "3.2.45",
-    "vue": "3.0.6",
+    "@vue/test-utils": "2.2.4",
-    "vue-jest": "^5.0.0-alpha.10"
+    "@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"

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',

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);
 

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',

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"

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,

packages/lucide-vue-next/tests/setupVitest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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"],
+}

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',
+  },
+});

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,
-};

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'],
-};

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:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtention=.ts --exportFileName=index.ts",
-    "build:es": "babel src -d dist/esm",
     "build:bundles": "rollup -c ./rollup.config.mjs",
-    "test": "jest",
+    "test": "vitest",
-    "test:watch": "jest --watchAll",
     "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",
+    "rollup": "^3.5.1",
-    "vue-jest": "^3.0.7",
+    "typescript": "^4.8.4",
-    "vue-template-compiler": "2.6.14"
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3",
+    "vue": "2.7.14",
+    "vue-template-compiler": "2.7.14"
   },
   "peerDependencies": {
     "vue": "^2.6.12"

packages/lucide-vue/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 = 'LucideVue';
 const outputFileName = 'lucide-vue';
 const outputDir = 'dist';
-const inputs = ['src/lucide-vue.js'];
+const inputs = ['src/lucide-vue.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',