Update integration tests

docs/guide/astro/advanced/typescript.md

@@ -19,10 +19,6 @@ interface LucideProps extends SVGAttributes<SVGSVGElement> {
   size?: number | string;
   'stroke-width'?: number | string;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG attributes
 }
 ```

docs/guide/preact/advanced/typescript.md

@@ -18,10 +18,6 @@ interface LucideProps {
   color?: string;
   strokeWidth?: number;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG attributes
 }
 ```

docs/guide/react-native/advanced/typescript.md

@@ -18,10 +18,6 @@ interface LucideProps {
   color?: string;
   strokeWidth?: number;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG props, supported by react-native-svg
 }
 ```

docs/guide/react/advanced/typescript.md

@@ -17,10 +17,6 @@ interface LucideProps {
   color?: string;
   strokeWidth?: number;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG attributes
 }
 ```

docs/guide/solid/advanced/typescript.md

@@ -18,10 +18,6 @@ interface LucideProps extends SVGAttributes {
   color?: string;
   strokeWidth?: number;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG attributes
 }
 ```

docs/guide/svelte/advanced/typescript.md

@@ -19,10 +19,6 @@ interface LucideProps extends SVGAttributes<SVGSVGElement> {
   size?: number | string;
   strokeWidth?: number | string;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   children?: Snippet;
   [key: string]: any; // Any other SVG attributes
 }

docs/guide/vue/advanced/typescript.md

@@ -18,10 +18,6 @@ interface LucideProps {
   color?: string;
   strokeWidth?: number;
   nonScalingStroke?: boolean;
-  /**
-   * @deprecated
-   */
-  absoluteStrokeWidth?: boolean;
   [key: string]: any; // Any other SVG attributes
 }
 ```

integrations/lucide-react/nextjs/app/IconShowcase.tsx

@@ -13,7 +13,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-react/nextjs/tests/icons.browser.spec.tsx

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-react/react-router/app/IconShowcase.tsx

@@ -12,7 +12,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-react/react-router/tests/icons.browser.spec.tsx

