Make sure we apply all classes to the lucide icons (#1691)

* Make sure all classes are applied for all packages * Add class test to angular component * Adjust lucide-static tests * update snapshot * Fix types
2025-12-16 07:37:42 +01:00 · 2023-11-24 13:59:12 +01:00
parent fbaccc7d9f
commit 75e9724072
26 changed files with 2159 additions and 558 deletions
--- a/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
+++ b/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
@@ -28,6 +28,12 @@ describe('LucideAngularComponent', () => {
    expect(testHostComponent).toBeTruthy();
  });

+  it('should add all classes', () => {
+    testHostFixture.detectChanges();
+
+    expect(getSvgAttribute('class')).toBe('lucide lucide-demo my-icon');
+  });
+
  it('should set color', () => {
    const color = 'red';
    testHostComponent.setColor(color);
@@ -65,6 +71,7 @@ describe('LucideAngularComponent', () => {
    selector: 'lucide-spec-host-component',
    template: ` <i-lucide
      name="demo"
+      class="my-icon"
      [color]="color"
      [size]="size"
      [strokeWidth]="strokeWidth"
--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -43,16 +43,16 @@
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
-    "@lucide/rollup-plugins": "workspace:*",
    "@lucide/build-icons": "workspace:*",
-    "@preact/preset-vite": "^2.4.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@lucide/rollup-plugins": "workspace:*",
+    "@preact/preset-vite": "^2.7.0",
+    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/preact": "^2.0.1",
-    "preact": "^10.11.2",
-    "rollup": "^3.5.1",
-    "typescript": "^4.8.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "preact": "^10.19.2",
+    "rollup": "^3.29.4",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.0",
+    "vitest": "^0.32.4"
  },
  "peerDependencies": {
    "preact": "^10.5.13"
--- a/packages/lucide-preact/src/createLucideIcon.ts
+++ b/packages/lucide-preact/src/createLucideIcon.ts
@@ -22,7 +22,7 @@ export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])

 const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionComponent<LucideProps> => {
  const Component = (
-    { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }: LucideProps
+    { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, class: classes = '', ...rest }: LucideProps
  ) =>
    h(
      'svg' as unknown as ComponentType<Partial<JSX.SVGAttributes<SVGElement> & { 'stroke-width': number | string }>>,
@@ -32,7 +32,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionCompone
        height: size,
        stroke: color,
        ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-        class: `lucide lucide-${toKebabCase(iconName)}`,
+        class: ['lucide', `lucide-${toKebabCase(iconName)}`, classes].join(' '),
        ...rest,
      },
      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
@@ -1,7 +1,7 @@
 // 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 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-grid3x3\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+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-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;

-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></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-grid3x3\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></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-grid3x3 \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
--- a/packages/lucide-preact/tests/lucide-preact.spec.tsx
+++ b/packages/lucide-preact/tests/lucide-preact.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render, cleanup } from '@testing-library/preact'
-import { Pen, Edit2, Grid } from '../src/lucide-preact';
+import { Pen, Edit2, Grid, Droplet } from '../src/lucide-preact';

 type AttributesAssertion = { attributes: Record<string, { value: string }>}

@@ -76,4 +76,15 @@ describe('Using lucide icon components', () => {
    expect(attributes['stroke-width'].value).toBe('1');
    expect( container.innerHTML ).toMatchSnapshot();
  });
+
+  it('should apply all classes to the element', () => {
+    const testClass = 'my-class';
+    const { container } = render(
+      <Droplet class={testClass} />,
+    );
+
+    expect(container.firstChild).toHaveClass(testClass);
+    expect(container.firstChild).toHaveClass('lucide');
+    expect(container.firstChild).toHaveClass('lucide-droplet');
+  });
 })
--- a/packages/lucide-preact/tsconfig.json
+++ b/packages/lucide-preact/tsconfig.json
@@ -19,6 +19,7 @@
    "outDir": "./dist",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
+    "types": ["@testing-library/jest-dom"],
  },
  "exclude": ["**/node_modules"]
 }
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -45,23 +45,24 @@
    "typecheck": "tsc",
    "typecheck:watch": "tsc -w",
    "test": "vitest run",
+    "test:watch": "vitest watch",
    "version": "pnpm version --git-tag-version=false"
  },
  "devDependencies": {
    "@lucide/build-icons": "workspace:*",
    "@lucide/rollup-plugins": "workspace:*",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.6",
-    "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.21",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^11.2.7",
+    "@types/prop-types": "^15.7.10",
+    "@types/react": "^18.2.37",
+    "@vitejs/plugin-react": "^2.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
-    "rollup": "^3.5.1",
-    "rollup-plugin-dts": "^5.0.0",
-    "typescript": "^4.8.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "rollup": "^3.29.4",
+    "rollup-plugin-dts": "^5.3.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.0",
+    "vitest": "^0.32.4"
  },
  "peerDependencies": {
    "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
--- a/packages/lucide-react/src/createLucideIcon.ts
+++ b/packages/lucide-react/src/createLucideIcon.ts
@@ -24,7 +24,7 @@ export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])

 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
  const Component = forwardRef<SVGSVGElement, LucideProps>(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) =>
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, className = '', children, ...rest }, ref) =>
      createElement(
        'svg',
        {
@@ -34,7 +34,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
          height: size,
          stroke: color,
          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-          className: `lucide lucide-${toKebabCase(iconName)}`,
+          className: ['lucide', `lucide-${toKebabCase(iconName)}`, className].join(' '),
          ...rest,
        },
        [
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.tsx.snap
+++ b/packages/lucide-react/tests/snapshots/lucide-react.spec.tsx.snap
@@ -1,9 +1,9 @@
 // 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 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-grid3x3\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+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-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;

-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></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-grid3x3\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></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-grid3x3 \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;

-exports[`Using lucide icon components > should render icons dynamically by using the dynamicIconImports module 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-smile\\" aria-label=\\"smile\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"10\\"></circle><path d=\\"M8 14s1.5 2 4 2 4-2 4-2\\"></path><line x1=\\"9\\" x2=\\"9.01\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"15\\" x2=\\"15.01\\" y1=\\"9\\" y2=\\"9\\"></line></svg>"`;
+exports[`Using lucide icon components > should render icons dynamically by using the dynamicIconImports module 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-smile \\" aria-label=\\"smile\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"10\\"></circle><path d=\\"M8 14s1.5 2 4 2 4-2 4-2\\"></path><line x1=\\"9\\" x2=\\"9.01\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"15\\" x2=\\"15.01\\" y1=\\"9\\" y2=\\"9\\"></line></svg>"`;
--- a/packages/lucide-react/tests/lucide-react.spec.tsx
+++ b/packages/lucide-react/tests/lucide-react.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render, cleanup, waitFor } from '@testing-library/react'
-import { Pen, Edit2, Grid, LucideProps } from '../src/lucide-react';
+import { Pen, Edit2, Grid, LucideProps, Droplet } from '../src/lucide-react';
 import { Suspense, lazy } from 'react';
 import dynamicIconImports from '../src/dynamicIconImports';

@@ -76,6 +76,17 @@ describe('Using lucide icon components', () => {
    expect( container.innerHTML ).toMatchSnapshot();
  });

+  it('should apply all classNames to the element', () => {
+    const testClass = 'my-class';
+    const { container } = render(
+      <Droplet className={testClass} />,
+    );
+
+    expect(container.firstChild).toHaveClass(testClass);
+    expect(container.firstChild).toHaveClass('lucide');
+    expect(container.firstChild).toHaveClass('lucide-droplet');
+  });
+
  it('should render icons dynamically by using the dynamicIconImports module', async () => {
    interface IconProps extends Omit<LucideProps, 'ref'> {
      name: keyof typeof dynamicIconImports;
@@ -106,6 +117,4 @@ describe('Using lucide icon components', () => {
    expect( container.innerHTML ).toMatchSnapshot();

  });
-
-
 })
--- a/packages/lucide-react/tsconfig.json
+++ b/packages/lucide-react/tsconfig.json
@@ -18,6 +18,7 @@
    "sourceMap": true,
    "outDir": "./dist",
    "jsx": "react-jsx",
+    "types": ["@testing-library/jest-dom"],
  },
  "exclude": ["**/node_modules"]
 }
--- a/packages/lucide-solid/package.json
+++ b/packages/lucide-solid/package.json
@@ -52,7 +52,7 @@
  "devDependencies": {
    "@lucide/build-icons": "workspace:*",
    "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
    "rollup-plugin-license": "^3.0.1",
    "babel-preset-solid": "^1.5.4",
    "jsdom": "^20.0.0",
--- a/packages/lucide-solid/tests/lucide-solid.spec.tsx
+++ b/packages/lucide-solid/tests/lucide-solid.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { cleanup, render } from 'solid-testing-library'
-import { Edit2, Grid, Pen } from '../src/lucide-solid'
+import { Edit2, Grid, Pen, Droplet } from '../src/lucide-solid'

 describe('Using lucide icon components', () => {
  it('should render an component', () => {
@@ -79,4 +79,15 @@ describe('Using lucide icon components', () => {
    expect( container.innerHTML ).toMatchSnapshot();
    cleanup()
  });
+
+  it('should add all classes to the element', () => {
+    const testClass = 'my-class';
+    const { container } = render(() =>
+      <Droplet class={testClass} />,
+    );
+
+    expect(container.firstChild).toHaveClass(testClass);
+    expect(container.firstChild).toHaveClass('lucide');
+    expect(container.firstChild).toHaveClass('lucide-droplet');
+  });
 })
--- a/packages/lucide-solid/tsconfig.json
+++ b/packages/lucide-solid/tsconfig.json
@@ -8,7 +8,7 @@
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
-    "types": ["vite/client"],
+    "types": ["vite/client", "@testing-library/jest-dom"],
    "noEmit": true,
    "isolatedModules": true,
    "outDir": "dist"
--- a/packages/lucide-static/scripts/buildLib.mjs
+++ b/packages/lucide-static/scripts/buildLib.mjs
@@ -48,7 +48,10 @@ svgs.forEach(({ name, contents }) => {
  const importString = `module.exports.${componentName} = require('./icons/${name}');\n`;
  appendFile(importString, `index.js`, LIB_DIR);

-  const exportString = `${jsLicense}module.exports = \`${contents}\`;\n`;
+  const svgContent = contents.replace('<svg', `<svg
+  class="lucide lucide-${name}"`);
+
+  const exportString = `${jsLicense}module.exports = \`${svgContent}\`;\n`;
  appendFile(exportString, `${name}.js`, ICON_MODULE_DIR);
 });

--- a/packages/lucide-static/scripts/copyIcons.mjs
+++ b/packages/lucide-static/scripts/copyIcons.mjs
@@ -13,7 +13,8 @@ export default async function copyIcons(parsedSvgs, packageDir, license) {
  }
  // eslint-disable-next-line arrow-body-style
  const writeIconPromises = parsedSvgs.map(({ name, contents }) => {
-    const content = `<!-- ${license} -->\n${contents}`;
+    let content = `<!-- ${license} -->\n${contents}`;
+    content = content.replace('<svg', `<svg\n  class="lucide lucide-${name}"`);

    return writeFile(`${iconsDirectory}/${name}.svg`, content);
  });
--- a/packages/lucide-svelte/package.json
+++ b/packages/lucide-svelte/package.json
@@ -60,7 +60,7 @@
    "@lucide/rollup-plugins": "workspace:*",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/svelte": "^4.0.2",
    "@tsconfig/svelte": "^5.0.0",
    "jsdom": "^20.0.3",
--- a/packages/lucide-svelte/tests/lucide-svelte.spec.ts
+++ b/packages/lucide-svelte/tests/lucide-svelte.spec.ts
@@ -23,17 +23,20 @@ describe('Using lucide icon components', () => {
  });

  it('should add a class to the element', () => {
+    const testClass = 'my-icon';
    render(Smile, {
      props: {
-        class: "my-icon"
+        class: testClass
      }
    });

-    const [icon] = document.getElementsByClassName('my-icon');
+    const [icon] = document.getElementsByClassName(testClass);

    expect(icon).toBeInTheDocument();
    expect(icon).toMatchSnapshot();
-    expect(icon.getAttribute("class")).toBe(['lucide-icon','lucide','lucide-smile', 'my-icon'].join(' '));
+    expect(icon).toHaveClass(testClass);
+    expect(icon).toHaveClass('lucide');
+    expect(icon).toHaveClass('lucide-smile');
  });

  it('should add a style attribute to the element', () => {
--- a/packages/lucide-svelte/tsconfig.json
+++ b/packages/lucide-svelte/tsconfig.json
@@ -8,6 +8,7 @@
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
+    "types": ["@testing-library/jest-dom"],
  },
  "include": [
    "src/**/*.d.ts",
--- a/packages/lucide-vue-next/package.json
+++ b/packages/lucide-vue-next/package.json
@@ -47,7 +47,7 @@
  "devDependencies": {
    "@lucide/rollup-plugins": "workspace:*",
    "@lucide/build-icons": "workspace:*",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/vue": "^6.6.1",
    "@vue/compiler-sfc": "3.2.45",
    "@vue/test-utils": "2.2.4",
--- a/packages/lucide-vue-next/src/createLucideIcon.ts
+++ b/packages/lucide-vue-next/src/createLucideIcon.ts
@@ -23,7 +23,7 @@ type IconNode = [elementName: string, attrs: Record<string, 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
+  { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
  { attrs, slots } // context
  ) => {
  return h(
@@ -35,7 +35,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionalCompo
      stroke: color || defaultAttributes.stroke,
      'stroke-width': absoluteStrokeWidth ?  Number(strokeWidth) * 24 / Number(size) : strokeWidth,
      ...attrs,
-      class: ['lucide', `lucide-${toKebabCase(iconName)}`, attrs?.class || ''],
+      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
      ...props,
    },
    [
--- a/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.ts.snap
+++ b/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Using lucide icon components > should add a class to the element 1`] = `
 <div>
  <svg
-    class="my-icon"
+    class="lucide lucide-smile-icon my-icon"
    fill="none"
    height="24"
    stroke="currentColor"
--- a/packages/lucide-vue-next/tests/lucide-vue-next.spec.ts
+++ b/packages/lucide-vue-next/tests/lucide-vue-next.spec.ts
@@ -41,6 +41,8 @@ describe('Using lucide icon components', () => {
    const [icon] = document.getElementsByClassName('my-icon');

    expect(icon).toHaveClass('my-icon')
+    expect(icon).toHaveClass('lucide')
+    expect(icon).toHaveClass('lucide-smile-icon')
  });

  it('should add a style attribute to the element', () => {
--- a/packages/lucide-vue/package.json
+++ b/packages/lucide-vue/package.json
@@ -45,7 +45,7 @@
  "devDependencies": {
    "@lucide/build-icons": "workspace:*",
    "@lucide/rollup-plugins": "workspace:*",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/vue": "^5.9.0",
    "@vitejs/plugin-vue2": "2.2.0",
    "@vue/test-utils": "1.3.0",
--- a/packages/lucide-vue/tests/lucide-vue.spec.ts
+++ b/packages/lucide-vue/tests/lucide-vue.spec.ts
@@ -43,6 +43,8 @@ describe('Using lucide icon components', () => {
    const [icon] = document.getElementsByClassName('lucide');

    expect(icon).toHaveClass('my-icon')
+    expect(icon).toHaveClass('lucide-smile')
+    expect(icon).toHaveClass('lucide')
  });

  it('should add a style attribute to the element', () => {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml