chore: add ability to resize SVG icons with width and height props

src/components/Header/src/Controls.vue

@@ -9,11 +9,21 @@
       data-dia="search"
       @click="handleOpenModal(true)"
     >
-      <SvgIcon icon-class="search" stroke="var(--text-white)" />
+      <SvgIcon
+        icon-class="search"
+        stroke="var(--text-white)"
+        width="2rem"
+        height="2rem"
+      />
     </span>
     <Dropdown v-if="enableMultiLanguage" @command="handleClick">
       <span class="ob-drop-shadow" data-dia="language">
-        <SvgIcon icon-class="globe" stroke="var(--text-white)" />
+        <SvgIcon
+          icon-class="globe"
+          stroke="var(--text-white)"
+          width="2rem"
+          height="2rem"
+        />
         <span v-if="$i18n.locale == 'cn'">中文</span>
         <span v-if="$i18n.locale == 'en'">EN</span>
       </span>
@@ -93,8 +103,6 @@ export default defineComponent({
     }
     .svg-icon {
       stroke: #fff;
-      height: 2rem;
-      width: 2rem;
       margin-right: 0.5rem;
       pointer-events: none;
     }

src/components/SvgIcon/index.vue

@@ -5,7 +5,13 @@
     class="svg-external-icon svg-icon"
     v-bind="$attrs"
   />
-  <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
+  <svg
+    v-else
+    :class="svgClass"
+    aria-hidden="true"
+    v-bind="$attrs"
+    :style="{ height: svgStyle.height, width: svgStyle.width }"
+  >
     <use
       :href="iconName"
       :fill="fill !== '' ? fill : svgStyle.fill"
@@ -47,9 +53,25 @@ export default defineComponent({
     svgType: {
       type: String as PropType<SvgTypes>,
       default: 'fill'
+    },
+    width: {
+      type: String,
+      default: '1em'
+    },
+    height: {
+      type: String,
+      default: '1em'
     }
   },
-  setup(props: { iconClass: string; className: string; svgType: SvgTypes }) {
+  setup(props: {
+    iconClass: string
+    className: string
+    svgType: SvgTypes
+    fill: string
+    stroke: string
+    width: string
+    height: string
+  }) {
     const appStore = useAppStore()
     const isExternalClass = computed(() => isExternalIcon(props.iconClass))
 
@@ -74,16 +96,25 @@ export default defineComponent({
       svgStyle: computed(() => {
         if (props.svgType === SvgTypes.fill) {
           return {
-            fill: 'currentColor',
-            stroke:
-              appStore.theme === 'theme-dark'
-                ? 'var(--background-primary)'
-                : 'white'
+            fill: props.fill ? props.fill : 'currentColor',
+            stroke: props.stroke
+              ? props.stroke
+              : appStore.theme === 'theme-dark'
+              ? 'var(--background-primary)'
+              : 'white',
+            width: props.width,
+            height: props.height
           }
         } else {
           return {
-            fill: 'none',
-            stroke: appStore.theme === 'theme-dark' ? 'white' : 'currentColor'
+            fill: props.fill ? props.fill : 'none',
+            stroke: props.stroke
+              ? props.stroke
+              : appStore.theme === 'theme-dark'
+              ? 'white'
+              : 'currentColor',
+            width: props.width,
+            height: props.height
           }
         }
       }),
@@ -98,8 +129,6 @@ export default defineComponent({
 
 <style scoped>
 .svg-icon {
-  width: 1em;
-  height: 1em;
   vertical-align: -0.15em;
   overflow: hidden;
   display: inline;