@@ -37,6 +37,12 @@ test('renders Lucide public APIs and survives router navigation', async () => {
   expect(aliasIcon.element().innerHTML).toBe(canonicalIcon.element().innerHTML);
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-react/tanstack-router/src/IconShowcase.tsx

@@ -11,7 +11,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-react/tanstack-router/tests/icons.browser.spec.tsx

@@ -22,9 +22,15 @@ test('renders Lucide public APIs and survives router navigation', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-react/tanstack-start/src/IconShowcase.tsx

@@ -11,7 +11,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-react/tanstack-start/tests/icons.browser.spec.tsx

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-react/vite/src/IconShowcase.tsx

@@ -13,7 +13,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-react/vite/tests/icons.browser.spec.tsx

@@ -23,9 +23,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-solid-2/vite/src/IconShowcase.tsx

@@ -11,7 +11,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-solid-2/vite/tests/icons.browser.spec.tsx

@@ -22,9 +22,15 @@ test('renders Lucide public APIs and survives router navigation', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = page.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-solid/solid-start/src/IconShowcase.tsx

@@ -11,7 +11,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-solid/solid-start/tests/icons.browser.spec.tsx

@@ -30,9 +30,15 @@ test('renders Lucide public APIs and survives router navigation', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-solid/vite/src/IconShowcase.tsx

@@ -11,7 +11,7 @@ export default function IconShowcase() {
         color="red"
         size={48}
         strokeWidth={4}
-        absoluteStrokeWidth
+        nonScalingStroke
       />
       <LucideProvider
         color="purple"

integrations/lucide-solid/vite/tests/icons.browser.spec.tsx

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-svelte/sveltekit/src/lib/IconShowcase.svelte

@@ -11,7 +11,7 @@
     color="red"
     size={48}
     strokeWidth={4}
-    absoluteStrokeWidth
+    nonScalingStroke
   />
   <LucideProvider>
     <House data-testid="provider-icon" />

integrations/lucide-svelte/sveltekit/tests/icons.browser.spec.ts

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-svelte/vite/src/lib/IconShowcase.svelte

@@ -11,7 +11,7 @@
     color="red"
     size={48}
     strokeWidth={4}
-    absoluteStrokeWidth
+    nonScalingStroke
   />
   <LucideProvider>
     <House data-testid="provider-icon" />

integrations/lucide-svelte/vite/tests/icons.browser.spec.ts

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-vue/nuxt/app/components/IconShowcase.vue

@@ -12,7 +12,7 @@ import LucideProvider from './LucideProvider.vue';
       color="red"
       :size="48"
       :stroke-width="4"
-      absolute-stroke-width
+      non-scaling-stroke
     />
     <LucideProvider>
       <House data-testid="provider-icon" />

integrations/lucide-vue/nuxt/tests/icons.browser.spec.ts

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-vue/vike/components/IconShowcase.vue

@@ -12,7 +12,7 @@ import LucideProvider from './LucideProvider.vue';
       color="red"
       :size="48"
       :stroke-width="4"
-      absolute-stroke-width
+      non-scaling-stroke
     />
     <LucideProvider>
       <House data-testid="provider-icon" />

integrations/lucide-vue/vike/tests/icons.browser.spec.ts

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

integrations/lucide-vue/vite/src/IconShowcase.vue

@@ -12,7 +12,7 @@ import LucideProvider from './LucideProvider.vue';
       color="red"
       :size="48"
       :stroke-width="4"
-      absolute-stroke-width
+      non-scaling-stroke
     />
     <LucideProvider>
       <House data-testid="provider-icon" />

integrations/lucide-vue/vite/tests/icons.browser.spec.ts

@@ -17,9 +17,15 @@ test('renders Lucide public APIs in a real browser', async () => {
   await expect.element(customIcon).toHaveAttribute('width', '48');
   await expect.element(customIcon).toHaveAttribute('height', '48');
   await expect.element(customIcon).toHaveAttribute('stroke', 'red');
-  await expect.element(customIcon).toHaveAttribute('stroke-width', '2');
+  await expect.element(customIcon).toHaveAttribute('stroke-width', '4');
   await expect.element(customIcon).toHaveClass('consumer-icon');
 
+  const customIconChildren = Array.from(customIcon.element().children);
+  expect(customIconChildren.length).toBeGreaterThan(0);
+  for (const child of customIconChildren) {
+    expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+  }
+
   const providerIcon = screen.getByTestId('provider-icon');
   await expect.element(providerIcon).toHaveAttribute('width', '32');
   await expect.element(providerIcon).toHaveAttribute('stroke', 'purple');

packages/angular/src/lucide-config.ts

@@ -19,11 +19,6 @@ export interface LucideConfig {
    * @default 2
    */
   strokeWidth: number;
-  /**
-   * Whether to use absolute stroke width.
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth: boolean;
   /**
    * Whether stroke width should be scaled to appear uniform regardless of icon size.
    * @default false
@@ -46,7 +41,6 @@ export const lucideDefaultConfig: LucideConfig = {
   color: 'currentColor',
   size: 24,
   strokeWidth: 2,
-  absoluteStrokeWidth: false,
   nonScalingStroke: false,
 };
 

packages/angular/src/lucide-icon-base.spec.ts

@@ -46,7 +46,6 @@ describe('LucideIconBase', () => {
   let color: WritableSignal<string | undefined>;
   let size: WritableSignal<string | number | undefined>;
   let strokeWidth: WritableSignal<string | number | undefined>;
-  let absoluteStrokeWidth: WritableSignal<boolean | undefined>;
   let nonScalingStroke: WritableSignal<boolean | undefined>;
   const getSvgAttribute = (attr: string) => fixture.nativeElement.getAttribute(attr);
   const expectSvgClasses = (classes: string[], svg: SVGElement = fixture.nativeElement) => {
@@ -63,7 +62,6 @@ describe('LucideIconBase', () => {
         inputBinding('color', color),
         inputBinding('size', size),
         inputBinding('strokeWidth', strokeWidth),
-        inputBinding('absoluteStrokeWidth', absoluteStrokeWidth),
         inputBinding('nonScalingStroke', nonScalingStroke),
       ],
     });
@@ -73,7 +71,6 @@ describe('LucideIconBase', () => {
     color = signal(undefined);
     size = signal(undefined);
     strokeWidth = signal(undefined);
-    absoluteStrokeWidth = signal(undefined);
     nonScalingStroke = signal(undefined);
     fixture = createComponent();
     component = fixture.componentInstance;
@@ -162,22 +159,6 @@ describe('LucideIconBase', () => {
     });
   });
 
-  describe('absoluteStrokeWidth', () => {
-    it('should adjust stroke width', () => {
-      strokeWidth.set(2);
-      size.set(32);
-      absoluteStrokeWidth.set(true);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('1.5');
-    });
-    it('should not set vector-effect on children', () => {
-      absoluteStrokeWidth.set(true);
-      for (const child of fixture.nativeElement.children) {
-        expect(child.getAttribute('vector-effect')).toBeNull();
-      }
-    });
-  });
-
   describe('nonScalingStroke', () => {
     it('should not adjust stroke width', () => {
       strokeWidth.set(2);
@@ -232,7 +213,6 @@ describe('LucideIconBase', () => {
             strokeWidth: 1,
             size: 12,
             nonScalingStroke: true,
-            absoluteStrokeWidth: true,
           }),
         ],
       });
@@ -254,12 +234,12 @@ describe('LucideIconBase', () => {
     describe('strokeWidth', () => {
       it('should use stroke width from config', () => {
         fixture.detectChanges();
-        expect(getSvgAttribute('stroke-width')).toBe('2');
+        expect(getSvgAttribute('stroke-width')).toBe('1');
       });
       it('should use override stroke width from config', () => {
         strokeWidth.set(3);
         fixture.detectChanges();
-        expect(getSvgAttribute('stroke-width')).toBe('6');
+        expect(getSvgAttribute('stroke-width')).toBe('3');
       });
     });
     describe('size', () => {
@@ -275,17 +255,6 @@ describe('LucideIconBase', () => {
         expect(getSvgAttribute('height')).toBe('48');
       });
     });
-    describe('absoluteStrokeWidth', () => {
-      it('should use absoluteStrokeWidth from config', () => {
-        fixture.detectChanges();
-        expect(getSvgAttribute('stroke-width')).toBe('2');
-      });
-      it('should override absoluteStrokeWidth', () => {
-        absoluteStrokeWidth.set(false);
-        fixture.detectChanges();
-        expect(getSvgAttribute('stroke-width')).toBe('1');
-      });
-    });
     describe('nonScalingStroke', () => {
       it('should use nonScalingStroke from config', () => {
         for (const child of fixture.nativeElement.children) {

packages/angular/src/lucide-icon-base.ts

@@ -73,12 +73,6 @@ export abstract class LucideIconBase {
   readonly strokeWidth = input(this.iconConfig.strokeWidth, {
     transform: (value: Nullable<string | number>) => value ?? this.iconConfig.strokeWidth,
   });
-  /**
-   * Whether to use absolute stroke width.
-   */
-  readonly absoluteStrokeWidth = input(this.iconConfig.absoluteStrokeWidth, {
-    transform: (value: Nullable<boolean>) => value ?? this.iconConfig.absoluteStrokeWidth,
-  });
   /**
    * If set to true, it adds [`vector-effect="non-scaling-stroke"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements.
    */
@@ -97,7 +91,6 @@ export abstract class LucideIconBase {
           height: this.height() ?? this.size(),
           color: this.color(),
           strokeWidth: this.strokeWidth(),
-          absoluteStrokeWidth: this.absoluteStrokeWidth(),
           nonScalingStroke: this.nonScalingStroke(),
           className: this.class() ?? undefined,
           hasA11yProp: this.title() != null,

packages/angular/src/types.ts

@@ -20,10 +20,6 @@ interface LucideIconProps {
   size: Signal<Nullable<number | string>>;
   color: Signal<Nullable<string>>;
   strokeWidth: Signal<Nullable<number | string>>;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth: Signal<Nullable<boolean>>;
   nonScalingStroke: Signal<Nullable<boolean>>;
 }
 

packages/astro/src/Icon.astro

@@ -9,7 +9,6 @@ const {
   width,
   height,
   'stroke-width': strokeWidth = 2,
-  absoluteStrokeWidth = false,
   nonScalingStroke = false,
   iconNode = [],
   icon = {
@@ -26,7 +25,6 @@ const [, builtIconAttributes, builtIconNode = []] = buildLucideIconNode(icon, {
   width: width ?? size,
   height: height ?? size,
   strokeWidth,
-  absoluteStrokeWidth,
   nonScalingStroke,
   ...(className !== undefined && { className }),
   hasA11yProp: hasA11yProp(rest),

packages/astro/src/types.ts

@@ -11,10 +11,6 @@ export type LucideProps = SVGAttributes & {
   color?: string;
   size?: number | string;
   'stroke-width'?: number | string;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
   title?: string;

packages/astro/tests/Icon.spec.ts

@@ -5,7 +5,7 @@ import { Icon, Rocket } from '../src/lucide-astro';
 
 describe('Using Icon Component', async () => {
   const { container } = await render(Icon, {
-    props: { iconNode: airVent, size: 48, stroke: 'red', absoluteStrokeWidth: true },
+    props: { iconNode: airVent, size: 48, stroke: 'red' },
   });
 
   it('should render icon and match snapshot', async () => {
@@ -24,7 +24,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         stroke: 'red',
-        absoluteStrokeWidth: true,
       },
     });
 
@@ -36,7 +35,6 @@ describe('Icon Component Accessibility', () => {
       props: {
         size: 48,
         stroke: 'red',
-        absoluteStrokeWidth: true,
         'aria-label': 'Release icon',
       },
     });
@@ -49,7 +47,6 @@ describe('Icon Component Accessibility', () => {
       props: {
         size: 48,
         stroke: 'red',
-        absoluteStrokeWidth: true,
         title: 'Release icon',
       },
     });

packages/astro/tests/__snapshots__/Icon.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
      viewbox="0 0 24 24"
      fill="none"
      stroke="red"
-     stroke-width="1"
+     stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide"

packages/astro/tests/__snapshots__/lucide-astro.spec.ts.snap

@@ -208,34 +208,3 @@ exports[`Using lucide icon components > should render the icon with default attr
   </path>
 </svg>
 `;
-
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3"
-     aria-hidden="true"
->
-  <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/astro/tests/lucide-astro.spec.ts

@@ -65,25 +65,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconContainer.innerHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', async () => {
-    const { container } = await render(Grid, {
-      props: {
-        size: 48,
-        color: 'red',
-        absoluteStrokeWidth: true,
-      },
-    });
-
-    const SVGElement = container.firstElementChild;
-
-    expect(SVGElement).toHaveAttribute('stroke', 'red');
-    expect(SVGElement).toHaveAttribute('width', '48');
-    expect(SVGElement).toHaveAttribute('height', '48');
-    expect(SVGElement).toHaveAttribute('stroke-width', '1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should apply vector-effect when nonScalingStroke is set', async () => {
     const { container } = await render(Grid, {
       props: {

packages/icons/tests/buildLucideIconNode.spec.ts

@@ -52,26 +52,6 @@ describe('buildLucideIconNode', () => {
     expect(HouseSVG[1]['stroke-width']).toBe(12);
   });
 
-  it('should scale the stroke width', () => {
-    const HouseSVG = buildLucideIconNode(House, {
-      size: 12,
-      strokeWidth: 2,
-      absoluteStrokeWidth: true,
-    });
-
-    expect(HouseSVG[1]['stroke-width']).toBe(4);
-  });
-
-  it('should not scale the stroke width', () => {
-    const HouseSVG = buildLucideIconNode(House, {
-      size: 12,
-      strokeWidth: 2,
-      absoluteStrokeWidth: false,
-    });
-
-    expect(HouseSVG[1]['stroke-width']).toBe(2);
-  });
-
   it('should set non-scaling-stroke to child nodes', () => {
     const HouseSVG = buildLucideIconNode(House, { nonScalingStroke: true });
 

packages/lucide-preact/src/Icon.ts

@@ -23,7 +23,6 @@ type IconComponentProps = LucideProps &
  * @param {string} props.color - The color of the icon
  * @param {number} props.size - The size of the icon
  * @param {number} props.strokeWidth - The stroke width of the icon
- * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
  * @param {boolean} props.nonScalingStroke - Whether to use non scaling strokes
  * @param {string} props.class - The class name of the icon
  * @param {LucideIconNode[]} props.children - The children of the icon
@@ -37,7 +36,6 @@ const Icon = ({
   width,
   height,
   strokeWidth,
-  absoluteStrokeWidth,
   nonScalingStroke,
   children,
   iconNode = [],
@@ -52,7 +50,6 @@ const Icon = ({
   const {
     size: contextSize = 24,
     strokeWidth: contextStrokeWidth = 2,
-    absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
     nonScalingStroke: contextNonScalingStroke = false,
     color: contextColor = 'currentColor',
     class: contextClass = '',
@@ -63,7 +60,6 @@ const Icon = ({
     width: width ?? size ?? contextSize,
     height: height ?? size ?? contextSize,
     strokeWidth: strokeWidth ?? contextStrokeWidth,
-    absoluteStrokeWidth: absoluteStrokeWidth ?? contextAbsoluteStrokeWidth,
     nonScalingStroke: nonScalingStroke ?? contextNonScalingStroke,
     className: mergeClasses(contextClass, classes as string),
     hasA11yProp: Boolean(children) || hasA11yProp(rest),

packages/lucide-preact/src/context.ts

@@ -5,17 +5,12 @@ const LucideContext = createContext<{
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }>({
   size: 24,
   color: 'currentColor',
   strokeWidth: 2,
-  absoluteStrokeWidth: false,
   nonScalingStroke: false,
   class: '',
 });
@@ -25,10 +20,6 @@ interface LucideProviderProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }
@@ -38,7 +29,6 @@ export function LucideProvider({
   size,
   color,
   strokeWidth,
-  absoluteStrokeWidth,
   nonScalingStroke,
   class: className,
 }: LucideProviderProps) {
@@ -47,11 +37,10 @@ export function LucideProvider({
       size,
       color,
       strokeWidth,
-      absoluteStrokeWidth,
       nonScalingStroke,
       class: className,
     }),
-    [size, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className],
+    [size, color, strokeWidth, nonScalingStroke, className],
   );
 
   return h(LucideContext.Provider, { value }, children);

packages/lucide-preact/src/types.ts

@@ -19,10 +19,6 @@ export interface LucideProps extends Partial<Omit<SVGAttributes, 'ref' | 'size'>
   width?: string | number;
   height?: string | number;
   strokeWidth?: string | number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
 }
 

packages/lucide-preact/tests/Icon.spec.tsx

@@ -11,7 +11,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -24,7 +23,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -39,7 +37,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-label="Air conditioning"
       />,
     );
@@ -53,7 +50,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         title="Air conditioning"
       />,
     );
@@ -67,7 +63,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       >
         <title>Some title</title>
       </Icon>,
@@ -82,7 +77,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-hidden={false}
       />,
     );

packages/lucide-preact/tests/__snapshots__/Icon.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"

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

@@ -101,34 +101,3 @@ exports[`Using lucide icon components > should render an component 1`] = `
   </path>
 </svg>
 `;
-
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3"
-     aria-hidden="true"
->
-  <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/context.spec.tsx

@@ -35,22 +35,6 @@ describe('Using LucideProvider', () => {
     expect(IconComponent).toHaveAttribute('stroke-width', '4');
   });
 
-  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
-    const { container } = render(
-      <LucideProvider
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      >
-        <House />
-      </LucideProvider>,
-    );
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-  });
-
   it('should render the icon with LucideProvider and custom nonScalingStroke', () => {
     const { container } = render(
       <LucideProvider

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

@@ -70,25 +70,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { container } = render(
-      <Grid
-        size={48}
-        stroke="red"
-        absoluteStrokeWidth
-      />,
-    );
-
-    const SVGElement = container.firstElementChild;
-
-    expect(SVGElement).toHaveAttribute('stroke', 'red');
-    expect(SVGElement).toHaveAttribute('width', '48');
-    expect(SVGElement).toHaveAttribute('height', '48');
-    expect(SVGElement).toHaveAttribute('stroke-width', '1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should apply vector-effect when nonScalingStroke is set', () => {
     const { container } = render(
       <Grid

packages/lucide-react-native/src/Icon.ts

@@ -44,7 +44,6 @@ const toNativeSvgAttributes = (attributes: Record<string, unknown>) => {
  * @param {string} props.color - The color of the icon
  * @param {number} props.size - The size of the icon
  * @param {number} props.strokeWidth - The stroke width of the icon
- * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
  * @param {string} props.className - The class name of the icon
  * @param {LucideIconNode[]} props.children - The children of the icon
  * @param {LucideIconNode[]} props.iconNode - The icon node of the icon
@@ -59,7 +58,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
       width = size,
       height = size,
       strokeWidth,
-      absoluteStrokeWidth,
       nonScalingStroke,
       children,
       iconNode = [],
@@ -76,7 +74,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
     const {
       size: contextSize = 24,
       strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
       nonScalingStroke: contextNonScalingStroke = false,
       color: contextColor = 'currentColor',
       className: contextClass = '',
@@ -89,7 +86,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
       width: width ?? size ?? contextSize,
       height: height ?? size ?? contextSize,
       strokeWidth: strokeWidth ?? contextStrokeWidth,
-      absoluteStrokeWidth: absoluteStrokeWidth ?? contextAbsoluteStrokeWidth,
       nonScalingStroke: nonScalingStroke ?? contextNonScalingStroke,
       className: mergeClasses(contextClass, className),
       hasA11yProp: hasAccessibleProp,

packages/lucide-react-native/src/context.ts

@@ -4,17 +4,12 @@ const LucideContext = createContext<{
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   className?: string;
 }>({
   size: 24,
   color: 'currentColor',
   strokeWidth: 2,
-  absoluteStrokeWidth: false,
   nonScalingStroke: false,
   className: '',
 });
@@ -24,10 +19,6 @@ interface LucideProviderProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   className?: string;
 }
@@ -37,7 +28,6 @@ export function LucideProvider({
   size,
   color,
   strokeWidth,
-  absoluteStrokeWidth,
   nonScalingStroke,
   className,
 }: LucideProviderProps) {
@@ -46,11 +36,10 @@ export function LucideProvider({
       size,
       color,
       strokeWidth,
-      absoluteStrokeWidth,
       nonScalingStroke,
       className,
     }),
-    [size, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className],
+    [size, color, strokeWidth, nonScalingStroke, className],
   );
 
   return createElement(LucideContext.Provider, { value }, children);

packages/lucide-react-native/src/types.ts

@@ -19,10 +19,6 @@ export interface LucideProps extends SvgProps {
   width?: string | number;
   height?: string | number;
   className?: string;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   'data-testid'?: string;
 }

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

@@ -17,7 +17,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -30,7 +29,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 

packages/lucide-react-native/tests/__snapshots__/Icon.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"
@@ -20,7 +20,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
     stroke="red"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="1"
+    stroke-width="2"
   />
   <path
     d="M6 8h12"
@@ -28,7 +28,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
     stroke="red"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="1"
+    stroke-width="2"
   />
   <path
     d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"
@@ -36,7 +36,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
     stroke="red"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="1"
+    stroke-width="2"
   />
   <path
     d="M6.6 15.6A2 2 0 1 0 10 17v-5"
@@ -44,7 +44,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
     stroke="red"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="1"
+    stroke-width="2"
   />
 </svg>
 `;

packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap

@@ -248,66 +248,6 @@ exports[`Using lucide icon components > should render an component 1`] = `
 </svg>
 `;
 
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3"
-     aria-hidden="true"
->
-  <rect fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
-  >
-  </path>
-</svg>
-`;
-
 exports[`Using lucide icon components > should work with a single child component 1`] = `
 <svg xmlns="http://www.w3.org/2000/svg"
      width="24"

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

@@ -37,23 +37,6 @@ describe('Using LucideProvider', () => {
     expect(IconComponent).toHaveAttribute('stroke-width', '4');
   });
 
-  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
-    cleanup();
-    const { container } = render(
-      <LucideProvider
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      >
-        <House />
-      </LucideProvider>,
-    );
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-  });
-
   it("should override the provider's global props when passing props to the icon", () => {
     cleanup();
     const { container } = render(

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

@@ -63,25 +63,6 @@ describe('Using lucide icon components', () => {
     expect(penIcon).toStrictEqual(edit2Icon);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { container } = render(
-      <Grid
-        size={48}
-        stroke="red"
-        absoluteStrokeWidth
-      />,
-    );
-
-    const SVGElement = container.firstElementChild;
-
-    expect(SVGElement).toHaveAttribute('stroke', 'red');
-    expect(SVGElement).toHaveAttribute('width', '48');
-    expect(SVGElement).toHaveAttribute('height', '48');
-    expect(SVGElement).toHaveAttribute('stroke-width', '1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should apply vector-effect when nonScalingStroke is set', () => {
     const { container } = render(
       <Grid

packages/lucide-react/src/DynamicIcon.ts

@@ -42,7 +42,6 @@ async function getIconData(name: IconName) {
  * @param {string} props.color - The color of the icon
  * @param {number} props.size - The size of the icon
  * @param {number} props.strokeWidth - The stroke width of the icon
- * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
  * @param {boolean} props.nonScalingStroke - Whether to use non scaling strokes
  * @param {string} props.className - The class name of the icon
  * @param {LucideIconNode[]} props.children - The children of the icon

packages/lucide-react/src/Icon.ts

@@ -25,7 +25,6 @@ type IconComponentProps = LucideProps &
  * @param {string} props.color - The color of the icon
  * @param {number} props.size - The size of the icon
  * @param {number} props.strokeWidth - The stroke width of the icon
- * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
  * @param {boolean} props.nonScalingStroke - Whether to use non scaling strokes
  * @param {string} props.className - The class name of the icon
  * @param {LucideIconNode[]} props.children - The children of the icon
@@ -41,7 +40,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
       width,
       height,
       strokeWidth,
-      absoluteStrokeWidth,
       nonScalingStroke,
       className = '',
       children,
@@ -58,7 +56,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
     const {
       size: contextSize = 24,
       strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
       nonScalingStroke: contextNonScalingStroke = false,
       color: contextColor = 'currentColor',
       className: contextClass = '',
@@ -71,7 +68,6 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
       width: width ?? size ?? contextSize,
       height: height ?? size ?? contextSize,
       strokeWidth: strokeWidth ?? contextStrokeWidth,
-      absoluteStrokeWidth: absoluteStrokeWidth ?? contextAbsoluteStrokeWidth,
       nonScalingStroke: nonScalingStroke ?? contextNonScalingStroke,
       className: mergeClasses(contextClass, className),
       hasA11yProp: hasAccessibleProp,

packages/lucide-react/src/context.ts

@@ -7,10 +7,6 @@ type LucideConfig = {
   size: number;
   color: string;
   strokeWidth: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth: boolean;
   nonScalingStroke: boolean;
   className: string;
 };
@@ -26,7 +22,6 @@ export function LucideProvider({
   size,
   color,
   strokeWidth,
-  absoluteStrokeWidth,
   nonScalingStroke,
   className,
 }: LucideProviderProps) {
@@ -35,11 +30,10 @@ export function LucideProvider({
       size,
       color,
       strokeWidth,
-      absoluteStrokeWidth,
       nonScalingStroke,
       className,
     }),
-    [size, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className],
+    [size, color, strokeWidth, nonScalingStroke, className],
   );
 
   return createElement(LucideContext.Provider, { value }, children);

packages/lucide-react/src/types.ts

@@ -19,10 +19,6 @@ type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
 
 export interface LucideProps extends ElementAttributes {
   size?: string | number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
 }
 

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

@@ -70,7 +70,6 @@ describe('Using DynamicIcon Component', () => {
         name="circle"
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 

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

@@ -11,7 +11,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -24,7 +23,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -39,7 +37,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 
@@ -52,7 +49,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-label="Air conditioning"
       />,
     );
@@ -66,7 +62,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         // @ts-expect-error
         title="Air conditioning"
       />,
@@ -81,7 +76,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       >
         <title>Some title</title>
       </Icon>,
@@ -96,7 +90,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-hidden={false}
       />,
     );

packages/lucide-react/tests/__snapshots__/Icon.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"

packages/lucide-react/tests/__snapshots__/context.spec.tsx.snap

@@ -23,29 +23,6 @@ exports[`Using LucideProvider > should render the icon with LucideProvider 1`] =
 </svg>
 `;
 
-exports[`Using LucideProvider > should render the icon with LucideProvider and custom absoluteStrokeWidth 1`] = `
-<svg
-  aria-hidden="true"
-  class="lucide lucide-house lucide-home"
-  fill="none"
-  height="48"
-  stroke="red"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="1"
-  viewBox="0 0 24 24"
-  width="48"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
-  />
-  <path
-    d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-  />
-</svg>
-`;
-
 exports[`Using LucideProvider > should render the icon with LucideProvider and custom nonScalingStroke 1`] = `
 <svg
   aria-hidden="true"

packages/lucide-react/tests/__snapshots__/dynamicImports.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`Using dynamicImports > should render icons dynamically by using the dyn
      viewbox="0 0 24 24"
      fill="none"
      stroke="red"
-     stroke-width="1"
+     stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-face-slightly-smiling lucide-smile"

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

@@ -101,34 +101,3 @@ exports[`Using lucide icon components > should render an component 1`] = `
   </path>
 </svg>
 `;
-
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3"
-     aria-hidden="true"
->
-  <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-react/tests/context.spec.tsx

@@ -46,23 +46,6 @@ describe('Using LucideProvider', () => {
     expect(IconComponent).toHaveAttribute('stroke-width', '4');
   });
 
-  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
-    const { container } = render(
-      <LucideProvider
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      >
-        <House />
-      </LucideProvider>,
-    );
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('should render the icon with LucideProvider and custom nonScalingStroke', () => {
     const { container } = render(
       <LucideProvider

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

@@ -27,7 +27,6 @@ describe('Using dynamicImports', () => {
         name="smile"
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />,
     );
 

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

@@ -69,25 +69,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { container, getByTestId } = render(
-      <Grid
-        size={48}
-        stroke="red"
-        absoluteStrokeWidth
-      />,
-    );
-
-    const SVGElement = container.firstElementChild;
-
-    expect(SVGElement).toHaveAttribute('stroke', 'red');
-    expect(SVGElement).toHaveAttribute('width', '48');
-    expect(SVGElement).toHaveAttribute('height', '48');
-    expect(SVGElement).toHaveAttribute('stroke-width', '1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should apply vector-effect when nonScalingStroke is set', () => {
     const { container, getByTestId } = render(
       <Grid

packages/lucide-solid/src/Icon.tsx

@@ -25,7 +25,6 @@ const Icon = (props: LucideProps & IconProps) => {
     'class',
     'icon',
     'iconNode',
-    'absoluteStrokeWidth',
     'nonScalingStroke',
   ]);
 
@@ -46,7 +45,6 @@ const Icon = (props: LucideProps & IconProps) => {
       width: localProps.width ?? localProps.size ?? globalProps.size,
       height: localProps.height ?? localProps.size ?? globalProps.size,
       strokeWidth: localProps.strokeWidth ?? globalProps.strokeWidth,
-      absoluteStrokeWidth: localProps.absoluteStrokeWidth ?? globalProps.absoluteStrokeWidth,
       nonScalingStroke: localProps.nonScalingStroke ?? globalProps.nonScalingStroke,
       className: mergeClasses('lucide-icon', globalProps.class, localProps.class),
       hasA11yProp: Boolean(localProps.children) || hasA11yProp(rest),

packages/lucide-solid/src/context.tsx

@@ -4,17 +4,12 @@ export const LucideContext = createContext<{
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }>({
   size: 24,
   color: 'currentColor',
   strokeWidth: 2,
-  absoluteStrokeWidth: false,
   nonScalingStroke: false,
   class: '',
 });
@@ -24,10 +19,6 @@ interface LucideProviderProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }
@@ -37,7 +28,6 @@ export function LucideProvider(props: LucideProviderProps) {
     'size',
     'color',
     'strokeWidth',
-    'absoluteStrokeWidth',
     'nonScalingStroke',
     'class',
   ]);

packages/lucide-solid/src/types.ts

@@ -23,10 +23,6 @@ export interface LucideProps extends SVGAttributes {
   height?: string | number;
   color?: string;
   strokeWidth?: string | number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
 }
 

packages/lucide-solid/tests/Icon.spec.tsx

@@ -14,7 +14,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -27,7 +26,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -86,7 +84,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -99,7 +96,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-label="Air conditioning"
       />
     ));
@@ -113,7 +109,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         // @ts-expect-error
         title="Air conditioning"
       />
@@ -128,7 +123,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       >
         <title>Some title</title>
       </Icon>
@@ -143,7 +137,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-hidden={false}
       />
     ));

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

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"

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

@@ -80,44 +80,3 @@ exports[`Using lucide icon components > should render a component 1`] = `
   </path>
 </svg>
 `;
-
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3 lucide-icon"
-     aria-hidden="true"
-     data-testid="grid-icon"
->
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        key="afitv7"
-  >
-  </rect>
-  <path d="M3 9h18"
-        key="1pudct"
-  >
-  </path>
-  <path d="M3 15h18"
-        key="5xshup"
-  >
-  </path>
-  <path d="M9 3v18"
-        key="fh3hqa"
-  >
-  </path>
-  <path d="M15 3v18"
-        key="14nvp0"
-  >
-  </path>
-</svg>
-`;

packages/lucide-solid/tests/context.spec.tsx

@@ -64,22 +64,6 @@ describe('Using LucideProvider', () => {
     expect(container.firstElementChild).toHaveAttribute('height', '48');
   });
 
-  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
-    const { container } = render(() => (
-      <LucideProvider
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      >
-        <House />
-      </LucideProvider>
-    ));
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-  });
-
   it("should override the provider's global props when passing props to the icon", () => {
     const { container } = render(() => (
       <LucideProvider

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

@@ -57,28 +57,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const testId = 'grid-icon';
-    const { container, getByTestId } = render(() => (
-      <Grid
-        data-testid={testId}
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      />
-    ));
-
-    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');
-    expect(attributes['stroke-width'].value).toBe('1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should add all classes to the element', () => {
     const testClass = 'my-class';
     const { container } = render(() => <Droplet class={testClass} />);

packages/shared/src/build/buildLucideIconNode.ts

@@ -30,12 +30,6 @@ function buildLucideIconNode(icon: LucideIconData, params: LucideBuildParams = {
       ? mergeClasses(...classNamesFromClassName)
       : mergeClasses('lucide', ...iconClassNames, ...classNamesFromClassName);
 
-  const calculatedStrokeWidth = params.absoluteStrokeWidth
-    ? (Number(params.strokeWidth ?? defaultAttributes['stroke-width']) *
-        Number(icon.size ?? icon.width ?? defaultAttributes['width'])) /
-      Number(params.size ?? params.width ?? defaultAttributes['width'])
-    : (params.strokeWidth ?? defaultAttributes['stroke-width']);
-
   const attributes = {
     ...Object.entries(defaultAttributes).reduce((attrs, [attrName, value]) => {
       attrs[getAttributeName(attrName)] = value;
@@ -58,7 +52,7 @@ function buildLucideIconNode(icon: LucideIconData, params: LucideBuildParams = {
       isDefined(params.height) && {
         [getAttributeName('height')]: params.height,
       }),
-    [getAttributeName('stroke-width')]: calculatedStrokeWidth,
+    [getAttributeName('stroke-width')]: params.strokeWidth ?? defaultAttributes['stroke-width'],
     ...(className && {
       [getAttributeName('class')]: className,
     }),

packages/shared/src/build/types.ts

@@ -38,11 +38,6 @@ export type LucideBuildParams<TProps extends Record<string, unknown> = SVGProps>
    * The stroke width.
    */
   strokeWidth?: string | number;
-  /**
-   * Whether to use absolute stroke width.
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   /**
    * Adds [`vector-effect="non-scaling-stroke"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements.
    */

packages/solid/src/Icon.tsx

@@ -24,7 +24,6 @@ const LOCAL_PROP_KEYS = [
   'class',
   'icon',
   'iconNode',
-  'absoluteStrokeWidth',
   'nonScalingStroke',
 ] as const;
 
@@ -48,7 +47,6 @@ const Icon = (props: LucideProps & IconProps) => {
       width: props.width ?? props.size ?? globalProps.size,
       height: props.height ?? props.size ?? globalProps.size,
       strokeWidth: props.strokeWidth ?? globalProps.strokeWidth,
-      absoluteStrokeWidth: props.absoluteStrokeWidth ?? globalProps.absoluteStrokeWidth,
       nonScalingStroke: props.nonScalingStroke ?? globalProps.nonScalingStroke,
       className: mergeClasses('lucide-icon', globalProps.class, props.class),
       hasA11yProp: Boolean(props.children) || hasA11yProp(rest()),

packages/solid/src/context.tsx

@@ -4,17 +4,12 @@ export const LucideContext = createContext<{
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }>({
   size: 24,
   color: 'currentColor',
   strokeWidth: 2,
-  absoluteStrokeWidth: false,
   nonScalingStroke: false,
   class: '',
 });
@@ -24,10 +19,6 @@ interface LucideProviderProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }

packages/solid/src/types.ts

@@ -23,10 +23,6 @@ export interface LucideProps extends SVGAttributes {
   height?: string | number;
   color?: string;
   strokeWidth?: string | number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
 }
 

packages/solid/tests/Icon.spec.tsx

@@ -14,7 +14,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -27,7 +26,6 @@ describe('Using Icon Component', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -87,7 +85,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       />
     ));
 
@@ -100,7 +97,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-label="Air conditioning"
       />
     ));
@@ -114,7 +110,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         // @ts-expect-error
         title="Air conditioning"
       />
@@ -129,7 +124,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
       >
         <title>Some title</title>
       </Icon>
@@ -144,7 +138,6 @@ describe('Icon Component Accessibility', () => {
         iconNode={airVent}
         size={48}
         stroke="red"
-        absoluteStrokeWidth
         aria-hidden="false"
       />
     ));

packages/solid/tests/__snapshots__/Icon.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"

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

@@ -80,44 +80,3 @@ exports[`Using lucide icon components > should render a component 1`] = `
   </path>
 </svg>
 `;
-
-exports[`Using lucide icon components > should 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-grid-3x3 lucide-grid lucide-grid-3-x-3 lucide-icon"
-     aria-hidden="true"
-     data-testid="grid-icon"
->
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        key="afitv7"
-  >
-  </rect>
-  <path d="M3 9h18"
-        key="1pudct"
-  >
-  </path>
-  <path d="M3 15h18"
-        key="5xshup"
-  >
-  </path>
-  <path d="M9 3v18"
-        key="fh3hqa"
-  >
-  </path>
-  <path d="M15 3v18"
-        key="14nvp0"
-  >
-  </path>
-</svg>
-`;

packages/solid/tests/context.spec.tsx

@@ -65,22 +65,6 @@ describe('Using LucideProvider', () => {
     expect(container.firstElementChild).toHaveAttribute('height', '48');
   });
 
-  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
-    const { container } = render(() => (
-      <LucideProvider
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      >
-        <House />
-      </LucideProvider>
-    ));
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-  });
-
   it("should override the provider's global props when passing props to the icon", () => {
     const { container } = render(() => (
       <LucideProvider

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

@@ -57,28 +57,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const testId = 'grid-icon';
-    const { container, getByTestId } = render(() => (
-      <Grid
-        data-testid={testId}
-        size={48}
-        color="red"
-        absoluteStrokeWidth
-      />
-    ));
-
-    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');
-    expect(attributes['stroke-width'].value).toBe('1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should add all classes to the element', () => {
     const testClass = 'my-class';
     const { container } = render(() => <Droplet class={testClass} />);

packages/svelte/src/Icon.svelte

@@ -13,7 +13,6 @@
     width = size,
     height = size,
     strokeWidth = globalProps.strokeWidth ?? 2,
-    absoluteStrokeWidth = globalProps.absoluteStrokeWidth ?? false,
     nonScalingStroke = globalProps.nonScalingStroke ?? false,
     iconNode = [],
     icon = {
@@ -38,7 +37,6 @@
         width,
         height,
         strokeWidth,
-        absoluteStrokeWidth,
         nonScalingStroke,
         // @TODO: maybe drop the extra `lucide-icon` class altogether.
         className: mergeClasses('lucide-icon', globalProps.class),

packages/svelte/src/context.ts

@@ -6,10 +6,6 @@ export interface LucideGlobalContext {
   color?: string;
   size?: number;
   strokeWidth?: number;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   class?: string;
 }

packages/svelte/src/types.ts

@@ -22,10 +22,6 @@ export type LucideProps = Attrs & {
   color?: string;
   size?: number | string;
   strokeWidth?: number | string;
-  /**
-   * @deprecated Use `nonScalingStroke` instead.
-   */
-  absoluteStrokeWidth?: boolean;
   nonScalingStroke?: boolean;
   children?: Snippet;
   title?: string;

packages/svelte/tests/Icon.spec.ts

@@ -12,7 +12,6 @@ describe('Using Icon Component', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
       },
     });
 
@@ -25,7 +24,6 @@ describe('Using Icon Component', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
       },
     });
 
@@ -40,7 +38,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
       },
     });
 
@@ -53,7 +50,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
         'aria-label': 'Air conditioning',
       },
     });
@@ -67,7 +63,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
         title: 'Air conditioning',
       },
     });
@@ -81,7 +76,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
         'aria-label': 'Air conditioning',
       },
     });
@@ -95,7 +89,6 @@ describe('Icon Component Accessibility', () => {
         iconNode: airVent,
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
         'aria-hidden': 'false',
       },
     });

packages/svelte/tests/__snapshots__/Icon.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`Using Icon Component > should render icon and match snapshot 1`] = `
   stroke="red"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="1"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="48"
   xmlns="http://www.w3.org/2000/svg"

packages/svelte/tests/__snapshots__/lucide-svelte.spec.ts.snap

@@ -240,30 +240,3 @@ exports[`Using lucide icon components > should render an icon slot 1`] = `
   
 </div>
 `;
-
-exports[`Using lucide icon components > should 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-face-slightly-smiling lucide-smile lucide-icon"
-     aria-hidden="true"
->
-  <path d="M15 10V9">
-  </path>
-  <path d="M16.472 15a6 6 0 01-8.943 0">
-  </path>
-  <path d="M9 10V9">
-  </path>
-  <circle cx="12"
-          cy="12"
-          r="10"
-  >
-  </circle>
-</svg>
-`;

packages/svelte/tests/lucide-svelte.spec.ts

@@ -67,23 +67,6 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-  it('should scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { container } = render(Smile, {
-      color: 'red',
-      size: 48,
-      absoluteStrokeWidth: true,
-    });
-
-    const IconComponent = container.firstElementChild;
-
-    expect(IconComponent).toHaveAttribute('width', '48');
-    expect(IconComponent).toHaveAttribute('height', '48');
-    expect(IconComponent).toHaveAttribute('stroke', 'red');
-    expect(IconComponent).toHaveAttribute('stroke-width', '1');
-
-    expect(container.innerHTML).toMatchSnapshot();
-  });
-
   it('should apply vector-effect when nonScalingStroke is set', () => {
     const { container } = render(Smile, {
       color: 'red',
@@ -120,7 +103,6 @@ describe('Icon Component Accessibility', () => {
       props: {
         size: 48,
         color: 'red',
-        absoluteStrokeWidth: true,
       },
     });
 

packages/vue/src/Icon.ts

@@ -33,8 +33,6 @@ const Icon: FunctionalComponent<LucideProps & IconProps> = (
       size: 24,
       aliases: [],
     },
-    absoluteStrokeWidth,
-    'absolute-stroke-width': absoluteStrokeWidthKebabCase,
     nonScalingStroke,
     'non-scaling-stroke': nonScalingStrokeKebabCase,
     strokeWidth,
@@ -51,18 +49,10 @@ const Icon: FunctionalComponent<LucideProps & IconProps> = (
     size: contextSize,
     color: contextColor,
     strokeWidth: contextStrokeWidth = 2,
-    absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
     nonScalingStroke: contextNonScalingStroke = false,
     class: contextClass = '',
   } = useLucideProps();
 
-  const isAbsoluteStrokeWidth =
-    isEmptyString(absoluteStrokeWidth) ||
-    isEmptyString(absoluteStrokeWidthKebabCase) ||
-    absoluteStrokeWidth === true ||
-    absoluteStrokeWidthKebabCase === true ||
-    contextAbsoluteStrokeWidth === true;
-
   const isNonScalingStroke =
     isEmptyString(nonScalingStroke) ||
     isEmptyString(nonScalingStrokeKebabCase) ||
@@ -79,7 +69,6 @@ const Icon: FunctionalComponent<LucideProps & IconProps> = (
     width: width ?? size ?? contextSize,
     height: height ?? size ?? contextSize,
     strokeWidth: strokeWidth ?? strokeWidthKebabCase ?? contextStrokeWidth,
-    absoluteStrokeWidth: isAbsoluteStrokeWidth,
     nonScalingStroke: isNonScalingStroke,
     className: contextClass,
     hasA11yProp: (defaultSlot != null && defaultSlot.length > 0) || hasA11yProp(props),