From 7bbe9c3b5c800071c276eeb1987c81e502da6fe4 Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Wed, 3 Apr 2024 10:57:25 +0800
Subject: [PATCH] feat(icon): separate color with stroke color

---
 docs/components/icon.md | 22 ++++++++++++++++++++--
 src/icon/index.vue      |  7 ++++---
 src/select/index.vue    |  2 +-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/components/icon.md b/docs/components/icon.md
index 544e78e..bb00690 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -184,7 +184,25 @@ View all available icons [here](https://lucide.dev/icons/).
 
   </RStyle>
 
-  <RStyle name="line-width">
+  <RStyle name="stroke-color">
+
+  <template #values>
+
+  `<color>`
+
+  </template>
+
+  <template #default-value>
+
+  `var(--r-icon-color)`
+
+  </template>
+
+  Stroke line color of the icon.
+
+  </RStyle>
+
+  <RStyle name="stroke-width">
 
   <template #values>
 
@@ -198,7 +216,7 @@ View all available icons [here](https://lucide.dev/icons/).
 
   </template>
 
-  Line width of the icon.
+  Stroke line width of the icon.
 
   </RStyle>
 
diff --git a/src/icon/index.vue b/src/icon/index.vue
index 0cc71f3..cc26af9 100644
--- a/src/icon/index.vue
+++ b/src/icon/index.vue
@@ -51,11 +51,11 @@ const getReactionState = useReactionState()
 function draw(rc: RoughSVG, svg: SVGSVGElement) {
   emit('will-draw')
   getReactionState(reactions)
-  const strokeWidth = getLengthProperty(svg, '--r-icon-line-width') ?? 0
+  const strokeWidth = getLengthProperty(svg, '--r-icon-stroke-width') ?? 0
   const options: Options = {
     roughness: 0.5,
     disableMultiStroke: true,
-    stroke: 'var(--r-icon-color)',
+    stroke: 'var(--r-icon-stroke-color)',
     strokeWidth,
     fill: filled ? 'var(--r-icon-color)' : undefined,
   }
@@ -142,7 +142,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 <style lang="scss">
 .r-icon {
   --r-icon-color: var(--r-text-color);
-  --r-icon-line-width: 2px;
+  --r-icon-stroke-color: var(--r-icon-color);
+  --r-icon-stroke-width: 2px;
   display: inline-block;
   block-size: calc(1em + 4px);
   inline-size: calc(1em + 4px);
diff --git a/src/select/index.vue b/src/select/index.vue
index 12684dc..8ee7ab9 100644
--- a/src/select/index.vue
+++ b/src/select/index.vue
@@ -259,7 +259,7 @@ provide(labelsInjection, labels)
   }
 }
 .r-select__icon {
-  --r-icon-line-width: var(--r-select-border-width);
+  --r-icon-stroke-width: var(--r-select-border-width);
   --r-element-font-size: calc(1em + 4px);
   flex: none;
   margin-inline-start: calc(var(--r-common-box-padding-inline) - (1em + 4px) / 2 - 4px);