feat(): lucide icons support setting strokeWidth

Author: weareoutman

bricks/icons/docs/eo-icon.md

@@ -343,3 +343,36 @@ children:
         fallback:
           imgSrc: "https://cdn.jsdelivr.net/npm/[email protected]/icons/y-chart.svg"
 ```
+
+### Lucide stroke width
+
+Lucide icons support setting `strokeWidth` which defaults to `2` (and restrict to range `[0.5, 3]`).
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      display: grid
+      gridTemplateColumns: repeat(6, 1fr)
+      width: fit-content
+      gap: 0.25em 1em
+      fontSize: 36px
+  children:
+    - brick: :forEach
+      dataSource: [0.5, 1, 1.5, 2, 2.5, 3]
+      children:
+        - brick: eo-icon
+          properties:
+            lib: lucide
+            icon: ambulance
+            strokeWidth: <% ITEM %>
+    - brick: :forEach
+      dataSource: [0.5, 1, 1.5, 2, 2.5, 3]
+      children:
+        - brick: span
+          properties:
+            textContent: <% ITEM %>
+            style:
+              fontSize: 16px
+              justifySelf: center
+```

bricks/icons/src/general-icon/index.tsx

@@ -66,6 +66,7 @@ export interface IconProps extends DefineLinearGradientProps, ImgIconProps {
   theme?: string;
   category?: string;
   prefix?: string;
+  strokeWidth?: number;
 }
 
 const LIBS = new Set(["antd", "easyops", "fa", "lucide"]);
@@ -106,6 +107,12 @@ class GeneralIcon extends ReactNextElement implements IconProps {
    */
   @property() accessor prefix!: string;
 
+  /**
+   * Lucide 图标描线粗线，限制在区间 `[0.5, 3]`
+   * @default 2
+   */
+  @property({ type: Number }) accessor strokeWidth: number | undefined;
+
   /**
    * 设置当图标未找到时的回退图标
    */
@@ -157,6 +164,7 @@ class GeneralIcon extends ReactNextElement implements IconProps {
         theme={this.theme}
         category={this.category}
         prefix={this.prefix}
+        strokeWidth={this.strokeWidth}
         fallback={this.fallback}
         startColor={this.startColor}
         endColor={this.endColor}
@@ -188,6 +196,7 @@ function GeneralIconComponent({
     theme,
     category,
     prefix,
+    strokeWidth,
     keepSvgOriginalColor,
     imgSrc,
     imgStyle,
@@ -258,6 +267,6 @@ function GeneralIconComponent({
   ) : lib === "fa" ? (
     <WrappedFaIcon prefix={prefix} {...commonProps} />
   ) : lib === "lucide" ? (
-    <WrappedLucideIcon {...commonProps} />
+    <WrappedLucideIcon strokeWidth={strokeWidth} {...commonProps} />
   ) : null;
 }

bricks/icons/src/lucide-icon/index.ts

@@ -18,6 +18,7 @@ const { defineElement, property, event } = createDecorators();
 
 export interface LucideIconProps extends DefineLinearGradientProps {
   icon?: string;
+  strokeWidth?: number;
 }
 
 const styleText = [lucideStyleText, sharedStyleText].join("\n");
@@ -28,6 +29,12 @@ class LucideIcon extends NextElement implements LucideIconProps {
   /** 图标名 */
   @property() accessor icon: string | undefined;
 
+  /**
+   * 描线粗线，限制在区间 `[0.5, 3]`
+   * @default 2
+   */
+  @property({ type: Number }) accessor strokeWidth: number | undefined;
+
   /** 渐变色起始颜色 */
   @property() accessor startColor: string | undefined;
 
@@ -111,6 +118,14 @@ class LucideIcon extends NextElement implements LucideIconProps {
         )}"></stop></linearGradient>`;
         svg.insertBefore(defs, svg.firstChild);
       }
+
+      const strokeWidth = this.strokeWidth ?? 2;
+      if (strokeWidth !== 2) {
+        svg.setAttribute(
+          "stroke-width",
+          String(Math.max(0.5, Math.min(3, strokeWidth)))
+        );
+      }
     }
 
     this.shadowRoot.replaceChildren(...nodes);