From 5565c1c3a0695d09fa724e890be6ce8f7637868c Mon Sep 17 00:00:00 2001
From: Argo-AscioTech <argo@live.ca>
Date: Sat, 5 Oct 2024 22:35:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20Icon=20?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=A4=A7=E5=B0=8F=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Icon/BootstrapBlazorIcon.razor.scss             | 2 +-
 src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss b/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
index c14eb0e2261..ba65f6c914e 100644
--- a/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
+++ b/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
@@ -1,5 +1,5 @@
 .bb-icon {
-    --bb-icon-width: 12px;
+    --bb-icon-width: #{$bb-icon-width};
     --bb-icon-color: var(--bs-body-color);
     display: inline-flex;
 
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index dbb21477eaf..4fc4b6aefa4 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -306,6 +306,9 @@ $bb-groupbox-legend-padding: 0 .5rem;
 $bb-groupbox-legend-left: 1rem;
 $bb-groupbox-legend-top: -10px;
 
+// Icon
+$bb-icon-width: 12px;
+
 // ImagePreviewer
 $bb-viewer-button-bg: #606266;
 $bb-viewer-border-radius: 50%;

From 2819f28d6c9939e40b14121c79de2be8de00135e Mon Sep 17 00:00:00 2001
From: Argo-AscioTech <argo@live.ca>
Date: Sat, 5 Oct 2024 22:36:16 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20SvgIcon=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Icon/{SvgIcon.razor.css => SvgIcon.razor.scss}   | 12 ++++++------
 src/BootstrapBlazor/wwwroot/scss/components.scss     |  1 +
 .../wwwroot/scss/theme/bootstrapblazor.scss          |  3 +++
 3 files changed, 10 insertions(+), 6 deletions(-)
 rename src/BootstrapBlazor/Components/Icon/{SvgIcon.razor.css => SvgIcon.razor.scss} (67%)

diff --git a/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css b/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
similarity index 67%
rename from src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css
rename to src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
index 1068c59281a..a05bafe6572 100644
--- a/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css
+++ b/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
@@ -1,14 +1,14 @@
-.bb-svg-icon {
-    --bb-svg-icon-width: 12px;
+.bb-svg-icon {
+    --bb-svg-icon-width: #{$bb-svg-icon-width};
     --bb-svg-icon-color: var(--bs-body-color);
     display: inline-flex;
-}
 
-    .bb-svg-icon > svg {
+    > svg {
         width: var(--bb-svg-icon-width);
         height: var(--bb-svg-icon-width);
-    }
 
-        .bb-svg-icon > svg > * {
+        > * {
             stroke: var(--bb-svg-icon-color);
         }
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
index 4551beb7eec..bb5e3c9ddbe 100644
--- a/src/BootstrapBlazor/wwwroot/scss/components.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -47,6 +47,7 @@
 @import "../../Components/GroupBox/GroupBox.razor.scss";
 @import "../../Components/Handwritten/Handwritten.razor.scss";
 @import "../../Components/Icon/BootstrapBlazorIcon.razor.scss";
+@import "../../Components/Icon/SvgIcon.razor.scss";
 @import "../../Components/IFrame/IFrame.razor.scss";
 @import "../../Components/ImagePreviewer/ImagePreviewer.razor.scss";
 @import "../../Components/ImageViewer/ImageViewer.razor.scss";
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index 4fc4b6aefa4..2731b5b09c1 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -309,6 +309,9 @@ $bb-groupbox-legend-top: -10px;
 // Icon
 $bb-icon-width: 12px;
 
+// Icon Svg
+$bb-svg-icon-width: 12px;
+
 // ImagePreviewer
 $bb-viewer-button-bg: #606266;
 $bb-viewer-border-radius: 50%;