refactor: Adds repo shared package @lucide/shared (#1904)

* Fixed import of toKebabCase helper function

* Added utils package

* utils

* Make utils package work in build

* Add lucide-shared

* Transpile solid with esbuild

* Fix resolve modules

* Cleanup

* Format files

* Fix properties plugins function

* Fix properties plugins in lucide package

* Revert remove resolve plugin and cleanup

* Update snapshots

* Revert icon changes

---------

Co-authored-by: Rohan <rohancrrm@gmail.com>

packages/lucide-figma/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.36.0",
+    "@lucide/shared": "workspace:*",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",

packages/lucide-figma/src/helpers/createIconComponent.ts

@@ -1,5 +1,6 @@
 import { forwardRef, createElement, SVGProps } from 'react';
 import { IconNode } from '../api/fetchIcons';
+import { toKebabCase } from '@lucide/shared';
 
 const defaultAttributes = {
   xmlns: 'http://www.w3.org/2000/svg',
@@ -17,17 +18,6 @@ export interface LucideProps extends Partial<SVGProps<SVGSVGElement>> {
   size?: string | number;
 }
 
-/**
- * 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 createIconComponent = (iconName: string, iconNode: IconNode) => {
   const Component = forwardRef<SVGSVGElement, LucideProps>(
     ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>

packages/lucide-preact/package.json

@@ -44,6 +44,7 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@preact/preset-vite": "^2.7.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/preact": "^3.2.3",

packages/lucide-preact/rollup.config.mjs

@@ -1,4 +1,4 @@
-import plugins, { replace } from '@lucide/rollup-plugins';
+import plugins from '@lucide/rollup-plugins';
 import dts from 'rollup-plugin-dts';
 import pkg from './package.json' assert { type: 'json' };
 
@@ -35,7 +35,7 @@ const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
     inputs.map((input) => ({
       input,
-      plugins: plugins(pkg, minify),
+      plugins: plugins({ pkg, minify }),
       external: ['preact'],
       output: {
         name: packageName,
@@ -49,6 +49,7 @@ const configs = bundles
         preserveModules,
         format,
         sourcemap: true,
+        preserveModulesRoot: 'src',
         globals: {
           preact: 'preact',
         },

packages/lucide-preact/src/createLucideIcon.ts

@@ -1,5 +1,6 @@
 import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase } from '@lucide/shared';
 
 export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
 
@@ -13,16 +14,11 @@ export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'si
 export type LucideIcon = FunctionComponent<LucideProps>;
 
 /**
- * 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
+ * Create a Lucide icon component
+ * @param {string} iconName
+ * @param {array} iconNode
+ * @returns {FunctionComponent} LucideIcon
  */
-export const toKebabCase = (string: string) =>
-  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   const Component = ({
     color = 'currentColor',

packages/lucide-react-native/rollup.config.mjs

@@ -25,7 +25,7 @@ const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
     inputs.map((input) => ({
       input,
-      plugins: plugins(pkg, minify),
+      plugins: plugins({ pkg, minify }),
       external: ['react', 'react-native-svg'],
       output: {
         name: packageName,

packages/lucide-react/package.json

@@ -51,6 +51,7 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.37",

packages/lucide-react/rollup.config.mjs

@@ -1,4 +1,4 @@
-import plugins, { replace } from '@lucide/rollup-plugins';
+import plugins from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };
 import dts from 'rollup-plugin-dts';
 import getAliasesEntryNames from './scripts/getAliasesEntryNames.mjs';
@@ -62,7 +62,7 @@ const configs = bundles
     }) =>
       inputs.map((input) => ({
         input,
-        plugins: plugins(pkg, minify),
+        plugins: plugins({ pkg, minify }),
         external: ['react', 'prop-types', ...external],
         output: {
           name: packageName,
@@ -80,6 +80,7 @@ const configs = bundles
           format,
           sourcemap: true,
           preserveModules,
+          preserveModulesRoot: 'src',
           globals: {
             react: 'react',
             'prop-types': 'PropTypes',

packages/lucide-react/src/createLucideIcon.ts

@@ -7,6 +7,7 @@ import {
   RefAttributes,
 } from 'react';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase } from '@lucide/shared';
 
 export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
 
@@ -19,19 +20,6 @@ export interface LucideProps extends ComponentAttributes {
 }
 
 export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
-/**
- * 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()
-    .trim();
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   const Component = forwardRef<SVGSVGElement, LucideProps>(

packages/lucide-solid/package.json

@@ -42,31 +42,33 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle && pnpm build:version",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
-    "build:transpile": "tsc --jsx preserve -t es2020 --rootDir src --outDir dist --noEmit false",
-    "build:version": "node ./scripts/replaceVersion.mjs",
     "build:bundle": "rollup -c rollup.config.mjs",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
     "test": "vitest run",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@atomico/rollup-plugin-sizes": "^1.1.4",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-typescript": "^7.23.3",
     "@lucide/build-icons": "workspace:*",
-    "@solidjs/testing-library": "^0.8.5",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/shared": "workspace:*",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@solidjs/testing-library": "^0.8.6",
+    "@testing-library/jest-dom": "^6.4.2",
+    "babel-preset-solid": "^1.8.12",
     "jest-serializer-html": "^7.1.0",
-    "jsdom": "^23.0.1",
     "rollup": "^4.9.2",
-    "rollup-plugin-license": "^3.0.1",
-    "rollup-preset-solid": "^2.0.1",
     "solid-js": "^1.8.7",
     "typescript": "^4.9.4",
     "vite": "5.0.12",
-    "vite-plugin-solid": "^2.8.0",
-    "vitest": "0.34.2"
+    "vite-plugin-solid": "^2.10.1",
+    "vitest": "^1.1.1",
+    "esbuild": "^0.19.11"
   },
   "peerDependencies": {
     "solid-js": "^1.4.7"

packages/lucide-solid/rollup.config.mjs

@@ -1,20 +1,127 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import withSolid from 'rollup-preset-solid';
-import bundleSize from '@atomico/rollup-plugin-sizes';
-import license from 'rollup-plugin-license';
+import path from 'path';
+import { babel } from '@rollup/plugin-babel';
+import esbuild from 'esbuild';
+import plugins from '@lucide/rollup-plugins';
+import ts from 'typescript';
 
 import pkg from './package.json' assert { type: 'json' };
 
-const config = withSolid({
-  targets: ['esm', 'cjs'],
-});
+const packageName = 'LucideSolid';
+const outputFileName = 'lucide-solid';
+const outputDir = 'dist';
+const inputs = ['src/lucide-solid.ts'];
 
-config.plugins = [
-  ...config.plugins,
-  license({
-    banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
-  }),
-  bundleSize(),
+const bundles = [
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+  },
 ];
 
-export default config;
+const configs = bundles
+  .map(({ inputs, outputDir, format, preserveModules }) =>
+    inputs.map((input) => ({
+      input,
+      plugins: [
+        babel({
+          extensions: ['.ts', '.tsx', '.js'],
+          babelHelpers: 'bundled',
+          presets: [
+            'babel-preset-solid',
+            '@babel/preset-typescript',
+            ['@babel/preset-env', { bugfixes: true, targets: 'last 2 years' }],
+          ],
+        }),
+        ...plugins({
+          pkg,
+          withEsbuild: false,
+        }),
+        format === 'esm'
+          ? {
+              name: 'ts',
+              buildEnd() {
+                // Transpile typescript to './dist/source'
+                esbuild.build({
+                  entryPoints: ['./src/**/*.tsx', './src/**/*.ts'],
+                  outdir: './dist/source',
+                  loader: {
+                    '.js': 'jsx',
+                  },
+                  jsx: 'preserve',
+                  bundle: true,
+                  format: 'esm',
+                  sourcemap: true,
+                  target: ['esnext'],
+                  banner: {
+                    js: `/**
+* @license ${pkg.name} v${pkg.version} - ${pkg.license}
+*
+* This source code is licensed under the ${pkg.license} license.
+* See the LICENSE file in the root directory of this source tree.
+*/`,
+                  },
+                  plugins: [
+                    {
+                      name: 'externalize-everything-except-own-dependencies',
+                      setup(build) {
+                        build.onResolve({ filter: /(.*)/ }, (args) => {
+                          const modulePath = path.join(args.resolveDir, args.path);
+                          if (
+                            args.kind === 'import-statement' &&
+                            args.path !== '@lucide/shared' &&
+                            !modulePath.includes('packages/shared')
+                          ) {
+                            return { path: args.path, external: true };
+                          }
+                        });
+                      },
+                    },
+                  ],
+                  external: ['solid-js'],
+                });
+
+                // Generate types
+                const program = ts.createProgram([pkg.source], {
+                  target: ts.ScriptTarget.ESNext,
+                  module: ts.ModuleKind.ESNext,
+                  moduleResolution: ts.ModuleResolutionKind.NodeJs,
+                  jsx: ts.JsxEmit.Preserve,
+                  jsxImportSource: 'solid-js',
+                  allowSyntheticDefaultImports: true,
+                  esModuleInterop: true,
+                  declarationDir: `dist/types`,
+                  declaration: true,
+                  emitDeclarationOnly: true,
+                });
+                program.emit();
+              },
+            }
+          : null,
+      ],
+      external: ['solid-js', 'solid-js/web', 'solid-js/store'],
+      output: {
+        name: packageName,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+              exports: 'auto',
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}.js`,
+            }),
+        format: format === 'source' ? 'esm' : format,
+        preserveModules,
+        preserveModulesRoot: 'src',
+        sourcemap: true,
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-solid/scripts/buildTypes.mjs

@@ -1,88 +0,0 @@
-import path from 'path';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { getAliases } from '@lucide/build-icons';
-import {
-  writeFile,
-  readSvgDirectory,
-  resetFile,
-  toPascalCase,
-  getCurrentDirPath,
-} from '../../../scripts/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const srcDirectory = path.join(currentDir, '../dist');
-
-const writeDeclarationFile = (typesFile, directory, content) => {
-  resetFile(typesFile, directory);
-  writeFile(content, typesFile, directory);
-};
-
-const ICONS_DIR = path.resolve(currentDir, '../../../icons');
-const TYPES_FILE = 'lucide-solid.d.ts';
-
-// Declare type definitions
-let declarationFileContent = `\
-/// <reference types="solid-js" />
-import { JSX } from 'solid-js'
-
-interface LucideProps extends Partial<JSX.SvgSVGAttributes<SVGSVGElement>> {
-  key?: string | number;
-  color?: string
-  size?: string | number
-  strokeWidth?: string | number
-  absoluteStrokeWidth?: boolean
-  class?: string
-}
-
-export type LucideIcon = (props: LucideProps) => JSX.Element;
-
-// Generated icons
-`;
-
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-svgFiles.forEach((svgFile) => {
-  const iconName = path.basename(svgFile, '.svg');
-  const componentName = toPascalCase(iconName);
-
-  declarationFileContent += `export declare const ${componentName}: LucideIcon;\n`;
-});
-
-const aliases = await getAliases(ICONS_DIR);
-
-declarationFileContent += `\n
-
-// Generated icon aliases
-`;
-
-let aliasesCount = 0;
-
-svgFiles.forEach((svgFile) => {
-  const iconName = path.basename(svgFile, '.svg');
-  const componentName = toPascalCase(iconName);
-  const iconAliases = aliases[iconName]?.aliases;
-
-  declarationFileContent += `// ${componentName} aliases\n`;
-  declarationFileContent += `export declare const ${componentName}Icon: LucideIcon;\n`;
-  declarationFileContent += `export declare const Lucide${componentName}: LucideIcon;\n`;
-  aliasesCount += 1;
-  if (iconAliases != null && Array.isArray(iconAliases)) {
-    iconAliases.forEach((alias) => {
-      const componentNameAlias = toPascalCase(alias);
-      declarationFileContent += `export declare const ${componentNameAlias}: LucideIcon;\n`;
-
-      aliasesCount += 1;
-    });
-  }
-
-  declarationFileContent += '\n';
-});
-
-writeDeclarationFile(TYPES_FILE, srcDirectory, declarationFileContent);
-console.log(
-  `Generated ${TYPES_FILE} file with`,
-  svgFiles.length,
-  'icons and with',
-  aliasesCount,
-  'aliases',
-);

packages/lucide-solid/scripts/replaceVersion.mjs

@@ -1,13 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import pkg from '../package.json' assert { type: 'json' };
-
-const files = ['dist/source/lucide-solid.js', 'dist/types/lucide-solid.d.ts'];
-
-files.forEach((file) => {
-  const fileContents = fs.readFileSync(path.resolve(file), 'utf-8');
-  const newFileContents = fileContents.replace('{{version}}', pkg.version);
-
-  fs.writeFileSync(path.resolve(file), newFileContents, 'utf-8');
-});

packages/lucide-solid/src/Icon.tsx

@@ -1,18 +1,8 @@
-import { For, JSX, splitProps } from 'solid-js';
+import { For, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import defaultAttributes from './defaultAttributes';
 import { IconNode, LucideProps } from './types';
-
-/**
- * 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();
+import { toKebabCase } from '@lucide/shared';
 
 interface IconProps {
   name: string;

packages/lucide-solid/src/lucide-solid.ts

@@ -1,7 +1,3 @@
-/**
- * lucide-solid {{version}} - ISC
- */
-
 export * from './icons';
 export * as icons from './icons';
 export * from './aliases';

packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap

@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
-<svg data-testid="grid-icon"
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke-linecap="round"
+     stroke-linejoin="round"
      width="48"
      height="48"
      stroke="red"
      stroke-width="4"
      class="lucide lucide-grid3x3 "
-     xmlns="http://www.w3.org/2000/svg"
-     viewbox="0 0 24 24"
-     fill="none"
-     stroke-linecap="round"
-     stroke-linejoin="round"
+     data-testid="grid-icon"
 >
   <rect width="18"
         height="18"
@@ -41,17 +41,17 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
 `;
 
 exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
-<svg data-testid="grid-icon"
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke-linecap="round"
+     stroke-linejoin="round"
      width="48"
      height="48"
      stroke="red"
      stroke-width="1"
      class="lucide lucide-grid3x3 "
-     xmlns="http://www.w3.org/2000/svg"
-     viewbox="0 0 24 24"
-     fill="none"
-     stroke-linecap="round"
-     stroke-linejoin="round"
+     data-testid="grid-icon"
 >
   <rect width="18"
         height="18"
@@ -81,16 +81,16 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
 `;
 
 exports[`Using lucide icon components > should render a component 1`] = `
-<svg width="24"
-     height="24"
-     stroke="currentColor"
-     stroke-width="2"
-     class="lucide lucide-grid3x3 "
-     xmlns="http://www.w3.org/2000/svg"
+<svg xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
+     width="24"
+     height="24"
+     stroke="currentColor"
+     stroke-width="2"
+     class="lucide lucide-grid3x3 "
 >
   <rect width="18"
         height="18"

packages/lucide-solid/tsconfig.json

@@ -11,6 +11,8 @@
     "types": ["vite/client", "@testing-library/jest-dom"],
     "noEmit": true,
     "isolatedModules": true,
-    "outDir": "dist",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "declaration": true,
   },
 }

packages/lucide-static/rollup.config.mjs

@@ -23,7 +23,7 @@ const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
     inputs.map((input) => ({
       input,
-      plugins: plugins(pkg, minify),
+      plugins: plugins({ pkg, minify }),
       output: {
         name: outputFileName,
         ...(preserveModules

packages/lucide-vue-next/package.json

@@ -46,6 +46,7 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/vue": "^8.0.1",
     "@vitejs/plugin-vue": "^4.6.2",

packages/lucide-vue-next/rollup.config.mjs

@@ -35,7 +35,7 @@ const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
     inputs.map((input) => ({
       input,
-      plugins: plugins(pkg, minify),
+      plugins: plugins({ pkg, minify }),
       external: ['vue'],
       output: {
         name: packageName,
@@ -48,6 +48,7 @@ const configs = bundles
             }),
         format,
         preserveModules,
+        preserveModulesRoot: 'src',
         sourcemap: true,
         globals: {
           vue: 'vue',

packages/lucide-vue-next/src/createLucideIcon.ts

@@ -1,6 +1,7 @@
 import { h } from 'vue';
-import type { SVGAttributes, FunctionalComponent, DefineComponent } from 'vue';
+import type { SVGAttributes, FunctionalComponent } from 'vue';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase } from '@lucide/shared';
 
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
@@ -11,17 +12,13 @@ export interface SVGProps extends Partial<SVGAttributes> {
 
 export type IconNode = [elementName: string, attrs: Record<string, string>][];
 export type Icon = FunctionalComponent<SVGProps>;
-/**
- * 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();
 
+/**
+ * Create a Lucide icon component
+ * @param {string} iconName
+ * @param {array} iconNode
+ * @returns {FunctionalComponent} LucideIcon
+ */
 const createLucideIcon =
   (iconName: string, iconNode: IconNode): Icon =>
   (

packages/lucide-vue/package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/vue": "^5.9.0",
     "@vitejs/plugin-vue2": "2.2.0",

packages/lucide-vue/rollup.config.mjs

@@ -34,7 +34,7 @@ const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
     inputs.map((input) => ({
       input,
-      plugins: plugins(pkg, minify),
+      plugins: plugins({ pkg, minify }),
       external: ['vue'],
       output: {
         name: packageName,
@@ -47,6 +47,7 @@ const configs = bundles
             }),
         format,
         preserveModules,
+        preserveModulesRoot: 'src',
         sourcemap: true,
         globals: {
           vue: 'vue',

packages/lucide-vue/src/createLucideIcon.ts

@@ -1,22 +1,11 @@
 import { Component } from 'vue';
-import { Vue, VueConfiguration } from 'vue/types/vue';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase } from '@lucide/shared';
 
 var showDeprecationWarning = true;
 
 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
- * 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();
-
 export default (iconName: string, iconNode: IconNode): Component => ({
   name: iconName,
   functional: true,

packages/lucide/rollup.config.mjs

@@ -46,7 +46,7 @@ const configs = bundles
               }),
             ]
           : []),
-        ...plugins(pkg, minify),
+        ...plugins({ pkg, minify }),
       ],
       output: {
         name: outputFileName,

packages/shared/README.md

@@ -0,0 +1,3 @@
+# @lucide/shared
+
+A collection of shared internal utilities for Lucide.

packages/shared/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@lucide/shared",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "type": "module",
+  "author": "",
+  "license": "ISC"
+}

packages/shared/src/index.ts

@@ -0,0 +1 @@
+export * from './utils';

packages/shared/src/utils.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts string to KebabCase
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = (string: string) =>
+  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

tools/rollup-plugins/package.json

@@ -10,6 +10,7 @@
   "type": "module",
   "dependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "esbuild": "^0.19.11",
     "rollup": "^4.9.2",

tools/rollup-plugins/plugins.js

@@ -4,12 +4,19 @@ import bundleSize from '@atomico/rollup-plugin-sizes';
 import replace from '@rollup/plugin-replace';
 import license from 'rollup-plugin-license';
 import esbuild from 'rollup-plugin-esbuild';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
 
-const plugins = (pkg, minify, esbuildOptions = {}) =>
+const plugins = ({ pkg, minify = false, withEsbuild = true, esbuildOptions = {} }) =>
   [
-    esbuild({
+    withEsbuild
+      ? esbuild({
           minify,
           ...esbuildOptions,
+        })
+      : null,
+    nodeResolve({
+      extensions: ['.js', '.ts', '.jsx', '.tsx'],
+      resolveOnly: [/^@lucide\/.*$/],
     }),
     license({
       banner: `@license ${pkg.name} v${pkg.version} - ${pkg.license}