Fixed import of toKebabCase helper function

packages/lucide-figma/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.36.0",
+    "@lucide/utils": "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/utils';
 
 const defaultAttributes = {
   xmlns: 'http://www.w3.org/2000/svg',
@@ -18,16 +19,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

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@lucide/rollup-plugins": "workspace:*",
     "@lucide/build-icons": "workspace:*",
+    "@lucide/utils": "workspace:*",
     "@preact/preset-vite": "^2.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/preact": "^2.0.1",

packages/lucide-preact/src/createLucideIcon.ts

@@ -1,5 +1,6 @@
 import { ComponentType, FunctionComponent, h, JSX, RefObject, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase} from '@lucide/utils';
 
 type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
 
@@ -10,16 +11,6 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
   absoluteStrokeWidth?: boolean
 }
 
-/**
- * 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 createLucideIcon = (iconName: string, iconNode: IconNode): FunctionComponent<LucideProps> => {
   const Component = (
     { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }: LucideProps

packages/lucide-react/package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
+    "@lucide/utils": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.6",
     "@types/prop-types": "^15.7.5",

packages/lucide-react/src/createLucideIcon.ts

@@ -1,5 +1,6 @@
 import { forwardRef, createElement, ReactSVG, SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase} from '@lucide/utils';
 
 export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
 
@@ -12,15 +13,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();
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   const Component = forwardRef<SVGSVGElement, LucideProps>(

packages/lucide-solid/package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
+    "@lucide/utils": "workspace:*",
     "@atomico/rollup-plugin-sizes": "^1.1.4",
     "@testing-library/jest-dom": "^5.16.5",
     "rollup-plugin-license": "^3.0.1",

packages/lucide-solid/src/Icon.tsx

@@ -2,16 +2,7 @@ import { For, JSX, 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/utils';
 
 interface IconProps {
   name: string

packages/lucide-vue-next/package.json

@@ -47,6 +47,7 @@
   "devDependencies": {
     "@lucide/rollup-plugins": "workspace:*",
     "@lucide/build-icons": "workspace:*",
+    "@lucide/utils": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/vue": "^6.6.1",
     "@vue/compiler-sfc": "3.2.45",

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

@@ -1,6 +1,7 @@
 import { h } from 'vue';
 import type { SVGAttributes, FunctionalComponent } from 'vue';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase} from '@lucide/utils';
 
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
@@ -12,15 +13,6 @@ export interface SVGProps extends Partial<SVGAttributes> {
 
 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();
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionalComponent<SVGProps> => (
   { size, strokeWidth = 2, absoluteStrokeWidth, color, ...props }, // props

packages/lucide-vue/package.json

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

packages/lucide-vue/src/createVueComponent.ts

@@ -1,19 +1,10 @@
 import { Component } from 'vue';
 import { Vue, VueConfiguration } from 'vue/types/vue';
 import defaultAttributes from './defaultAttributes';
+import { toKebabCase} from '@lucide/utils';
 
 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/utils/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@lucide/utils",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "utils.js",
+  "author": "",
+  "license": "ISC"
+}

packages/utils/utils.js

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