feat(icon): separate color with stroke color

CyanSalt · Apr 3, 2024 · 7bbe9c3 · 7bbe9c3
1 parent 8ba2126
commit 7bbe9c3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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);