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

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"

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"

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)],

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

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

packages/lucide-preact/tsconfig.json

@@ -19,6 +19,7 @@
     "outDir": "./dist",
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
+    "types": ["@testing-library/jest-dom"],
   },
   "exclude": ["**/node_modules"]
 }

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"

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

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

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

packages/lucide-react/tsconfig.json

@@ -18,6 +18,7 @@
     "sourceMap": true,
     "outDir": "./dist",
     "jsx": "react-jsx",
+    "types": ["@testing-library/jest-dom"],
   },
   "exclude": ["**/node_modules"]
 }

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

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

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"

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

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

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

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', () => {

packages/lucide-svelte/tsconfig.json

@@ -8,6 +8,7 @@
     "allowJs": true,
     "checkJs": true,
     "isolatedModules": true,
+    "types": ["@testing-library/jest-dom"],
   },
   "include": [
     "src/**/*.d.ts",

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

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