Introducing absoluteStrokeWidth option on Lucide Components (#939)

* Add more music icons and another mic icon (#746)

* Revert "Add more music icons and another mic icon (#746)" (#750)

This reverts commit 57cba6ae0e.

* add scale Stroke width

* Added scaleStrokeWidth prop to all packages

* Add scaleStrokeWidth to types

* Rename scaleStrokeWidth to absoluteStrokeWidth

* Adds common API elements to the Angular package (#949)

* Almost complete rewrite of the Angular package

* Update tsconfig.spec.json

* fixes icon build export file name

* Updates Angular documentation with the new properties + provider injection

* Update lucide-angular.md

* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages

* removed codelyzer from devDeps + added flexible angular core dependencies

* Deprecates createElement helper in favour of Renderer2 to support SSR

---------

Co-authored-by: Karsa <karsa@karsa.org>

* Add absoluteStrokeWidth in docs

* update snapshots

* Manual merge of main

* Fixed incorrectly merged pnpm-lock.yaml

* Fixes lucide-angular build

* [lucide-angular] Global configuration for properties + bugfix for legacy icon provider   (#1012)

* Almost complete rewrite of the Angular package

* Update tsconfig.spec.json

* fixes icon build export file name

* Updates Angular documentation with the new properties + provider injection

* Update lucide-angular.md

* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages

* removed codelyzer from devDeps + added flexible angular core dependencies

* Deprecates createElement helper in favour of Renderer2 to support SSR

* Added global configuration and fixed undefined bug in legacy icon provider. Also updated README.md

* Replaces removed line in README.md

* Fixes merge error

* Updates export template to use the non-deprecated type

* downgrade building to ng-cli@13

* downgrade to es2020

---------

Co-authored-by: Karsa <karsa@karsa.org>

* rename scaleStrokeWidth to absoluteStrokeWidth in readme

---------

Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Eric Fennis <eric@dreamteam.nl>
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@nac41112.nedap.local>

packages/lucide-vue-next/README.md

@@ -45,12 +45,13 @@ export default {
 
 ### Props
 
-| name           | type     | default      |
-| -------------- | -------- | ------------ |
-| `size`         | _Number_ | 24           |
-| `color`        | _String_ | currentColor |
-| `strokeWidth`  | _Number_ | 2            |
-| `defaultClass` | _String_ | lucide-icon  |
+|  name                   |   type    |  default     |
+| ----------------------- | --------- | ------------ |
+| `size`                  | *number*  | 24           |
+| `color`                 | *string*  | currentColor |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *string*  | lucide-icon  |
 
 ### Custom props
 

packages/lucide-vue-next/scripts/buildTypes.mjs

@@ -30,6 +30,7 @@ declare module 'lucide-vue-next'
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
   size?: 24 | number
+  absoluteStrokeWidth?: boolean
 }
 
 export type Icon = (props: SVGProps) => FunctionalComponent<SVGProps>

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

@@ -5,6 +5,8 @@ import defaultAttributes from './defaultAttributes';
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
   size?: 24 | number
+  strokeWidth?: number | string
+  absoluteStrokeWidth?: boolean
 }
 
 
@@ -21,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, color, ...props }, // props
+  { size, strokeWidth = 2, absoluteStrokeWidth, color, ...props }, // props
   { attrs, slots } // context
   ) => {
   return h(
@@ -31,6 +33,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionalCompo
       width: size || defaultAttributes.width,
       height: size || defaultAttributes.height,
       stroke: color || defaultAttributes.stroke,
+      'stroke-width': absoluteStrokeWidth ?  Number(strokeWidth) * 24 / Number(size) : strokeWidth,
       ...attrs,
       class: ['lucide', `lucide-${toKebabCase(iconName)}`, attrs?.class || ''],
       ...props,

packages/lucide-vue-next/tests/lucide-vue-next.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import {render, fireEvent, cleanup } from '@testing-library/vue'
-import { Smile } from '../src/icons'
+import { Smile, Edit2, Pen } from '../src/lucide-vue-next'
 
 describe('Using lucide icon components', () => {
   afterEach(() => cleanup())
@@ -89,4 +89,46 @@ describe('Using lucide icon components', () => {
     expect(textElement).toBeInTheDocument()
     expect(container).toMatchSnapshot();
   });
+
+  it('should render the alias icon', () => {
+    const { container } = render(Pen, {
+      props: {
+        size: 48,
+        color: 'red',
+        'stroke-width': 4
+      }
+    })
+
+    const PenIconRenderedHTML = container.innerHTML
+
+    cleanup()
+
+    const { container: Edit2Container } = render(Edit2, {
+      props: {
+        size: 48,
+        color: 'red',
+        'stroke-width': 4
+      }
+    })
+
+    console.log(PenIconRenderedHTML, Edit2Container.innerHTML)
+
+    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
+  })
+
+  it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
+    render(Pen, {
+      props: {
+        size: 48,
+        color: 'red',
+        absoluteStrokeWidth: true
+      }
+    })
+
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon.getAttribute('width')).toBe('48')
+    expect(icon.getAttribute('stroke')).toBe('red')
+    expect(icon.getAttribute('stroke-width')).toBe('1')
+  })
 });