refactor(SvgIcon): add css variable (#4394)

* refactor: 增加 Icon 图标大小变量

* refactor: SvgIcon 增加样式变量

Author: ArgoZhang

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;
 

src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css renamed to 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);
         }
+    }
+}

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";

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -306,6 +306,12 @@ $bb-groupbox-legend-padding: 0 .5rem;
 $bb-groupbox-legend-left: 1rem;
 $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%;