From 0cadf8496a49c0b33994152c50de989bcdc778f4 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Sat, 14 Sep 2024 16:38:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=97=A0=E6=95=88svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../color-scheme/src/ColorScheme.vue          |    2 +-
 .../components/column-list/src/ColumnList.vue |    2 +-
 .../src/components/dashboard/DbToolbar.vue    |   12 +-
 .../FilterStyleSimpleSelector.vue             |   20 +-
 .../dashboard-style/OverallSetting.vue        |    4 +-
 .../dashboard-style/ViewSimpleTitle.vue       |   16 +-
 .../pre-subject/SubjectTemplateItem.vue       |    4 +-
 .../data-visualization/CanvasAttr.vue         |    2 +-
 .../data-visualization/ComponentToolBar.vue   |    9 +-
 .../data-visualization/DvToolbar.vue          |    8 +-
 .../data-visualization/RealTimeGroup.vue      |   10 +-
 .../data-visualization/RealTimeListTree.vue   |   16 +-
 .../data-visualization/RealTimeTreeGather.vue |    4 +-
 .../data-visualization/canvas/Shape.vue       |    4 +-
 .../components/filter-text/src/FilterText.vue |   14 +-
 .../handle-more/src/DvHandleMore.vue          |   12 +-
 .../components/handle-more/src/HandleMore.vue |   12 +-
 .../src/components/icon-custom/src/Icon.vue   |    2 +-
 .../visualization/CanvasBaseSetting.vue       |    2 +-
 .../visualization/CanvasCacheDialog.vue       |    4 +-
 .../components/visualization/CanvasOptBar.vue |    3 +-
 .../visualization/ComponentButtonLabel.vue    |    2 +-
 .../visualization/ComponentEditBar.vue        |   22 +-
 .../src/components/visualization/EditMenu.vue |    2 +-
 .../components/visualization/LinkJumpSet.vue  |   37 +-
 .../components/visualization/LinkageField.vue |  247 -
 .../components/visualization/LinkageSet.vue   |   27 +-
 .../visualization/OuterParamsSet.vue          |   15 +-
 .../visualization/OuterParamsSetDS.vue        |   25 +-
 .../visualization/common/DragInfo.vue         |    4 +-
 .../BackgroundItemOverall.vue                 |    8 +-
 .../component-background/BoardItem.vue        |    8 +-
 .../src/components/visualization/linkJump.vue |   18 +-
 .../canvas-icon/Component.vue                 |    2 +-
 .../custom-component/common/CommonEvent.vue   |    2 +-
 .../common/CommonStyleSet.vue                 |   26 +-
 .../common/TabCarouselSetting.vue             |    2 +-
 .../component-group/DragComponent.vue         |    4 +-
 .../component-group/UserViewGroup.vue         |    1 +
 .../custom-component/de-frame/FrameLinks.vue  |    2 +-
 .../de-tabs/CustomTabsSort.vue                |    2 +-
 .../custom-component/v-query/Component.vue    |    6 +-
 .../v-query/ConditionDefaultConfiguration.vue |    2 +-
 .../custom-component/v-query/QueryCascade.vue |   16 +-
 .../v-query/QueryConditionConfiguration.vue   |   66 +-
 .../v-query/TreeFieldDialog.vue               |    6 +-
 .../src/layout/components/AccountOperator.vue |    4 +-
 .../src/layout/components/AiComponent.vue     |    8 +-
 .../src/layout/components/AiTips.vue          |    2 +-
 .../src/layout/components/Copilot.vue         |    2 +-
 .../src/layout/components/Header.vue          |   22 +-
 .../src/layout/components/HeaderSystem.vue    |    4 +-
 .../src/layout/components/LangSelector.vue    |    2 +-
 .../src/layout/components/SystemCfg.vue       |    4 +-
 .../src/layout/components/ToolboxCfg.vue      |    2 +-
 .../src/layout/components/TopDoc.vue          |    2 +-
 .../src/layout/components/TopDocCard.vue      |    4 +-
 core/core-frontend/src/views/401/index.vue    |    4 +-
 core/core-frontend/src/views/404/index.vue    |    4 +-
 core/core-frontend/src/views/about/index.vue  |    2 +-
 .../editor/chart-type/ChartType.vue           |    1 +
 .../editor/common/ChartTemplateInfo.vue       |    5 +-
 .../editor/dataset-select/DatasetSelect.vue   |    6 +-
 .../editor/drag-item/DimensionItem.vue        |   69 +-
 .../components/editor/drag-item/DrillItem.vue |   10 +-
 .../editor/drag-item/FilterItem.vue           |   10 +-
 .../components/editor/drag-item/QuotaItem.vue |   77 +-
 .../drag-item/components/CustomSortEdit.vue   |    2 +-
 .../editor/editor-senior/Senior.vue           |   12 +-
 .../editor-senior/components/AssistLine.vue   |    4 +-
 .../editor-senior/components/Threshold.vue    |   12 +-
 .../components/dialog/AssistLineEdit.vue      |   12 +-
 .../components/dialog/TableThresholdEdit.vue  |   16 +-
 .../dialog/TextLabelThresholdEdit.vue         |    6 +-
 .../components/dialog/TextThresholdEdit.vue   |    6 +-
 .../editor/editor-style/VQueryChartStyle.vue  |   14 +-
 .../components/CustomColorStyleSelect.vue     |    2 +-
 .../components/DualYAxisSelectorInner.vue     |    4 +-
 .../components/IndicatorNameSelector.vue      |    8 +-
 .../components/IndicatorValueSelector.vue     |   42 +-
 .../editor-style/components/LabelSelector.vue |   18 +-
 .../components/LegendSelector.vue             |   24 +-
 .../editor-style/components/MiscSelector.vue  |   24 +-
 .../editor-style/components/TitleSelector.vue |   22 +-
 .../components/TooltipSelector.vue            |   14 +-
 .../editor-style/components/XAxisSelector.vue |    4 +-
 .../editor-style/components/YAxisSelector.vue |    4 +-
 .../components/table/CustomAggrEdit.vue       |   30 +-
 .../components/table/TableCellSelector.vue    |   16 +-
 .../components/table/TableHeaderSelector.vue  |   16 +-
 .../editor/filter/QuotaFilterEditor.vue       |    8 +-
 .../editor/filter/ResultFilterEditor.vue      |    8 +-
 .../editor/filter/auth-tree/AuthTree.vue      |    6 +-
 .../editor/filter/auth-tree/FilterFiled.vue   |   22 +-
 .../views/chart/components/editor/index.vue   |  148 +-
 .../views/components/ChartEmptyInfo.vue       |    1 +
 .../views/chart/components/views/index.vue    |   12 +-
 .../src/views/common/DeAppApply.vue           |    7 +-
 .../src/views/common/DeResourceArrow.vue      |    4 +-
 .../src/views/common/DeResourceGroupOpt.vue   |    8 +-
 .../src/views/common/DeResourceTree.vue       |   28 +-
 .../views/common/DeTemplatePreviewList.vue    |    8 +-
 .../src/views/copilot/DialogueChart.vue       |    4 +-
 .../core-frontend/src/views/copilot/index.vue |   20 +-
 .../views/dashboard/DashboardPreviewShow.vue  |    2 +-
 .../src/views/dashboard/MobileConfigPanel.vue |    6 +-
 .../MultiplexPreviewShow.vue                  |    8 +-
 .../views/data-visualization/PreviewHead.vue  |   10 +-
 .../views/data-visualization/PreviewShow.vue  |    2 +-
 .../src/views/data-visualization/index.vue    |    2 +-
 core/core-frontend/src/views/login/index.vue  |    4 +-
 .../views/mobile/components/DashboardCell.vue |    2 +-
 .../src/views/mobile/components/OrgCell.vue   |    2 +-
 .../views/mobile/components/Workbranch.vue    |    2 +-
 .../src/views/mobile/directory/index.vue      |   14 +-
 .../src/views/mobile/login/index.vue          |    8 +-
 .../src/views/mobile/personal/index.vue       |    4 +-
 .../src/views/share/share/ShareGrid.vue       |   10 +-
 .../src/views/share/share/ShareHandler.vue    |    7 +-
 .../src/views/share/share/ShareTicket.vue     |   22 +-
 .../src/views/share/share/ShareVisualHead.vue |    6 +-
 .../src/views/system/common/InfoTemplate.vue  |    6 +-
 .../src/views/system/font/FontInfo.vue        |    4 +-
 .../src/views/system/font/UploadDetail.vue    |    2 +-
 .../src/views/system/font/index.vue           |    6 +-
 .../views/system/parameter/map/Geometry.vue   |   10 +-
 .../system/parameter/map/GeometryEdit.vue     |    8 +-
 .../component/MarketPreview.vue               |    4 +-
 .../component/MarketPreviewV2.vue             |    8 +-
 .../src/views/template-market/index.vue       |    4 +-
 .../src/views/template/index.vue              |   14 +-
 .../visualized/data/dataset/ExportExcel.vue   |   24 +-
 .../data/dataset/auth-tree/AuthTree.vue       |    6 +-
 .../data/dataset/auth-tree/FilterFiled.vue    |   24 +-
 .../visualized/data/dataset/form/AddSql.vue   |   67 +-
 .../data/dataset/form/CalcFieldEdit.vue       |   58 +-
 .../data/dataset/form/CreatDsGroup.vue        |    8 +-
 .../data/dataset/form/DatasetUnion.vue        |   12 +-
 .../data/dataset/form/FieldMore.vue           |    2 +-
 .../data/dataset/form/UnionFieldList.vue      |   12 +-
 .../data/dataset/form/UnionItemEdit.vue       |   24 +-
 .../visualized/data/dataset/form/index.vue    |   75 +-
 .../views/visualized/data/dataset/index.vue   |   76 +-
 .../data/datasource/BaseInfoContent.vue       |    2 +-
 .../visualized/data/datasource/ExcelInfo.vue  |    4 +-
 .../visualized/data/datasource/FinishPage.vue |    4 +-
 .../visualized/data/datasource/SheetTabs.vue  |    4 +-
 .../datasource/form/ApiHttpRequestDraw.vue    |   16 +-
 .../data/datasource/form/ApiKeyValue.vue      |    8 +-
 .../data/datasource/form/ApiVariable.vue      |    8 +-
 .../data/datasource/form/CreatDsGroup.vue     |    8 +-
 .../data/datasource/form/DsTypeList.vue       |    4 +-
 .../data/datasource/form/EditorDetail.vue     |   31 +-
 .../data/datasource/form/ExcelDetail.vue      |    7 +-
 .../visualized/data/datasource/form/index.vue |   10 +-
 .../visualized/data/datasource/index.vue      |   85 +-
 .../view/panel/filter-config/index.vue        |   16 +-
 .../src/views/workbranch/ShortcutTable.vue    |   10 +-
 .../src/views/workbranch/index.vue            |    8 +-
 core/core-frontend/transformVue.js            | 4180 -----------------
 160 files changed, 1376 insertions(+), 5148 deletions(-)
 delete mode 100644 core/core-frontend/src/components/visualization/LinkageField.vue
 delete mode 100644 core/core-frontend/transformVue.js

diff --git a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
index 7fb754081c..acfb204d7e 100644
--- a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
+++ b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
@@ -100,7 +100,7 @@ const resetCustomColor = () => {
       </div>
       <el-button @click="changeShowCustom" style="margin-left: 8px" size="default" plain>
         <template #icon>
-          <icon name="icon_admin_outlined"><icon_admin_outlined /></icon>
+          <icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
         </template>
       </el-button>
     </div>
diff --git a/core/core-frontend/src/components/column-list/src/ColumnList.vue b/core/core-frontend/src/components/column-list/src/ColumnList.vue
index d54f622e0e..0c91e11249 100644
--- a/core/core-frontend/src/components/column-list/src/ColumnList.vue
+++ b/core/core-frontend/src/components/column-list/src/ColumnList.vue
@@ -57,7 +57,7 @@ const handleCheckAllChange = (val: CheckboxValueType) => {
     <el-button secondary>
       <template #icon>
         <el-icon>
-          <Icon name="icon-setting"><iconSetting /></Icon>
+          <Icon name="icon-setting"><iconSetting class="svg-icon" /></Icon>
         </el-icon>
       </template>
       {{ $t('component.columnList') }}
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index cd4df4857d..d85f86e81a 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -459,7 +459,9 @@ const initOpenHandler = newWindow => {
       </template>
       <template v-else>
         <el-icon v-if="!batchOptStatus" class="custom-el-icon back-icon" @click="backToMain()">
-          <Icon class="toolbar-icon" name="icon_left_outlined"><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"
+            ><icon_left_outlined class="svg-icon toolbar-icon"
+          /></Icon>
         </el-icon>
         <div class="left-area" v-if="editMode === 'edit' && !batchOptStatus">
           <span id="canvas-name" class="name-area" @dblclick="editCanvasName">
@@ -473,7 +475,7 @@ const initOpenHandler = newWindow => {
                 :disabled="snapshotIndex < 1"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"><icon_undo_outlined /></Icon>
+                <Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
 
@@ -485,7 +487,7 @@ const initOpenHandler = newWindow => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"><icon_redo_outlined /></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -599,13 +601,13 @@ const initOpenHandler = newWindow => {
             <el-dropdown-menu class="drop-style">
               <el-dropdown-item @click="previewInner">
                 <el-icon style="margin-right: 8px; font-size: 16px">
-                  <Icon name="icon_pc_fullscreen"><icon_pc_fullscreen /></Icon>
+                  <Icon name="icon_pc_fullscreen"><icon_pc_fullscreen class="svg-icon" /></Icon>
                 </el-icon>
                 全屏预览
               </el-dropdown-item>
               <el-dropdown-item @click="previewOuter()">
                 <el-icon style="margin-right: 8px; font-size: 16px">
-                  <Icon name="dv-preview-outer"><dvPreviewOuter /></Icon>
+                  <Icon name="dv-preview-outer"><dvPreviewOuter class="svg-icon" /></Icon>
                 </el-icon>
                 新页面预览
               </el-dropdown-item>
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
index 88d7e937a3..1a95a8f373 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@@ -14,7 +14,9 @@
                   @click="handleHorizontalChange('left')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_left-align_outlined" ><icon_leftAlign_outlined /></Icon>
+                  <Icon name="icon_left-align_outlined"
+                    ><icon_leftAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -26,7 +28,9 @@
                   @click="handleHorizontalChange('center')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_horizontal-align_outlined" ><icon_horizontalAlign_outlined /></Icon>
+                  <Icon name="icon_horizontal-align_outlined"
+                    ><icon_horizontalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -38,7 +42,9 @@
                   @click="handleHorizontalChange('right')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_right-align_outlined" ><icon_rightAlign_outlined /></Icon>
+                  <Icon name="icon_right-align_outlined"
+                    ><icon_rightAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-form-item>
@@ -54,7 +60,9 @@
                   @click="handleHorizontalChange('vertical', 'layout')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_title-top-align_outlined" ><icon_titleTopAlign_outlined /></Icon>
+                  <Icon name="icon_title-top-align_outlined"
+                    ><icon_titleTopAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -66,7 +74,9 @@
                   @click="handleHorizontalChange('horizontal', 'layout')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_title-left-align_outlined" ><icon_titleLeftAlign_outlined /></Icon>
+                  <Icon name="icon_title-left-align_outlined"
+                    ><icon_titleLeftAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-form-item>
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index 4d2e0b5347..623ecc9b08 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -90,7 +90,7 @@
           style="margin-left: 4px"
           :class="{ 'hint-icon--dark': themes === 'dark' }"
         >
-          <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+          <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
         </el-icon>
       </el-tooltip>
     </el-form-item>
@@ -145,7 +145,7 @@
               </div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-              <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
index 9c9b9649df..adba344311 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
@@ -42,7 +42,7 @@
             @click="checkBold"
           >
             <el-icon>
-              <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+              <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -57,7 +57,7 @@
             @click="checkItalic"
           >
             <el-icon>
-              <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+              <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -74,7 +74,9 @@
             @click="setPosition('left')"
           >
             <el-icon>
-              <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
+              <Icon name="icon_left-alignment_outlined"
+                ><icon_leftAlignment_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -88,7 +90,9 @@
             @click="setPosition('center')"
           >
             <el-icon>
-              <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
+              <Icon name="icon_center-alignment_outlined"
+                ><icon_centerAlignment_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -102,7 +106,9 @@
             @click="setPosition('right')"
           >
             <el-icon>
-              <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
+              <Icon name="icon_right-alignment_outlined"
+                ><icon_rightAlignment_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
index f96c74c827..1a09845db7 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
@@ -16,7 +16,9 @@
           width="172"
           height="79"
         />
-        <Icon v-else name="dv-no-img" style="width: 172px; height: 79px" ><dvNoImg /></Icon>
+        <Icon v-else name="dv-no-img"
+          ><dvNoImg class="svg-icon" style="width: 172px; height: 79px"
+        /></Icon>
       </div>
       <div class="title-main">
         <div class="title-area">
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index fb4de1fac9..855c42a8a4 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -126,7 +126,7 @@ onMounted(() => {
                   <div>预览时生效</div>
                 </template>
                 <el-icon class="hint-icon--dark">
-                  <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-select
diff --git a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
index f0a405187a..3d68880046 100644
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import dvReposition from '@/assets/svg/dv-reposition.svg'
+import dvMax from '@/assets/svg/dv-max.svg'
+import dvMin from '@/assets/svg/dv-min.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
@@ -124,7 +127,7 @@ onUnmounted(() => {
       />
 
       <el-icon @click="scaleDecrease(1)" class="hover-icon-custom" style="margin-right: 12px">
-        <Icon name="dv-min"></Icon
+        <Icon name="dv-min"><dvMin class="svg-icon"></dvMin></Icon
       ></el-icon>
       <el-slider
         style="width: 100px; margin-right: 12px"
@@ -136,12 +139,12 @@ onUnmounted(() => {
         size="small"
       />
       <el-icon @click="scaleIncrease(1)" class="hover-icon-custom">
-        <Icon name="dv-max"></Icon
+        <Icon name="dv-max"><dvMax class="svg-icon"></dvMax></Icon
       ></el-icon>
       <el-divider direction="vertical" class="custom-divider_scale" />
       <el-tooltip effect="ndark" content="定位到中心点" placement="top">
         <el-icon @click="reposition" class="hover-icon-custom" style="margin-right: 12px">
-          <Icon name="dv-reposition"></Icon
+          <Icon name="dv-reposition"><dvReposition class="svg-icon"></dvReposition></Icon
         ></el-icon>
       </el-tooltip>
     </div>
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index b9fbf4ec6f..93ea08ecbf 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -288,7 +288,9 @@ const fullScreenPreview = () => {
       </template>
       <template v-else>
         <el-icon class="custom-el-icon back-icon" @click="backToMain()">
-          <Icon class="toolbar-icon" name="icon_left_outlined"><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"
+            ><icon_left_outlined class="svg-icon toolbar-icon"
+          /></Icon>
         </el-icon>
         <div class="left-area">
           <span id="dv-canvas-name" class="name-area" @dblclick="editCanvasName">
@@ -301,7 +303,7 @@ const fullScreenPreview = () => {
                 :class="{ 'toolbar-icon-disabled': snapshotIndex < 1 }"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"><icon_undo_outlined /></Icon>
+                <Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
             <el-tooltip effect="ndark" :content="$t('commons.reduction')" placement="bottom">
@@ -312,7 +314,7 @@ const fullScreenPreview = () => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"><icon_redo_outlined /></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index fe85cef174..2ed822d42c 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -322,24 +322,24 @@ const handleContextMenu = e => {
                   v-show="!getComponent(index).isShow"
                   @click="showComponent"
                 >
-                  <Icon name="dv-eye-close" class="opt-icon"><dvEyeClose /></Icon>
+                  <Icon name="dv-eye-close"><dvEyeClose class="svg-icon opt-icon" /></Icon>
                 </el-icon>
                 <el-icon
                   class="component-base"
                   v-show="getComponent(index)?.isShow"
                   @click="hideComponent"
                 >
-                  <Icon name="dv-show" class="opt-icon"><dvShow /></Icon>
+                  <Icon name="dv-show"><dvShow class="svg-icon opt-icon" /></Icon>
                 </el-icon>
                 <el-icon v-show="!getComponent(index)?.isLock" class="component-base" @click="lock">
-                  <Icon class="opt-icon" name="dv-unlock"><dvUnlock /></Icon>
+                  <Icon name="dv-unlock"><dvUnlock class="svg-icon opt-icon" /></Icon>
                 </el-icon>
                 <el-icon
                   class="component-base component-icon-display"
                   v-show="getComponent(index)?.isLock"
                   @click="unlock"
                 >
-                  <Icon name="dv-lock" class="opt-icon"><dvLock /></Icon>
+                  <Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></Icon>
                 </el-icon>
                 <el-dropdown
                   ref="dropdownMore"
@@ -350,7 +350,7 @@ const handleContextMenu = e => {
                 >
                   <span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
                     <el-icon class="component-base">
-                      <Icon name="dv-more" class="opt-icon"><dvMore /></Icon>
+                      <Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
                     </el-icon>
                   </span>
                   <template #dropdown>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 598edb8eea..d06241bbec 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -446,7 +446,7 @@ const canvasChange = () => {
                       @click="hiddenAreaOnClick($event, element)"
                     >
                       <el-icon class="component-base">
-                        <Icon name="dv-more" class="opt-icon"><dvMore /></Icon>
+                        <Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
                       </el-icon>
                     </span>
                     <template #dropdown>
@@ -506,13 +506,13 @@ const canvasChange = () => {
                       v-show="getComponent(index)?.expand"
                       name="dv-expand-down"
                       class="expand-icon"
-                      ><dvExpandDown
+                      ><dvExpandDown class="svg-icon expand-icon"
                     /></Icon>
                     <Icon
                       v-show="!getComponent(index)?.expand"
                       name="dv-expand-right"
                       class="expand-icon"
-                      ><dvExpandRight
+                      ><dvExpandRight class="svg-icon expand-icon"
                     /></Icon>
                   </el-icon>
                 </div>
@@ -540,28 +540,28 @@ const canvasChange = () => {
                     v-show="!getComponent(index).isShow"
                     @click="showComponent"
                   >
-                    <Icon name="dv-eye-close" class="opt-icon"><dvEyeClose /></Icon>
+                    <Icon name="dv-eye-close"><dvEyeClose class="svg-icon opt-icon" /></Icon>
                   </el-icon>
                   <el-icon
                     class="component-base"
                     v-show="getComponent(index)?.isShow"
                     @click="hideComponent"
                   >
-                    <Icon name="dv-show" class="opt-icon"><dvShow /></Icon>
+                    <Icon name="dv-show"><dvShow class="svg-icon opt-icon" /></Icon>
                   </el-icon>
                   <el-icon
                     v-show="!getComponent(index)?.isLock"
                     class="component-base"
                     @click="lock"
                   >
-                    <Icon class="opt-icon" name="dv-unlock"><dvUnlock /></Icon>
+                    <Icon name="dv-unlock"><dvUnlock class="svg-icon opt-icon" /></Icon>
                   </el-icon>
                   <el-icon
                     class="component-base component-icon-display"
                     v-show="getComponent(index)?.isLock"
                     @click="unlock"
                   >
-                    <Icon name="dv-lock" class="opt-icon"><dvLock /></Icon>
+                    <Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></Icon>
                   </el-icon>
                   <el-dropdown
                     ref="dropdownMore"
@@ -572,7 +572,7 @@ const canvasChange = () => {
                   >
                     <span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
                       <el-icon class="component-base">
-                        <Icon name="dv-more" class="opt-icon"><dvMore /></Icon>
+                        <Icon name="dv-more"><dvMore class="svg-icon opt-icon" /></Icon>
                       </el-icon>
                     </span>
                     <template #dropdown>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue b/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
index 3ae88d9d70..5a75674444 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template>
+  <div>ts</div>
+</template>
 
 <style scoped lang="less"></style>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 0e2042c77c..68c87e5801 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -11,7 +11,7 @@
   >
     <div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
       <el-icon>
-        <Icon name="mobile-checkbox"><mobileCheckbox /></Icon>
+        <Icon name="mobile-checkbox"><mobileCheckbox class="svg-icon" /></Icon>
       </el-icon>
     </div>
     <div
@@ -46,7 +46,7 @@
         @click="selectCurComponent"
         @mousedown="handleInnerMouseDownOnShape"
       >
-        <Icon v-show="shapeLock" class="iconfont icon-suo" name="dv-lock"><dvLock /></Icon>
+        <Icon v-if="shapeLock" name="dv-lock"><dvLock class="svg-icon iconfont icon-suo" /></Icon>
         <!--边框背景-->
         <Board
           v-if="svgInnerEnable"
diff --git a/core/core-frontend/src/components/filter-text/src/FilterText.vue b/core/core-frontend/src/components/filter-text/src/FilterText.vue
index 4c764506a9..edd2f5b87c 100644
--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@@ -54,7 +54,7 @@ watch(
     <span class="title">个结果</span>
     <el-divider direction="vertical" />
     <el-icon @click="scrollPre" class="arrow-left arrow-filter" v-if="showScroll">
-      <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+      <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
     </el-icon>
     <div class="filter-texts-container" ref="container">
       <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
@@ -62,7 +62,7 @@ watch(
           {{ ele }}
         </el-tooltip>
         <el-icon @click="clearFilter(index)">
-          <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
+          <Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
         </el-icon>
       </p>
       <el-button
@@ -72,13 +72,15 @@ watch(
         @click="clearFilterAll"
       >
         <template #icon>
-          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+          <Icon name="icon_delete-trash_outlined"
+            ><icon_deleteTrash_outlined class="svg-icon"
+          /></Icon>
         </template>
         清空条件</el-button
       >
     </div>
     <el-icon @click="scrollNext" class="arrow-right arrow-filter" v-if="showScroll">
-      <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+      <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
     </el-icon>
     <el-button
       type="text"
@@ -88,7 +90,9 @@ watch(
       @click="clearFilterAll"
     >
       <template #icon>
-        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+        <Icon name="icon_delete-trash_outlined"
+          ><icon_deleteTrash_outlined class="svg-icon"
+        /></Icon>
       </template>
       清空条件</el-button
     >
diff --git a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
index f2427a4b27..9fc262c8be 100644
--- a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
@@ -3,9 +3,8 @@ import { Icon } from '@/components/icon-custom'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import { propTypes } from '@/utils/propTypes'
 import type { Placement } from 'element-plus-secondary'
-import { ref, PropType, type Component } from 'vue'
+import { ref, PropType } from 'vue'
 import ShareHandler from '@/views/share/share/ShareHandler.vue'
-import { object } from 'vue-types'
 export interface Menu {
   svgName?: string
   label?: string
@@ -23,10 +22,7 @@ const props = defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: {
-    type: object<Component>,
-    default: icon_more_outlined
-  },
+  iconName: propTypes.string.def(''),
   inTable: propTypes.bool.def(false),
   resourceType: propTypes.string.def('dashboard'),
   node: {
@@ -72,7 +68,7 @@ const emit = defineEmits(['handleCommand'])
     @command="handleCommand"
   >
     <el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
-      <Icon><component :is="iconName"></component></Icon>
+      <Icon><component class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu>
@@ -85,7 +81,7 @@ const emit = defineEmits(['handleCommand'])
           :class="{ 'de-hidden-drop-item': ele.hidden }"
         >
           <el-icon class="handle-icon" v-if="ele.svgName">
-            <Icon><component :is="ele.svgName"></component></Icon>
+            <Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
           </el-icon>
           {{ ele.label }}
         </el-dropdown-item>
diff --git a/core/core-frontend/src/components/handle-more/src/HandleMore.vue b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
index 3420c50cae..493a14d26b 100644
--- a/core/core-frontend/src/components/handle-more/src/HandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
@@ -3,8 +3,7 @@ import { Icon } from '@/components/icon-custom'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import { propTypes } from '@/utils/propTypes'
 import type { Placement } from 'element-plus-secondary'
-import { PropType, type Component } from 'vue'
-import { object } from 'vue-types'
+import { PropType } from 'vue'
 
 export interface Menu {
   svgName?: string
@@ -22,10 +21,7 @@ defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: {
-    type: object<Component>,
-    default: icon_more_outlined
-  },
+  iconName: propTypes.string.def(''),
   iconSize: propTypes.string.def('16px'),
   inTable: propTypes.bool.def(false)
 })
@@ -45,7 +41,7 @@ const emit = defineEmits(['handleCommand'])
     @command="handleCommand"
   >
     <el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
-      <Icon><component :is="iconName"></component></Icon>
+      <Icon><component class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu :persistent="false">
@@ -57,7 +53,7 @@ const emit = defineEmits(['handleCommand'])
           :disabled="ele.disabled"
         >
           <el-icon class="handle-icon" :style="{ fontSize: iconSize }" v-if="ele.svgName">
-            <Icon><component :is="ele.svgName"></component></Icon>
+            <Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
           </el-icon>
           {{ ele.label }}
         </el-dropdown-item>
diff --git a/core/core-frontend/src/components/icon-custom/src/Icon.vue b/core/core-frontend/src/components/icon-custom/src/Icon.vue
index 4c2790d38f..ae8705909c 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -23,7 +23,7 @@ const svgClass = computed(() => {
     :class="svgClass"
     aria-hidden="true"
   ></div>
-  <slot v-else :class="svgClass" />
+  <slot v-else />
 </template>
 <style lang="less" scope>
 .svg-icon {
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index b0643d2a3c..6eaf45a023 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -15,7 +15,7 @@
                 <div>预览时启用</div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index 4217739247..52150a9452 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -9,7 +9,9 @@
   >
     <el-row style="height: 20px">
       <el-col :span="3">
-        <Icon name="warn-tree" style="width: 20px; height: 20px; float: right" ><warnTree /></Icon>
+        <Icon name="warn-tree"
+          ><warnTree style="width: 20px; height: 20px; float: right" class="svg-icon"
+        /></Icon>
       </el-col>
       <el-col :span="21">
         <span style="font-size: 13px; margin-left: 10px; font-weight: bold; line-height: 20px">
diff --git a/core/core-frontend/src/components/visualization/CanvasOptBar.vue b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
index ab04dbd909..ea3b5e3af2 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
@@ -6,7 +6,8 @@
     @mousedown="handOptBarMousedown"
   >
     <el-button size="mini" type="warning" @click="clearAllLinkage"
-      ><el-icon class="bar-base-icon"> <Icon name="dv-bar-unLinkage"><dvBarUnLinkage /></Icon></el-icon
+      ><el-icon class="bar-base-icon">
+        <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
       >{{ $t('visualization.remove_all_linkage') }}</el-button
     >
   </div>
diff --git a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
index 7a1db2488d..47aab01e43 100644
--- a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
@@ -20,7 +20,7 @@ const emits = defineEmits(['customClick'])
   <div class="flex-align-center">
     <el-row class="group_icon" :title="tips" @click="emits('customClick')">
       <el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
-        <Icon class="toolbar-icon"><component :is="iconName"></component></Icon>
+        <Icon><component class="svg-icon toolbar-icon" :is="iconName"></component></Icon>
         <span>{{ title }}</span>
       </el-col>
     </el-row>
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 317ecb5017..7a204e9091 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@@ -23,12 +23,12 @@
     <template v-if="element.component === 'VQuery' && showPosition === 'canvas'">
       <span title="添加查询条件">
         <el-icon class="bar-base-icon" @click="addQueryCriteria">
-          <Icon name="icon_add_outlined"></Icon
+          <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon
         ></el-icon>
       </span>
       <span title="编辑查询条件">
         <el-icon class="bar-base-icon" @click="editQueryCriteria">
-          <Icon name="icon_edit_outlined"></Icon
+          <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon
         ></el-icon>
       </span>
     </template>
@@ -40,7 +40,7 @@
     >
       <span>
         <el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'enlarge')">
-          <Icon name="dv-bar-enlarge" ><dvBarEnlarge /></Icon>
+          <Icon name="dv-bar-enlarge"><dvBarEnlarge class="svg-icon" /></Icon>
         </el-icon>
       </span>
     </el-tooltip>
@@ -52,7 +52,7 @@
     >
       <span>
         <el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'details')">
-          <Icon name="dv-details" ><dvDetails /></Icon>
+          <Icon name="dv-details"><dvDetails class="svg-icon" /></Icon>
         </el-icon>
       </span>
     </el-tooltip>
@@ -64,7 +64,7 @@
     >
       <span>
         <el-icon class="bar-base-icon" @click="datasetParamsInit">
-          <Icon name="icon_params_setting"><icon_params_setting /></Icon>
+          <Icon name="icon_params_setting"><icon_params_setting class="svg-icon" /></Icon>
         </el-icon>
       </span>
     </el-tooltip>
@@ -82,7 +82,7 @@
       v-if="barShowCheck('unLinkage') && existLinkage"
     >
       <el-icon class="bar-base-icon" @click="clearLinkage">
-        <Icon name="dv-bar-unLinkage" ><dvBarUnLinkage /></Icon>
+        <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon>
       </el-icon>
     </span>
     <div v-if="barShowCheck('batchOpt')" class="bar-checkbox-area">
@@ -97,7 +97,7 @@
     >
       <el-icon class="bar-base-icon">
         <el-tooltip :content="t('visualization.more')" effect="dark" placement="bottom">
-          <icon name="icon_more_outlined" ><icon_more_outlined /></icon>
+          <icon name="icon_more_outlined"><icon_more_outlined class="svg-icon" /></icon>
         </el-tooltip>
       </el-icon>
       <template #dropdown>
@@ -165,7 +165,7 @@
     >
       <el-icon @click="downloadClick" class="bar-base-icon">
         <el-tooltip :content="t('chart.export')" effect="dark" placement="bottom">
-          <icon name="dv-preview-download" ><dvPreviewDownload /></icon>
+          <icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></icon>
         </el-tooltip>
       </el-icon>
       <template #dropdown>
@@ -184,7 +184,9 @@
     </el-dropdown>
     <el-popover v-if="selectFieldShow" width="200" trigger="click" @mousedown="fieldsAreaDown">
       <template #reference>
-        <el-icon class="bar-base-icon"> <Icon name="database"><database /></Icon></el-icon>
+        <el-icon class="bar-base-icon">
+          <Icon name="database"><database class="svg-icon" /></Icon
+        ></el-icon>
       </template>
       <fields-list :fields="state.curFields" :element="element" />
     </el-popover>
@@ -193,6 +195,8 @@
 </template>
 
 <script lang="ts" setup>
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'
 import dvDetails from '@/assets/svg/dv-details.svg'
 import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
diff --git a/core/core-frontend/src/components/visualization/EditMenu.vue b/core/core-frontend/src/components/visualization/EditMenu.vue
index 9aa68b1c78..c5a9bc931b 100644
--- a/core/core-frontend/src/components/visualization/EditMenu.vue
+++ b/core/core-frontend/src/components/visualization/EditMenu.vue
@@ -18,7 +18,7 @@ onMounted(() => {
     @command="handleSetLanguage"
   >
     <el-icon>
-      <Icon name="language" ><language /></Icon>
+      <Icon name="language"><language class="svg-icon" /></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu>
diff --git a/core/core-frontend/src/components/visualization/LinkJumpSet.vue b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
index 15603ea913..f86bc2af67 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -15,14 +15,17 @@
           <span class="top-area-text">已选图表：</span>
           <span class="top-area-value">
             <Icon class-name="view-type-icon"
-              ><component :is="iconChartMap[state.curJumpViewInfo.type]"></component
+              ><component
+                class="svg-icon view-type-icon"
+                :is="iconChartMap[state.curJumpViewInfo.type]"
+              ></component
             ></Icon>
             {{ state.curJumpViewInfo.title }}</span
           >
           <span class="top-area-text margin-left">所用数据集：</span>
           <span class="top-area-value">
-            <Icon style="vertical-align: -0.2em" class-name="view-type-icon" name="dataset-outline"
-              ><datasetOutline
+            <Icon name="dataset-outline"
+              ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
             /></Icon>
             {{ state.curDatasetInfo.name }}</span
           >
@@ -136,8 +139,8 @@
                           </el-form-item>
                         </div>
                         <div class="icon-center">
-                          <Icon style="width: 20px; height: 20px" name="dv-link-target"
-                            ><dvLinkTarget
+                          <Icon name="dv-link-target"
+                            ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
                           /></Icon>
                         </div>
                         <div style="flex: 1">
@@ -159,10 +162,12 @@
                                     style="display: inline-block"
                                     v-if="data.leaf"
                                   >
-                                    <Icon name="dv-dashboard-spine"><dvDashboardSpine /></Icon>
+                                    <Icon name="dv-dashboard-spine"
+                                      ><dvDashboardSpine class="svg-icon"
+                                    /></Icon>
                                   </el-icon>
                                   <el-icon size="18px" style="display: inline-block" v-else>
-                                    <Icon name="dv-folder"><dvFolder /></Icon>
+                                    <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                                   </el-icon>
                                   <span
                                     style="margin-left: 8px; font-size: 14px"
@@ -220,8 +225,8 @@
                               </el-select>
                             </div>
                             <div class="icon-center">
-                              <Icon style="width: 20px; height: 20px" name="dv-link-target"
-                                ><dvLinkTarget
+                              <Icon name="dv-link-target"
+                                ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
                               /></Icon>
                             </div>
                             <div style="flex: 1">
@@ -289,7 +294,7 @@
                             >
                               <el-icon size="20px">
                                 <Icon name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined
+                                  ><icon_deleteTrash_outlined class="svg-icon"
                                 /></Icon>
                               </el-icon>
                             </el-button>
@@ -319,7 +324,9 @@
                               {{ $t('visualization.target_url_tips') }}
                             </template>
                             <el-icon size="16px" class="hint-icon">
-                              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                              <Icon name="icon_info_outlined"
+                                ><icon_info_outlined class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -339,7 +346,9 @@
                               <span v-html="$t('chart.reference_field_tip')"></span>
                             </template>
                             <el-icon size="16px" class="hint-icon">
-                              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                              <Icon name="icon_info_outlined"
+                                ><icon_info_outlined class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -363,8 +372,10 @@
                               @click="insertFieldToCodeMirror('[' + item.sourceFieldName + ']')"
                             >
                               <el-icon>
-                                <Icon :className="`field-icon-${fieldType[item.sourceDeType]}`"
+                                <Icon
                                   ><component
+                                    class="svg-icon"
+                                    :className="`field-icon-${fieldType[item.sourceDeType]}`"
                                     :is="iconFieldMap[fieldType[item.sourceDeType]]"
                                   ></component
                                 ></Icon>
diff --git a/core/core-frontend/src/components/visualization/LinkageField.vue b/core/core-frontend/src/components/visualization/LinkageField.vue
deleted file mode 100644
index 8860c00326..0000000000
--- a/core/core-frontend/src/components/visualization/LinkageField.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <el-popover width="400" trigger="click" style="max-height: 400px; overflow-y: auto">
-    <el-row>
-      <el-col :span="11">
-        <div class="ellipsis-area">{{ sourceLinkageInfo.targetViewName }}</div>
-      </el-col>
-      <el-col :span="11">
-        <div class="ellipsis-area">{{ linkageInfo.targetViewName }}</div>
-      </el-col>
-    </el-row>
-
-    <el-row class="match-area">
-      <el-row v-for="(itemLinkage, index) in linkageInfo.linkageFields" :key="index">
-        <el-col :span="11">
-          <div class="select-filed">
-            <el-select v-model="itemLinkage.sourceField" size="small" placeholder="请选择">
-              <el-option
-                v-for="item in sourceLinkageInfo.targetViewFields"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-                <span style="float: left">
-                  <svg-icon
-                    v-if="item.deType === 0"
-                    icon-class="field_text"
-                    class="field-icon-text"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 1"
-                    icon-class="field_time"
-                    class="field-icon-time"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 2 || item.deType === 3"
-                    icon-class="field_value"
-                    class="field-icon-value"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 5"
-                    icon-class="field_location"
-                    class="field-icon-location"
-                  />
-                </span>
-                <span class="name-area">{{ item.name }}</span>
-              </el-option>
-            </el-select>
-          </div>
-        </el-col>
-        <el-col :span="11">
-          <div class="select-filed">
-            <el-select v-model="itemLinkage.targetField" size="small" placeholder="请选择">
-              <el-option
-                v-for="item in linkageInfo.targetViewFields"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-                <span style="float: left">
-                  <svg-icon
-                    v-if="item.deType === 0"
-                    icon-class="field_text"
-                    class="field-icon-text"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 1"
-                    icon-class="field_time"
-                    class="field-icon-time"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 2 || item.deType === 3"
-                    icon-class="field_value"
-                    class="field-icon-value"
-                  />
-                  <svg-icon
-                    v-if="item.deType === 5"
-                    icon-class="field_location"
-                    class="field-icon-location"
-                  />
-                </span>
-                <span class="name-area">{{ item.name }}</span>
-              </el-option>
-            </el-select>
-          </div>
-        </el-col>
-        <el-col :span="2">
-          <div>
-            <el-button
-              :icon="Delete"
-              text
-              size="small"
-              class="delete-area"
-              @click="deleteLinkageField(index)"
-            />
-          </div>
-        </el-col>
-      </el-row>
-    </el-row>
-
-    <el-row class="bottom">
-      <el-button size="small" type="success" :icon="Plus" round @click="addLinkageField(null, null)"
-        >追加联动依赖字段</el-button
-      >
-    </el-row>
-
-    <template #reference>
-      <el-icon class="bar-base-icon"><Edit /></el-icon>
-    </template>
-  </el-popover>
-</template>
-
-<script setup lang="ts">
-import { checkSameDataSet } from '@/api/chart'
-import { storeToRefs } from 'pinia'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { computed, onMounted, toRefs } from 'vue'
-import { Plus, Delete } from '@element-plus/icons-vue'
-const dvMainStore = dvMainStoreWithOut()
-const { targetLinkageInfo, curLinkageView } = storeToRefs(dvMainStore)
-
-const props = defineProps({
-  element: {
-    type: Object,
-    required: true
-  },
-  active: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  // 当前模式 preview 预览 edit 编辑，
-  activeModel: {
-    type: String,
-    required: false,
-    default: 'preview'
-  }
-})
-
-const { element } = toRefs(props)
-const linkageInfo = computed(() => {
-  return targetLinkageInfo.value[element.value.id]
-})
-
-const sourceLinkageInfo = computed(() => {
-  return targetLinkageInfo.value[curLinkageView.value.id]
-})
-
-const deleteLinkageField = index => {
-  linkageInfo.value.linkageFields.splice(index, 1)
-}
-
-const addLinkageField = (sourceFieldId, targetFieldId) => {
-  const linkageFieldItem = {
-    sourceField: sourceFieldId,
-    targetField: targetFieldId
-  }
-  linkageInfo.value.linkageFields.push(linkageFieldItem)
-}
-
-onMounted(() => {
-  // 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
-  checkSameDataSet(curLinkageView.value.id, element.value.id).then(res => {
-    if (res.data === 'YES' && linkageInfo.value.linkageFields.length === 0) {
-      sourceLinkageInfo.value.targetViewFields.forEach(item => {
-        addLinkageField(item.id, item.id)
-      })
-    }
-  })
-})
-</script>
-
-<style lang="less" scoped>
-.custom-icon {
-  color: white;
-}
-.name-area {
-  float: left;
-  color: #8492a6;
-  font-size: 12px;
-}
-.slot-class {
-  color: white;
-}
-
-.bottom {
-  margin-top: 20px;
-  text-align: center;
-}
-.ellipsis-area {
-  margin-left: 10px;
-  margin-right: 10px;
-  overflow: hidden; /*超出部分隐藏*/
-  white-space: nowrap; /*不换行*/
-  text-overflow: ellipsis; /*超出部分文字以...显示*/
-  background-color: #f7f8fa;
-  color: #3d4d66;
-  font-size: 12px;
-  line-height: 24px;
-  height: 24px;
-  border-radius: 3px;
-}
-
-.select-filed {
-  margin-left: 10px;
-  margin-right: 10px;
-  overflow: hidden; /*超出部分隐藏*/
-  white-space: nowrap; /*不换行*/
-  text-overflow: ellipsis; /*超出部分文字以...显示*/
-  color: #3d4d66;
-  font-size: 12px;
-  line-height: 35px;
-  height: 35px;
-  border-radius: 3px;
-}
-.ed-popover {
-  height: 200px;
-  overflow: auto;
-}
-
-.bar-base-icon {
-  height: 22px;
-  width: 22px;
-  color: #ffffff;
-  &:hover {
-    color: rgba(255, 255, 255, 0.5);
-  }
-  &:active {
-    color: rgba(255, 255, 255, 0.7);
-  }
-}
-
-.bottom {
-  margin-top: 20px;
-  justify-content: center;
-}
-
-.delete-area {
-  float: left;
-  margin-top: 5px;
-}
-
-.match-area {
-  display: inline-block;
-  height: 120px;
-  overflow-y: auto;
-}
-</style>
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index 992605f60c..77d98a1f09 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -18,14 +18,17 @@
           <span class="top-area-text" style="margin-left: 0">已选图表：</span>
           <span class="top-area-value">
             <Icon class-name="view-type-icon"
-              ><component :is="iconChartMap[state.curLinkageViewInfo.type]"></component
+              ><component
+                class="svg-icon view-type-icon"
+                :is="iconChartMap[state.curLinkageViewInfo.type]"
+              ></component
             ></Icon>
             {{ state.curLinkageViewInfo.title }}</span
           >
           <span class="top-area-text">所用数据集：</span>
           <span class="top-area-value">
-            <Icon style="vertical-align: -0.2em" class-name="view-type-icon" name="dataset-outline"
-              ><datasetOutline
+            <Icon class-name="view-type-icon" name="dataset-outline"
+              ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
             /></Icon>
             {{ state.curDatasetInfo.name }}</span
           >
@@ -82,8 +85,12 @@
                   </span>
                   <span>
                     <span class="tree-select-field">
-                      <Icon class-name="view-type-icon" style="margin-right: 4px"
-                        ><component :is="iconChartMap[data.targetViewType]"></component
+                      <Icon class-name="view-type-icon"
+                        ><component
+                          :is="iconChartMap[data.targetViewType]"
+                          style="margin-right: 4px"
+                          class="svg-icon view-type-icon"
+                        ></component
                       ></Icon>
                       {{ data.targetViewName }}
                     </span>
@@ -187,7 +194,7 @@
                     </div>
                     <el-icon class="link-icon-join">
                       <Icon style="width: 20px; height: 20px" name="dv-link-target"
-                        ><dvLinkTarget
+                        ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
                       /></Icon>
                     </el-icon>
                     <div style="flex: 1">
@@ -221,7 +228,9 @@
 
                     <el-button class="m-del-icon-btn" text @click="deleteLinkageField(index)">
                       <el-icon size="20px">
-                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                        <Icon name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -234,7 +243,9 @@
               </el-row>
             </el-row>
             <el-row v-else style="height: 100%" class="custom-position">
-              <Icon style="width: 125px; height: 125px" name="dv-empty"><dvEmpty /></Icon>
+              <Icon name="dv-empty"
+                ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
+              /></Icon>
               <span style="margin-top: 8px; font-size: 14px">请先勾选需要联动的图表</span>
             </el-row>
           </el-col>
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSet.vue b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
index d61eefed6d..99896c322f 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSet.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
@@ -59,7 +59,7 @@
                         style="margin-right: 16px"
                         @handle-command="cmd => outerParamsOperation(cmd, node, data)"
                         :menu-list="state.optMenu"
-                        icon-name="icon_more_outlined"
+                        :icon-name="icon_more_outlined"
                         placement="bottom-start"
                       ></handle-more>
                     </span>
@@ -94,8 +94,8 @@
                   >
                     <div style="width: 16px"></div>
                     <div style="flex: 1; line-height: 32px">
-                      <Icon style="margin-top: 4px" class-name="view-type-icon" name="filter-params"
-                        ><filterParams
+                      <Icon name="filter-params"
+                        ><filterParams style="margin-top: 4px" class="svg-icon view-type-icon"
                       /></Icon>
                       <span>{{ findFilterName(baseFilter.id) }}</span>
                     </div>
@@ -155,7 +155,7 @@
                       <div style="flex: 1; display: flex; line-height: 32px">
                         <div style="width: 16px; margin-top: 2px; margin-right: 4px">
                           <el-icon>
-                            <Icon name="icon_dataset"><icon_dataset /></Icon>
+                            <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                           </el-icon>
                         </div>
                         <span>{{ baseDatasetInfo.name }}</span>
@@ -283,6 +283,9 @@
 </template>
 
 <script setup lang="ts">
+import _delete from '@/assets/svg/delete.svg'
+import edit from '@/assets/svg/edit.svg'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import filterParams from '@/assets/svg/filter-params.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import { ref, reactive, computed, nextTick } from 'vue'
@@ -315,12 +318,12 @@ const state = reactive({
   optMenu: [
     {
       label: '重命名',
-      svgName: 'edit',
+      svgName: edit,
       command: 'rename'
     },
     {
       label: '删除',
-      svgName: 'delete',
+      svgName: _delete,
       command: 'delete'
     }
   ],
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue b/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
index cf11a9d3b3..bfd1d7ad56 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
@@ -59,7 +59,7 @@
                         style="margin-right: 10px"
                         @handle-command="cmd => outerParamsOperation(cmd, node, data)"
                         :menu-list="state.optMenu"
-                        icon-name="icon_more_outlined"
+                        :icon-name="icon_more_outlined"
                         placement="bottom-start"
                       ></handle-more>
                     </span>
@@ -103,8 +103,12 @@
                             :label="item.title"
                             :value="item.id"
                           >
-                            <Icon class-name="view-type-icon" style="margin-right: 4px"
-                              ><component :is="iconChartMap[item.type]"></component
+                            <Icon class-name="view-type-icon"
+                              ><component
+                                class="svg-icon view-type-icon"
+                                style="margin-right: 4px"
+                                :is="iconChartMap[item.type]"
+                              ></component
                             ></Icon>
                             <span style="font-size: 12px"> {{ item.title }}</span>
                           </el-option>
@@ -112,8 +116,8 @@
                       </div>
                     </div>
                     <el-icon class="link-icon-join">
-                      <Icon style="width: 20px; height: 20px" name="dv-link-target"
-                        ><dvLinkTarget
+                      <Icon name="dv-link-target"
+                        ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
                       /></Icon>
                     </el-icon>
                     <div style="flex: 1">
@@ -146,7 +150,9 @@
                     </div>
                     <el-button class="m-del-icon-btn" text @click="deleteOuterParamsField(index)">
                       <el-icon size="20px">
-                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                        <Icon name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -176,6 +182,9 @@
 </template>
 
 <script setup lang="ts">
+import _delete from '@/assets/svg/delete.svg'
+import edit from '@/assets/svg/edit.svg'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, reactive, computed, nextTick } from 'vue'
@@ -207,12 +216,12 @@ const state = reactive({
   optMenu: [
     {
       label: '重命名',
-      svgName: 'edit',
+      svgName: edit,
       command: 'rename'
     },
     {
       label: '删除',
-      svgName: 'delete',
+      svgName: _delete,
       command: 'delete'
     }
   ],
diff --git a/core/core-frontend/src/components/visualization/common/DragInfo.vue b/core/core-frontend/src/components/visualization/common/DragInfo.vue
index 4ce74a4e38..b0a1d508d6 100644
--- a/core/core-frontend/src/components/visualization/common/DragInfo.vue
+++ b/core/core-frontend/src/components/visualization/common/DragInfo.vue
@@ -2,7 +2,9 @@
   <div class="drag-info-main">
     <template v-if="!mobileInPc">
       <el-row style="justify-content: center">
-        <Icon style="width: 125px; height: 125px" name="dv-drag-tips"><dvDragTips /></Icon>
+        <Icon name="dv-drag-tips"
+          ><dvDragTips class="svg-icon" style="width: 125px; height: 125px"
+        /></Icon>
       </el-row>
       <el-row class="tips-info"> {{ tips }} </el-row>
     </template>
diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
index 2430c25e47..7e35f41fe7 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
@@ -10,8 +10,12 @@
       :style="itemStyle"
       @click.stop="setBoard"
     >
-      <Icon :style="{ color: commonBackground.innerImageColor }" class-name="svg-background"
-        ><component :is="iconBoardMap[mainIconClass]"></component
+      <Icon class-name="svg-background"
+        ><component
+          :style="{ color: commonBackground.innerImageColor }"
+          class="svg-icon svg-background"
+          :is="iconBoardMap[mainIconClass]"
+        ></component
       ></Icon>
     </div>
     <span class="demonstration">{{ template.name }}</span>
diff --git a/core/core-frontend/src/components/visualization/component-background/BoardItem.vue b/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
index 79caa33bfc..da4ccae390 100644
--- a/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
@@ -4,8 +4,12 @@
       class="icon-area"
       :class="{ 'selected-active': active, 'icon-area-dark': themes === 'dark' }"
     >
-      <Icon :style="{ color: innerImageColor }" class-name="svg-background"
-        ><component :is="iconBoardMap[mainIconClass(item)]"></component
+      <Icon
+        ><component
+          :style="{ color: innerImageColor }"
+          class="svg-icon svg-background"
+          :is="iconBoardMap[mainIconClass(item)]"
+        ></component
       ></Icon>
     </div>
     <span>{{ item.name }}</span>
diff --git a/core/core-frontend/src/components/visualization/linkJump.vue b/core/core-frontend/src/components/visualization/linkJump.vue
index f5c621d074..378859d362 100644
--- a/core/core-frontend/src/components/visualization/linkJump.vue
+++ b/core/core-frontend/src/components/visualization/linkJump.vue
@@ -102,7 +102,9 @@ defineExpose({
         <span class="label">已选择图表:</span>
         <span class="name">
           <el-icon class="main-color">
-            <Icon class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
+            <Icon name="icon_left_outlined"
+              ><icon_left_outlined class="svg-icon toolbar-icon"
+            /></Icon>
           </el-icon>
           折线图1
         </span>
@@ -111,7 +113,9 @@ defineExpose({
         <span class="label">所用数据集:</span>
         <span class="name">
           <el-icon class="main-color">
-            <Icon class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
+            <Icon name="icon_left_outlined"
+              ><icon_left_outlined class="svg-icon toolbar-icon"
+            /></Icon>
           </el-icon>
           佩尔数据集
         </span>
@@ -176,7 +180,7 @@ defineExpose({
                 </el-select>
               </el-form-item>
               <el-icon class="join">
-                <Icon name="join-join"><joinJoin /></Icon>
+                <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
               </el-icon>
               <el-form-item label="目标仪表板">
                 <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
@@ -210,7 +214,7 @@ defineExpose({
                   </el-select>
                 </el-form-item>
                 <el-icon class="join">
-                  <Icon name="join-join"><joinJoin /></Icon>
+                  <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
                 </el-icon>
                 <el-form-item
                   label="目标字段"
@@ -242,7 +246,9 @@ defineExpose({
                 </el-form-item>
                 <el-button v-if="formFields.fields.length > 1" text @click="removeField(field)">
                   <template #icon>
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </template>
                 </el-button>
               </template>
@@ -250,7 +256,7 @@ defineExpose({
           </div>
           <el-button class="add-field" text @click="addField">
             <template #icon>
-              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             添加联动图表字段
           </el-button>
diff --git a/core/core-frontend/src/custom-component/canvas-icon/Component.vue b/core/core-frontend/src/custom-component/canvas-icon/Component.vue
index 3a1b45272d..2ba5d37934 100644
--- a/core/core-frontend/src/custom-component/canvas-icon/Component.vue
+++ b/core/core-frontend/src/custom-component/canvas-icon/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <Icon v-if="element.innerType.includes('board')" class-name="de-svg-main"
-    ><component :is="iconBoardMap[element.innerType]"></component
+    ><component class="svg-icon de-svg-main" :is="iconBoardMap[element.innerType]"></component
   ></Icon>
   <component v-else :is="element.innerType"></component>
 </template>
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
index 7d3ff0ae1a..765bef6aab 100644
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -53,7 +53,7 @@ const onJumpValueChange = () => {
             <div>事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效</div>
           </template>
           <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-            <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+            <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
           </el-icon>
         </el-tooltip>
       </el-form-item>
diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index 9ebc78f4fe..84f5055494 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -146,7 +146,7 @@
             @click="checkBold"
           >
             <el-icon>
-              <Icon name="icon_bold_outlined"><icon_bold_outlined /></Icon>
+              <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -161,7 +161,7 @@
             @click="checkItalic"
           >
             <el-icon>
-              <Icon name="icon_italic_outlined"><icon_italic_outlined /></Icon>
+              <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -178,7 +178,9 @@
                 @click="setPosition('textAlign', 'left')"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined"><icon_leftAlignment_outlined /></Icon>
+                  <Icon name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -193,7 +195,7 @@
               >
                 <el-icon>
                   <Icon name="icon_center-alignment_outlined"
-                    ><icon_centerAlignment_outlined
+                    ><icon_centerAlignment_outlined class="svg-icon"
                   /></Icon>
                 </el-icon>
               </div>
@@ -208,7 +210,9 @@
                 @click="setPosition('textAlign', 'right')"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined"><icon_rightAlignment_outlined /></Icon>
+                  <Icon name="icon_right-alignment_outlined"
+                    ><icon_rightAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -229,7 +233,9 @@
               @click="setPosition('headHorizontalPosition', 'left')"
             >
               <el-icon>
-                <Icon name="icon_left-alignment_outlined"><icon_leftAlignment_outlined /></Icon>
+                <Icon name="icon_left-alignment_outlined"
+                  ><icon_leftAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -246,7 +252,9 @@
               @click="setPosition('headHorizontalPosition', 'center')"
             >
               <el-icon>
-                <Icon name="icon_center-alignment_outlined"><icon_centerAlignment_outlined /></Icon>
+                <Icon name="icon_center-alignment_outlined"
+                  ><icon_centerAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -263,7 +271,9 @@
               @click="setPosition('headHorizontalPosition', 'right')"
             >
               <el-icon>
-                <Icon name="icon_right-alignment_outlined"><icon_rightAlignment_outlined /></Icon>
+                <Icon name="icon_right-alignment_outlined"
+                  ><icon_rightAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
diff --git a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
index 3f02c509d5..dd97e27503 100644
--- a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
+++ b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
@@ -64,7 +64,7 @@ const handleInput = value => {
               <div>Tab轮播退出编辑模式才开生效</div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-              <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
 
diff --git a/core/core-frontend/src/custom-component/component-group/DragComponent.vue b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
index ecabce873f..24c2c89418 100644
--- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue
+++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
@@ -34,7 +34,9 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
   <div class="drag-component" :class="'drag-' + themes">
     <div draggable="true" :data-id="dragInfo" class="icon-content">
       <span v-if="name" class="label-content">{{ name }}</span>
-      <Icon v-if="icon" class="drag-icon"><component :is="icon"></component></Icon>
+      <Icon v-if="icon" class="drag-icon"
+        ><component class="svg-icon drag-icon" :is="icon"></component
+      ></Icon>
     </div>
     <div class="label-content">
       <span>{{ label }}</span>
diff --git a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
index 053590b0e7..90e8180538 100644
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@@ -146,6 +146,7 @@ const loadPluginCategory = data => {
               />
               <Icon v-else class-name="item-top-icon"
                 ><component
+                  class="svg-icon item-top-icon"
                   :is="
                     props.themes === 'dark'
                       ? iconChartDarkMap[`${chartInfo.icon}-dark`]
diff --git a/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
index 6c8837d434..b8f3c1ace3 100644
--- a/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
+++ b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
@@ -14,7 +14,7 @@
                 </div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
diff --git a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
index 2da8aea954..29b196ec3e 100644
--- a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
@@ -13,7 +13,7 @@
         <template #item="{ element }">
           <span :key="element.name" class="item-dimension" :title="element.title">
             <el-icon size="20px">
-              <Icon name="drag" ><drag /></Icon>
+              <Icon name="drag"><drag class="svg-icon" /></Icon>
             </el-icon>
             <span class="item-span">
               {{ element.title }}
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index 72b7ab4434..02776ec0b9 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -597,12 +597,14 @@ const autoStyle = computed(() => {
               >
                 <el-tooltip effect="dark" content="设置过滤条件" placement="top">
                   <el-icon @click="editeQueryConfig(ele.id)">
-                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </el-tooltip>
                 <el-tooltip effect="dark" content="删除条件" placement="top">
                   <el-icon style="margin-left: 8px" @click="delQueryConfig(index)">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </el-tooltip>
               </div>
diff --git a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
index f643929d08..1d9177a594 100644
--- a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@@ -389,7 +389,7 @@ defineExpose({
             style="margin-left: -4px"
           >
             <template #icon>
-              <Icon name="icon_admin_outlined"><icon_admin_outlined /></Icon>
+              <Icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></Icon>
             </template>
             设置
           </el-button>
diff --git a/core/core-frontend/src/custom-component/v-query/QueryCascade.vue b/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
index dce5397e07..e1ae1f3f46 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
@@ -206,14 +206,14 @@ defineExpose({
     </template>
     <div class="content">
       <el-icon style="font-size: 16px">
-        <Icon name="icon_info_colorful"><icon_info_colorful /></Icon>
+        <Icon name="icon_info_colorful"><icon_info_colorful class="svg-icon" /></Icon>
       </el-icon>
       基于当前查询组件的查询条件，如果需要进行级联配置，需要满足以下条件：<br />
       1. 展示类型：文本下拉组件和数字下拉组件；2. 选项值来源：选择数据集<br />
     </div>
     <el-button text @click="addCascadeBlock">
       <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
       </template>
       添加级联配置
     </el-button>
@@ -221,13 +221,15 @@ defineExpose({
       <div style="display: flex; align-items: center; justify-content: space-between">
         <el-button :disabled="item.length === 2" text @click="addCascadeItem(item)">
           <template #icon>
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </template>
           添加级联条件
         </el-button>
         <el-button @click="deleteCascadeBlock(index)" class="cascade-delete-block" text>
           <template #icon>
-            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+            <Icon name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </template>
         </el-button>
       </div>
@@ -261,7 +263,7 @@ defineExpose({
         </div>
         <div class="cascade-icon">
           <el-icon>
-            <Icon name="join-join"><joinJoin /></Icon>
+            <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <div class="item-field">
@@ -281,7 +283,9 @@ defineExpose({
         </div>
         <el-button v-show="idx !== 0" @click="deleteCascade(idx, item)" class="cascade-delete" text>
           <template #icon>
-            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+            <Icon name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </template>
         </el-button>
       </div>
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index afff879804..d1a66c1659 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -1,12 +1,12 @@
 getLastStart
 <script lang="ts" setup>
+import more_v from '@/assets/svg/more_v.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
 import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
 import de_pwd_invisible from '@/assets/svg/de_pwd_invisible.svg'
 import dvFolder from '@/assets/svg/dv-folder.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
-import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
@@ -1468,7 +1468,7 @@ defineExpose({
         <div class="title">
           查询条件
           <el-icon @click="addQueryCriteria">
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <draggable tag="div" :list="conditions" handle=".handle">
@@ -1481,14 +1481,14 @@ defineExpose({
               :class="element.id === activeCondition && 'active'"
             >
               <el-icon class="handle">
-                <Icon name="icon_drag_outlined"><icon_drag_outlined /></Icon>
+                <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
               </el-icon>
               <div class="label flex-align-center icon" :title="element.name">
                 <el-icon
                   v-if="!element.auto && element.showError"
                   style="font-size: 16px; color: #f54a45"
                 >
-                  <icon name="icon_warning_filled"><icon_warning_filled /></icon>
+                  <icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></icon>
                 </el-icon>
                 {{ element.name }}
               </div>
@@ -1496,7 +1496,7 @@ defineExpose({
                 <handle-more
                   @handle-command="cmd => addOperation(cmd, element, index)"
                   :menu-list="typeList"
-                  icon-name="more_v"
+                  :icon-name="more_v"
                   placement="bottom-end"
                 ></handle-more>
                 <el-icon
@@ -1504,10 +1504,12 @@ defineExpose({
                   @click.stop="element.visible = !element.visible"
                   v-if="element.visible"
                 >
-                  <Icon name="icon_visible_outlined"><icon_visible_outlined /></Icon>
+                  <Icon name="icon_visible_outlined"
+                    ><icon_visible_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
                 <el-icon class="hover-icon" @click.stop="element.visible = !element.visible" v-else>
-                  <Icon name="de_pwd_invisible"><de_pwd_invisible /></Icon>
+                  <Icon name="de_pwd_invisible"><de_pwd_invisible class="svg-icon" /></Icon>
                 </el-icon>
               </div>
               <div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
@@ -1538,7 +1540,7 @@ defineExpose({
                     </div>
                   </template>
                   <el-icon style="margin-left: 4px; color: #646a73">
-                    <icon name="icon_info_outlined"><icon_info_outlined /></icon>
+                    <icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></icon>
                   </el-icon>
                 </el-tooltip>
               </div>
@@ -1640,7 +1642,11 @@ defineExpose({
                   >
                     <el-icon>
                       <Icon :className="`field-icon-${fieldType[ele.deType]}`"
-                        ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[ele.deType]}`"
+                          :is="iconFieldMap[fieldType[ele.deType]]"
+                        ></component
                       ></Icon>
                     </el-icon>
                     <span :title="ele.name || ele.variableName" class="ellipsis">
@@ -1737,7 +1743,7 @@ defineExpose({
                 @click="startTreeDesign"
               >
                 <template #icon>
-                  <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+                  <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                 </template>
               </el-button>
             </div>
@@ -1752,7 +1758,11 @@ defineExpose({
                   <span class="field-type"
                     ><el-icon>
                       <Icon :className="`field-icon-${fieldType[ele.deType]}`"
-                        ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                        ><component
+                          :class="`field-icon-${fieldType[ele.deType]}`"
+                          class="svg-icon"
+                          :is="iconFieldMap[fieldType[ele.deType]]"
+                        ></component
                       ></Icon> </el-icon
                   ></span>
                   <span class="field-tree_name">{{ ele.name }}</span>
@@ -1760,7 +1770,7 @@ defineExpose({
               </template>
               <el-button @click="startTreeDesign" v-else text>
                 <template #icon>
-                  <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+                  <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                 </template>
                 点击进行树结构设计
               </el-button>
@@ -1835,10 +1845,10 @@ defineExpose({
                     <template #default="{ node, data }">
                       <div class="content">
                         <el-icon size="18px" v-if="!data.leaf">
-                          <Icon name="dv-folder"><dvFolder /></Icon>
+                          <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                         </el-icon>
                         <el-icon size="18px" v-if="data.leaf">
-                          <Icon name="icon_dataset"><icon_dataset /></Icon>
+                          <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                         </el-icon>
                         <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
                           node.label
@@ -1891,7 +1901,11 @@ defineExpose({
                       >
                         <el-icon>
                           <Icon :className="`field-icon-${fieldType[ele.deType]}`"
-                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                            ><component
+                              class="svg-icon"
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1946,7 +1960,11 @@ defineExpose({
                       >
                         <el-icon>
                           <Icon :className="`field-icon-${fieldType[ele.deType]}`"
-                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                            ><component
+                              class="svg-icon"
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1996,7 +2014,11 @@ defineExpose({
                       >
                         <el-icon>
                           <Icon :className="`field-icon-${fieldType[ele.deType]}`"
-                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                            ><component
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              class="svg-icon"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -2026,7 +2048,9 @@ defineExpose({
                   <template #reference>
                     <el-button text>
                       <template #icon>
-                        <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                        <Icon name="icon_edit_outlined"
+                          ><icon_edit_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       {{ t('common.edit') }}
                     </el-button>
@@ -2056,7 +2080,7 @@ defineExpose({
                         >
                           <template #icon>
                             <Icon name="icon_delete-trash_outlined"
-                              ><icon_deleteTrash_outlined
+                              ><icon_deleteTrash_outlined class="svg-icon"
                             /></Icon>
                           </template>
                         </el-button>
@@ -2065,7 +2089,9 @@ defineExpose({
                     <div class="add-btn">
                       <el-button @click="valueSource.push('')" text>
                         <template #icon>
-                          <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+                          <Icon name="icon_add_outlined"
+                            ><icon_add_outlined class="svg-icon"
+                          /></Icon>
                         </template>
                         添加选项值
                       </el-button>
diff --git a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
index c652d3d1e8..b16599cb2e 100644
--- a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
+++ b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
@@ -81,7 +81,7 @@ defineExpose({
       <div style="display: flex; align-items: center; justify-content: space-between">
         <el-button :disabled="treeList.length === 5" text @click="addCascadeItem">
           <template #icon>
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </template>
           添加层级
         </el-button>
@@ -110,7 +110,9 @@ defineExpose({
         </div>
         <el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
           <template #icon>
-            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+            <Icon name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </template>
         </el-button>
       </div>
diff --git a/core/core-frontend/src/layout/components/AccountOperator.vue b/core/core-frontend/src/layout/components/AccountOperator.vue
index e3ef4220a6..cd9d3c02c8 100644
--- a/core/core-frontend/src/layout/components/AccountOperator.vue
+++ b/core/core-frontend/src/layout/components/AccountOperator.vue
@@ -113,11 +113,11 @@ if (uid.value === '1') {
     v-click-outside="openPopover"
   >
     <el-icon class="main-color">
-      <Icon name="user-img" ><userImg /></Icon>
+      <Icon name="user-img"><userImg class="svg-icon" /></Icon>
     </el-icon>
     <span class="uname-span">{{ name }}</span>
     <el-icon class="el-icon-animate">
-      <Icon name="icon_expand-down_filled" ><icon_expandDown_filled /></Icon>
+      <Icon name="icon_expand-down_filled"><icon_expandDown_filled class="svg-icon" /></Icon>
     </el-icon>
   </div>
   <el-popover
diff --git a/core/core-frontend/src/layout/components/AiComponent.vue b/core/core-frontend/src/layout/components/AiComponent.vue
index 9470b8ff45..edb430580d 100644
--- a/core/core-frontend/src/layout/components/AiComponent.vue
+++ b/core/core-frontend/src/layout/components/AiComponent.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import dvAiWindowMax from '@/assets/svg/dv-ai-window-max.svg'
+import dvAiWindowMin from '@/assets/svg/dv-ai-window-min.svg'
 import { onMounted, ref } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 const aiDialogShow = ref(false)
@@ -39,7 +41,11 @@ onMounted(() => {
     <div class="ai-content">
       <el-icon class="close" @click="closeAi"><Close /></el-icon>
       <el-icon class="size-class" @click="sizeChange"
-        ><Icon :name="'dv-ai-window-' + sizeState"></Icon
+        ><Icon
+          ><component
+            :is="sizeState === 'min' ? dvAiWindowMin : dvAiWindowMax"
+            class="svg-icon"
+          ></component></Icon
       ></el-icon>
       <iframe :src="baseUrl" style="width: 100%; height: 100%" frameborder="0" allow="microphone">
       </iframe>
diff --git a/core/core-frontend/src/layout/components/AiTips.vue b/core/core-frontend/src/layout/components/AiTips.vue
index f7e59878a1..9f44cffa24 100644
--- a/core/core-frontend/src/layout/components/AiTips.vue
+++ b/core/core-frontend/src/layout/components/AiTips.vue
@@ -32,7 +32,7 @@ onMounted(() => {
     <template #reference>
       <div class="ai-popper-tips-icon">
         <el-icon style="margin: 2px" class="ai-icon">
-          <Icon name="dv-ai" ><dvAi /></Icon>
+          <Icon name="dv-ai"><dvAi class="svg-icon" /></Icon>
         </el-icon>
       </div>
     </template>
diff --git a/core/core-frontend/src/layout/components/Copilot.vue b/core/core-frontend/src/layout/components/Copilot.vue
index a50033cb8c..613243b2c5 100644
--- a/core/core-frontend/src/layout/components/Copilot.vue
+++ b/core/core-frontend/src/layout/components/Copilot.vue
@@ -33,7 +33,7 @@ onMounted(() => {
     <template #reference>
       <div class="copilot-popper-tips-icon">
         <el-icon style="margin: 2px" class="ai-icon">
-          <Icon name="copilot" ><copilot /></Icon>
+          <Icon name="copilot"><copilot class="svg-icon" /></Icon>
         </el-icon>
       </div>
     </template>
diff --git a/core/core-frontend/src/layout/components/Header.vue b/core/core-frontend/src/layout/components/Header.vue
index 7f0457082b..2a9f48ff0d 100644
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@@ -22,7 +22,7 @@ import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import AiComponent from '@/layout/components/AiComponent.vue'
 import { findBaseParams } from '@/api/aiComponent'
 import AiTips from '@/layout/components/AiTips.vue'
-import Copilot from '@/layout/components/Copilot.vue'
+import CopilotCom from '@/layout/components/Copilot.vue'
 
 const appearanceStore = useAppearanceStoreWithOut()
 const { push } = useRouter()
@@ -124,13 +124,9 @@ onMounted(() => {
 <template>
   <el-header class="header-flex" :class="{ 'header-light': navigateBg && navigateBg === 'light' }">
     <img class="logo" v-if="navigate" :src="navigate" alt="" />
-    <Icon
-      style="cursor: pointer"
-      v-else
-      @click="handleIconClick"
-      className="logo"
-      name="logo"
-    ><logo /></Icon>
+    <Icon v-else @click="handleIconClick" className="logo" name="logo"
+      ><logo class="svg-icon logo" style="cursor: pointer"
+    /></Icon>
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
@@ -147,9 +143,9 @@ onMounted(() => {
         class="ai-icon copilot-icon"
         v-if="!showOverlayCopilot && appearanceStore.getShowCopilot"
       >
-        <Icon name="copilot" @click="handleCopilotClick" ><copilot /></Icon>
+        <Icon name="copilot" @click="handleCopilotClick"><copilot class="svg-icon" /></Icon>
       </el-icon>
-      <Copilot
+      <CopilotCom
         @confirm="copilotConfirm"
         v-if="showOverlayCopilot && appearanceStore.getShowCopilot"
         class="copilot-icon-tips"
@@ -160,14 +156,16 @@ onMounted(() => {
         class="ai-icon"
         v-if="aiBaseUrl && !showOverlay && appearanceStore.getShowAi"
       >
-        <Icon name="dv-ai" @click="handleAiClick" ><dvAi /></Icon>
+        <Icon name="dv-ai" @click="handleAiClick"><dvAi class="svg-icon" /></Icon>
       </el-icon>
       <el-tooltip effect="dark" content="数据导出中心" placement="bottom">
         <el-icon
           class="preview-download_icon"
           :class="navigateBg === 'light' && 'is-light-setting'"
         >
-          <Icon name="dv-preview-download" @click="downloadClick" ><dvPreviewDownload /></Icon>
+          <Icon name="dv-preview-download" @click="downloadClick"
+            ><dvPreviewDownload class="svg-icon"
+          /></Icon>
         </el-icon>
       </el-tooltip>
 
diff --git a/core/core-frontend/src/layout/components/HeaderSystem.vue b/core/core-frontend/src/layout/components/HeaderSystem.vue
index b5d009e719..069b711805 100644
--- a/core/core-frontend/src/layout/components/HeaderSystem.vue
+++ b/core/core-frontend/src/layout/components/HeaderSystem.vue
@@ -25,13 +25,13 @@ const navigate = computed(() => appearanceStore.getNavigate)
     :class="{ 'header-light': navigateBg && navigateBg === 'light' }"
   >
     <img class="logo" v-if="navigate" :src="navigate" alt="" />
-    <Icon class="de-logo" v-else className="logo" name="logo"><logo /></Icon>
+    <Icon class="de-logo" v-else className="logo" name="logo"><logo class="svg-icon logo" /></Icon>
     <el-divider direction="vertical" />
     <span class="system">{{ props.title || '系统设置' }}</span>
     <div class="operate-setting">
       <span @click="backToMain" class="work-bar flex-align-center">
         <el-icon>
-          <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
         </el-icon>
         <span class="work">返回工作台</span>
       </span>
diff --git a/core/core-frontend/src/layout/components/LangSelector.vue b/core/core-frontend/src/layout/components/LangSelector.vue
index 564812c740..d6cd6804b2 100644
--- a/core/core-frontend/src/layout/components/LangSelector.vue
+++ b/core/core-frontend/src/layout/components/LangSelector.vue
@@ -39,7 +39,7 @@ onMounted(() => {
     >
       <span>{{ item.name }}</span>
       <el-icon v-if="language === item.value">
-        <Icon name="icon_done_outlined"><icon_done_outlined /></Icon>
+        <Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
   </div>
diff --git a/core/core-frontend/src/layout/components/SystemCfg.vue b/core/core-frontend/src/layout/components/SystemCfg.vue
index 9b9597f639..0fb1e58fff 100644
--- a/core/core-frontend/src/layout/components/SystemCfg.vue
+++ b/core/core-frontend/src/layout/components/SystemCfg.vue
@@ -25,7 +25,9 @@ const redirectUser = () => {
       }"
     >
       <el-icon @click="redirectUser">
-        <Icon class="icon-setting" name="icon-setting" ><iconSetting /></Icon>
+        <Icon class="icon-setting" name="icon-setting"
+          ><iconSetting class="svg-icon icon-setting"
+        /></Icon>
       </el-icon>
     </div>
   </el-tooltip>
diff --git a/core/core-frontend/src/layout/components/ToolboxCfg.vue b/core/core-frontend/src/layout/components/ToolboxCfg.vue
index a9738063f5..e31ca8dec5 100644
--- a/core/core-frontend/src/layout/components/ToolboxCfg.vue
+++ b/core/core-frontend/src/layout/components/ToolboxCfg.vue
@@ -74,7 +74,7 @@ onMounted(() => {
         }"
       >
         <el-icon>
-          <Icon name="sys-tools"><sysTools /></Icon>
+          <Icon name="sys-tools"><sysTools class="svg-icon" /></Icon>
         </el-icon>
       </div>
     </template>
diff --git a/core/core-frontend/src/layout/components/TopDoc.vue b/core/core-frontend/src/layout/components/TopDoc.vue
index 34d96c9d5d..4d74351bac 100644
--- a/core/core-frontend/src/layout/components/TopDoc.vue
+++ b/core/core-frontend/src/layout/components/TopDoc.vue
@@ -46,7 +46,7 @@ const cardInfoList = [
         :class="{ 'is-light-setting': navigateBg && navigateBg === 'light' }"
       >
         <el-icon>
-          <Icon name="docs"><docs /></Icon>
+          <Icon name="docs"><docs class="svg-icon" /></Icon>
         </el-icon>
       </div>
     </template>
diff --git a/core/core-frontend/src/layout/components/TopDocCard.vue b/core/core-frontend/src/layout/components/TopDocCard.vue
index fbc30abcf7..09f1126592 100644
--- a/core/core-frontend/src/layout/components/TopDocCard.vue
+++ b/core/core-frontend/src/layout/components/TopDocCard.vue
@@ -25,7 +25,9 @@ const openBlank = () => {
 <template>
   <div class="doc-card" @click="openBlank">
     <el-row class="base-show">
-      <Icon class-name="item-top-icon"><component :is="cardInfo.icon"></component></Icon>
+      <Icon class-name="item-top-icon"
+        ><component class="svg-icon item-top-icon" :is="cardInfo.icon"></component
+      ></Icon>
     </el-row>
     <el-row class="base-show show-content"> {{ cardInfo.name }}</el-row>
   </div>
diff --git a/core/core-frontend/src/views/401/index.vue b/core/core-frontend/src/views/401/index.vue
index 631a5ccd37..b1c26790f6 100644
--- a/core/core-frontend/src/views/401/index.vue
+++ b/core/core-frontend/src/views/401/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="page-not-found">
-    <Icon className="login-logo-icon" name="401"><_401 /></Icon>
+    <Icon className="login-logo-icon" name="401"><Four class="svg-icon login-logo-icon" /></Icon>
     <span class="span-403">{{ t('common.no_menu_tips') }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import _401 from '@/assets/svg/401.svg'
+import Four from '@/assets/svg/401.svg'
 import { Icon } from '@/components/icon-custom'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
diff --git a/core/core-frontend/src/views/404/index.vue b/core/core-frontend/src/views/404/index.vue
index c08fa4294f..4ec020272d 100644
--- a/core/core-frontend/src/views/404/index.vue
+++ b/core/core-frontend/src/views/404/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="page-not-found">
-    <Icon className="login-logo-icon" name="403"><_403 /></Icon>
+    <Icon className="login-logo-icon" name="403"><Four class="svg-icon login-logo-icon" /></Icon>
     <span class="span-403">{{ t('common.no_auth_tips') }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import _403 from '@/assets/svg/403.svg'
+import Four from '@/assets/svg/403.svg'
 import { Icon } from '@/components/icon-custom'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
diff --git a/core/core-frontend/src/views/about/index.vue b/core/core-frontend/src/views/about/index.vue
index 8c9daaad62..eda28a0370 100644
--- a/core/core-frontend/src/views/about/index.vue
+++ b/core/core-frontend/src/views/about/index.vue
@@ -197,7 +197,7 @@ const syncFree = () => {
     <img width="792" height="180" :src="aboutBg" />
     <div class="color-overlay"></div>
     <el-icon class="logo">
-      <icon name="logo"><logo /></icon>
+      <icon name="logo"><logo class="svg-icon" /></icon>
     </el-icon>
     <div class="content">
       <div class="item">
diff --git a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
index 25886d09c0..1191e7ac12 100644
--- a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
+++ b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
@@ -103,6 +103,7 @@ const groupActiveChange = category => {
               />
               <Icon v-else class-name="item-top-icon"
                 ><component
+                  class="svg-icon item-top-icon"
                   :is="
                     props.themes === 'dark'
                       ? iconChartDarkMap[`${chartInfo.icon}-dark`]
diff --git a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
index d946c448b3..a0bddde1ab 100644
--- a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
+++ b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
@@ -1,9 +1,10 @@
 <script lang="tsx" setup>
-import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'</script>
+import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
+</script>
 
 <template>
   <div class="view-panel-Mask">
-    <Icon class-name="item-icon" name="dv-up-arrow" ><dvUpArrow /></Icon>
+    <Icon class-name="item-icon" name="dv-up-arrow"><dvUpArrow class="svg-icon item-icon" /></Icon>
     <div>
       <el-button style="opacity: 1 !important" type="warning" size="mini" round>
         <span style="font-weight: bold; opacity: 1"> 当前为模板图表，请更换数据集...</span>
diff --git a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
index d29d49746e..4e989b2ec1 100644
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@@ -327,16 +327,16 @@ onMounted(() => {
                   >
                     <div class="m-icon">
                       <el-icon v-if="!data.leaf">
-                        <Icon name="dv-folder" ><dvFolder /></Icon>
+                        <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                       </el-icon>
                       <el-icon v-if="data.leaf">
-                        <Icon name="icon_dataset" ><icon_dataset /></Icon>
+                        <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                       </el-icon>
                     </div>
                     {{ node.label }}
 
                     <el-icon class="checked-item" v-if="_modelValue === data.id">
-                      <Icon name="icon_done_outlined" ><icon_done_outlined /></Icon>
+                      <Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
                     </el-icon>
                   </div>
                 </template>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
index 24ff544d80..0d3c953097 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -7,7 +7,6 @@ import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
@@ -208,17 +207,25 @@ onMounted(() => {
       >
         <span v-if="type !== 'extColor'" style="display: flex; color: #646a73">
           <el-icon v-if="'asc' === item.sort">
-            <Icon name="icon_sort-a-to-z_outlined"><icon_sortAToZ_outlined /></Icon>
+            <Icon name="icon_sort-a-to-z_outlined"
+              ><icon_sortAToZ_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'desc' === item.sort">
-            <Icon name="icon_sort-z-to-a_outlined"><icon_sortZToA_outlined /></Icon>
+            <Icon name="icon_sort-z-to-a_outlined"
+              ><icon_sortZToA_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
+            <Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
           </el-icon>
           <el-icon>
             <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
-              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+              ><component
+                class="svg-icon"
+                :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+                :is="iconFieldMap[fieldType[item.deType]]"
+              ></component
             ></Icon>
           </el-icon>
         </span>
@@ -227,7 +234,11 @@ onMounted(() => {
             <Icon
               :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               :name="`field_${fieldType[item.deType]}`"
-              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+              ><component
+                class="svg-icon"
+                :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+                :is="iconFieldMap[fieldType[item.deType]]"
+              ></component
             ></Icon>
           </el-icon>
         </span>
@@ -247,12 +258,12 @@ onMounted(() => {
           </template>
           <el-icon class="child remove-icon">
             <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
-              ><icon_deleteTrash_outlined
+              ><icon_deleteTrash_outlined class="svg-icon inner-clas"
             /></Icon>
           </el-icon>
         </el-tooltip>
         <el-icon class="child" style="position: absolute; top: 7px; right: 10px; cursor: pointer">
-          <Icon name="icon_down_outlined-1"><icon_down_outlined1 /></Icon>
+          <Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -272,13 +283,13 @@ onMounted(() => {
               <span class="inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
+                    <Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
                   </el-icon>
                   <span>{{ t('chart.sort') }}</span>
                   <span class="summary-span-item">({{ t('chart.' + props.item.sort) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -295,7 +306,7 @@ onMounted(() => {
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'none' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -308,7 +319,7 @@ onMounted(() => {
                       {{ t('chart.asc') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'asc' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -321,7 +332,7 @@ onMounted(() => {
                       {{ t('chart.desc') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'desc' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -338,7 +349,7 @@ onMounted(() => {
                       {{ t('chart.custom_sort') }}{{ t('chart.sort') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'custom_sort' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -371,7 +382,7 @@ onMounted(() => {
                   <span class="summary-span-item">({{ t('chart.' + item.dateStyle) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -388,7 +399,7 @@ onMounted(() => {
                       {{ t('chart.y') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -405,7 +416,7 @@ onMounted(() => {
                       {{ t('chart.y_Q') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_Q' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -418,7 +429,7 @@ onMounted(() => {
                       {{ t('chart.y_M') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_M' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -435,7 +446,7 @@ onMounted(() => {
                       {{ t('chart.y_W') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_W' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -448,7 +459,7 @@ onMounted(() => {
                       {{ t('chart.y_M_d') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_M_d' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -466,7 +477,7 @@ onMounted(() => {
                       {{ t('chart.H_m_s') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'H_m_s' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -483,7 +494,7 @@ onMounted(() => {
                       {{ t('chart.y_M_d_H_m') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_M_d_H_m' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -499,7 +510,7 @@ onMounted(() => {
                       {{ t('chart.y_M_d_H_m_s') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'y_M_d_H_m_s' === item.dateStyle"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -523,7 +534,7 @@ onMounted(() => {
                   <span class="summary-span-item">({{ t('chart.' + item.datePattern) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -543,7 +554,7 @@ onMounted(() => {
                       {{ t('chart.date_sub') }}(1990-01-01)
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'date_sub' === item.datePattern"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -559,7 +570,7 @@ onMounted(() => {
                       {{ t('chart.date_split') }}(1990/01/01)
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'date_split' === item.datePattern"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -578,7 +589,7 @@ onMounted(() => {
             :command="beforeClickItem('rename')"
           >
             <el-icon>
-              <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+              <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
             </el-icon>
             <span>{{ t('chart.show_name_set') }}</span>
           </el-dropdown-item>
@@ -593,7 +604,9 @@ onMounted(() => {
           </el-dropdown-item>
           <el-dropdown-item class="menu-item-padding" divided :command="beforeClickItem('remove')">
             <el-icon>
-              <icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></icon>
+              <icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></icon>
             </el-icon>
             <span>{{ t('chart.delete') }}</span>
           </el-dropdown-item>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
index 7bed3e5f53..5577a61667 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
@@ -95,21 +95,25 @@ onMounted(() => {
         <span style="display: flex">
           <el-icon>
             <Icon :className="`field-icon-${fieldType[item.deType]}`"
-              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+              ><component
+                class="svg-icon"
+                :class="`field-icon-${fieldType[item.deType]}`"
+                :is="iconFieldMap[fieldType[item.deType]]"
+              ></component
             ></Icon>
           </el-icon>
         </span>
         <span class="item-span-style" :title="item.name">{{ item.name }}</span>
         <el-icon class="child remove-icon" size="14px">
           <Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
-            ><icon_deleteTrash_outlined
+            ><icon_deleteTrash_outlined class="svg-icon inner-class"
           /></Icon>
         </el-icon>
         <el-icon
           class="child"
           style="position: absolute; top: 7px; right: 10px; color: #a6a6a6; cursor: pointer"
         >
-          <Icon name="icon_down_outlined-1"><icon_down_outlined1 /></Icon>
+          <Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/FilterItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/FilterItem.vue
index 19ab066d63..a3b98c54ce 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/FilterItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/FilterItem.vue
@@ -104,14 +104,18 @@ onMounted(() => {
         <span style="display: flex">
           <el-icon>
             <Icon :className="`field-icon-${fieldType[item.deType]}`"
-              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+              ><component
+                class="svg-icon"
+                :class="`field-icon-${fieldType[item.deType]}`"
+                :is="iconFieldMap[fieldType[item.deType]]"
+              ></component
             ></Icon>
           </el-icon>
         </span>
         <span class="item-span-style" :title="item.name">{{ item.name }}</span>
         <el-icon class="child remove-icon" size="14px">
           <Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
-            ><icon_deleteTrash_outlined
+            ><icon_deleteTrash_outlined class="svg-icon inner-class"
           /></Icon>
         </el-icon>
         <el-icon
@@ -119,7 +123,7 @@ onMounted(() => {
           style="position: absolute; top: 7px; right: 10px; color: #a6a6a6; cursor: pointer"
         >
           <Icon name="icon_down_outlined-1" class="el-icon-arrow-down el-icon-delete"
-            ><icon_down_outlined1
+            ><icon_down_outlined1 class="svg-icon el-icon-arrow-down el-icon-delete"
           /></Icon>
         </el-icon>
       </el-tag>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
index 13908d51dd..5988f110b8 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@@ -10,7 +10,6 @@ import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'
 import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { formatterItem } from '@/views/chart/components/js/formatter'
@@ -300,17 +299,25 @@ onMounted(() => {
       >
         <span style="display: flex; color: #646a73">
           <el-icon v-if="'asc' === item.sort">
-            <Icon name="icon_sort-a-to-z_outlined"><icon_sortAToZ_outlined /></Icon>
+            <Icon name="icon_sort-a-to-z_outlined"
+              ><icon_sortAToZ_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'desc' === item.sort">
-            <Icon name="icon_sort-z-to-a_outlined"><icon_sortZToA_outlined /></Icon>
+            <Icon name="icon_sort-z-to-a_outlined"
+              ><icon_sortZToA_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
+            <Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
           </el-icon>
           <el-icon>
             <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
-              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+              ><component
+                :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+                class="svg-icon"
+                :is="iconFieldMap[fieldType[item.deType]]"
+              ></component
             ></Icon>
           </el-icon>
         </span>
@@ -348,13 +355,13 @@ onMounted(() => {
           </template>
           <el-icon class="child remove-icon">
             <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
-              ><icon_deleteTrash_outlined
+              ><icon_deleteTrash_outlined class="svg-icon inner-class"
             /></Icon>
           </el-icon>
         </el-tooltip>
 
         <el-icon class="child" style="position: absolute; top: 7px; right: 10px; cursor: pointer">
-          <Icon name="icon_down_outlined-1"><icon_down_outlined1 /></Icon>
+          <Icon name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -374,12 +381,12 @@ onMounted(() => {
               <span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <Icon name="icon_dashboard_outlined" ><icon_dashboard_outlined /></Icon>
+                    <Icon name="icon_dashboard_outlined" ><icon_dashboard_outlined class="svg-icon" /></Icon>
                   </el-icon>
                   <span>{{ t('chart.chart_type') }}</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -395,7 +402,7 @@ onMounted(() => {
                     >
                       {{ t('chart.chart_bar') }}
                       <el-icon class="sub-menu-content&#45;&#45;icon">
-                        <Icon name="icon_done_outlined" v-if="'bar' === item.chartType" ><icon_done_outlined /></Icon>
+                        <Icon name="icon_done_outlined" v-if="'bar' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -406,7 +413,7 @@ onMounted(() => {
                     >
                       {{ t('chart.chart_line') }}
                       <el-icon class="sub-menu-content&#45;&#45;icon">
-                        <Icon name="icon_done_outlined" v-if="'line' === item.chartType" ><icon_done_outlined /></Icon>
+                        <Icon name="icon_done_outlined" v-if="'line' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -428,13 +435,15 @@ onMounted(() => {
               <span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <Icon name="icon_functions_outlined"><icon_functions_outlined /></Icon>
+                    <Icon name="icon_functions_outlined"
+                      ><icon_functions_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                   <span>{{ t('chart.summary') }}</span>
                   <span class="summary-span-item">({{ t('chart.' + item.summary) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -455,7 +464,7 @@ onMounted(() => {
                       {{ t('chart.sum') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'sum' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -472,7 +481,7 @@ onMounted(() => {
                       {{ t('chart.avg') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'avg' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -489,7 +498,7 @@ onMounted(() => {
                       {{ t('chart.max') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'max' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -506,7 +515,7 @@ onMounted(() => {
                       {{ t('chart.min') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'min' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -523,7 +532,7 @@ onMounted(() => {
                       {{ t('chart.stddev_pop') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'stddev_pop' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -540,7 +549,7 @@ onMounted(() => {
                       {{ t('chart.var_pop') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'var_pop' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -553,7 +562,7 @@ onMounted(() => {
                       {{ t('chart.count') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'count' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -570,7 +579,7 @@ onMounted(() => {
                       {{ t('chart.count_distinct') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'count_distinct' === item.summary"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -595,7 +604,7 @@ onMounted(() => {
               <span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <!--                    <Icon name="icon_describe_outlined" ><icon_describe_outlined /></Icon>-->
+                    <!--                    <Icon name="icon_describe_outlined" ><icon_describe_outlined class="svg-icon" /></Icon>-->
                   </el-icon>
                   <span>{{ t('chart.quick_calc') }}</span>
                   <span class="summary-span-item">
@@ -605,7 +614,7 @@ onMounted(() => {
                   </span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -622,7 +631,7 @@ onMounted(() => {
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'none' === item.compareCalc.type"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -639,7 +648,7 @@ onMounted(() => {
                       {{ t('chart.yoy_label') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'yoy_label' === item.compareCalc.type"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -656,7 +665,7 @@ onMounted(() => {
                       {{ t('chart.percent') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'percent' === item.compareCalc.type"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -686,13 +695,13 @@ onMounted(() => {
               <span class="el-dropdown-link inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
+                    <Icon name="icon_sort_outlined"><icon_sort_outlined class="svg-icon" /></Icon>
                   </el-icon>
                   <span>{{ t('chart.sort') }}</span>
                   <span class="summary-span-item">({{ t('chart.' + item.sort) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -709,7 +718,7 @@ onMounted(() => {
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'none' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -722,7 +731,7 @@ onMounted(() => {
                       {{ t('chart.asc') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'asc' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -735,7 +744,7 @@ onMounted(() => {
                       {{ t('chart.desc') }}
                       <el-icon class="sub-menu-content--icon">
                         <Icon name="icon_done_outlined" v-if="'desc' === item.sort"
-                          ><icon_done_outlined
+                          ><icon_done_outlined class="svg-icon"
                         /></Icon>
                       </el-icon>
                     </span>
@@ -769,13 +778,15 @@ onMounted(() => {
 
           <el-dropdown-item class="menu-item-padding" :command="beforeClickItem('rename')">
             <el-icon>
-              <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+              <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
             </el-icon>
             <span>{{ t('chart.show_name_set') }}</span>
           </el-dropdown-item>
           <el-dropdown-item class="menu-item-padding" :command="beforeClickItem('remove')">
             <el-icon>
-              <icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></icon>
+              <icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></icon>
             </el-icon>
             <span>{{ t('chart.delete') }}</span>
           </el-dropdown-item>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/components/CustomSortEdit.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/components/CustomSortEdit.vue
index f7c5687a7d..1d6afd7cf3 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/components/CustomSortEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/components/CustomSortEdit.vue
@@ -89,7 +89,7 @@ init()
       <template #item="{ element }">
         <span :key="element.value" class="item-dimension" :title="element.value">
           <el-icon class="item-icon">
-            <Icon name="icon_drag_outlined" ><icon_drag_outlined /></Icon>
+            <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
           </el-icon>
           <span class="item-span">
             {{ element.value }}
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index 75fe9441a1..5a0d2f5040 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -343,7 +343,9 @@ const removeJumpSenior = () => {
                     @click="removeLinkageSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -355,7 +357,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.linkageActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </button>
               </span>
@@ -384,7 +386,9 @@ const removeJumpSenior = () => {
                     @click="removeJumpSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -396,7 +400,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.jumpActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </button>
               </span>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
index 2569ea5aec..c5e676aaeb 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@@ -166,7 +166,7 @@ onMounted(() => {
           @click="editLine"
         >
           <el-icon>
-            <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
+            <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
           </el-icon>
         </button>
       </span>
@@ -222,7 +222,7 @@ onMounted(() => {
               <span> {{ t('chart.assist_line_tip') }}</span>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-              <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
index bfe4675e18..628aaca881 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@@ -322,7 +322,7 @@ init()
         >
           <template #icon>
             <el-icon size="14px">
-              <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+              <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
             </el-icon>
           </template>
         </el-button>
@@ -398,7 +398,7 @@ init()
             >
               <template #icon>
                 <el-icon size="14px">
-                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
             </el-button>
@@ -496,7 +496,7 @@ init()
             >
               <template #icon>
                 <el-icon size="14px">
-                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
             </el-button>
@@ -517,7 +517,11 @@ init()
               <span>
                 <el-icon>
                   <Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[fieldItem.field.deType]]"></component
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[fieldItem.field.deType]}`"
+                      :is="iconFieldMap[fieldType[fieldItem.field.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
               </span>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue
index 8ae0dec950..928145e1d1 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue
@@ -234,7 +234,11 @@ onMounted(() => {
               <span style="float: left">
                 <el-icon>
                   <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
               </span>
@@ -300,7 +304,9 @@ onMounted(() => {
               class="hover-icon"
               @click="removeLine(index)"
             >
-              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-col>
@@ -308,7 +314,7 @@ onMounted(() => {
     </div>
     <el-button class="circle-button" text style="margin-left: 5px" @click="addLine">
       <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
       </template>
       {{ t('chart.add_assist_line') }}
     </el-button>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
index 0f000a9c9b..964a4497e6 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@@ -252,7 +252,9 @@ init()
 <template>
   <el-col>
     <div class="tip">
-      <Icon name="icon_info_filled" class="icon-style"><icon_info_filled /></Icon>
+      <Icon name="icon_info_filled" class="icon-style"
+        ><icon_info_filled class="svg-icon icon-style"
+      /></Icon>
       <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
     </div>
 
@@ -293,7 +295,9 @@ init()
             @click="removeThreshold(fieldIndex)"
           >
             <el-icon size="20px" style="color: #646a73">
-              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </el-button>
         </el-row>
@@ -426,7 +430,9 @@ init()
                 @click="removeCondition(fieldItem, index)"
               >
                 <el-icon size="20px" style="color: #646a73">
-                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-button>
             </div>
@@ -441,7 +447,7 @@ init()
           @click="addConditions(fieldItem)"
         >
           <template #icon>
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </template>
           {{ t('chart.add_style') }}
         </el-button>
@@ -456,7 +462,7 @@ init()
       @click="addThreshold"
     >
       <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
       </template>
       {{ t('chart.add_condition') }}
     </el-button>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue
index 661f4cf97c..64da85f072 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue
@@ -92,7 +92,7 @@ init()
   <el-col>
     <el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
       <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -138,7 +138,9 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
             </template>
           </el-button>
         </el-col>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
index 88e8d8f652..3e23f23164 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
@@ -105,7 +105,7 @@ init()
   <el-col>
     <el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
       <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -199,7 +199,9 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
             </template>
           </el-button>
         </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index aac353a96c..519e54ce07 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -298,7 +298,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkBold('fontWeight')"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -316,7 +316,9 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkItalic('fontStyle')"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                    <Icon name="icon_italic_outlined"
+                      ><icon_italic_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -354,7 +356,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                     placement="top"
                   >
                     <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-                      <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                      <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </el-checkbox>
@@ -416,7 +418,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkBold('fontWeightBtn')"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -434,7 +436,9 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkItalic('fontStyleBtn')"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                    <Icon name="icon_italic_outlined"
+                      ><icon_italic_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index 1c52393e41..d4b59ed49e 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -390,7 +390,7 @@ const colorItemBorderColor = (index, state) => {
           @click="customColorExtendSettingOpened = !customColorExtendSettingOpened"
         >
           <el-icon style="font-size: 12px">
-            <Icon name="icon_admin_outlined" ><icon_admin_outlined /></Icon>
+            <Icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
       </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
index c00cd2420b..185be345e3 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
@@ -198,7 +198,7 @@ onMounted(() => {
             <template #content><span v-html="t('chart.axis_tip')"></span></template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -254,7 +254,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
index 3bf26abfa4..3f46e15314 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
@@ -182,7 +182,9 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -212,7 +214,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorNameForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                  <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -235,7 +237,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorNameForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                  <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
index d5978efdaa..3ce1c376af 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
@@ -192,7 +192,9 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -222,7 +224,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorValueForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                  <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -245,7 +247,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorValueForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                  <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -274,7 +276,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
+                    <Icon name="icon_left-alignment_outlined"
+                      ><icon_leftAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -292,7 +296,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
+                    <Icon name="icon_center-alignment_outlined"
+                      ><icon_centerAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -310,7 +316,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
+                    <Icon name="icon_right-alignment_outlined"
+                      ><icon_rightAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -339,7 +347,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_top-align_outlined" ><icon_topAlign_outlined /></Icon>
+                  <Icon name="icon_top-align_outlined"
+                    ><icon_topAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -357,7 +367,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" ><icon_verticalAlign_outlined /></Icon>
+                  <Icon name="icon_vertical-align_outlined"
+                    ><icon_verticalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -375,7 +387,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" ><icon_bottomAlign_outlined /></Icon>
+                  <Icon name="icon_bottom-align_outlined"
+                    ><icon_bottomAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -481,7 +495,9 @@ defineExpose({ getFormData })
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
+                  <Icon name="icon_letter-spacing_outlined"
+                    ><icon_letterSpacing_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
               <el-option
@@ -515,7 +531,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -542,7 +558,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                    <Icon name="icon_italic_outlined"
+                      ><icon_italic_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 812090e49a..6f72dc89db 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -478,7 +478,7 @@ const conversionPrecision = [
                 <div>可以${fieldName}的形式读取字段值（不支持换行）</div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -550,7 +550,7 @@ const conversionPrecision = [
           </template>
           <span style="vertical-align: middle">
             <el-icon style="cursor: pointer">
-              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </span>
         </el-tooltip>
@@ -1010,7 +1010,11 @@ const conversionPrecision = [
           <template #prefix>
             <el-icon v-if="curSeriesFormatter[computedIdKey]" style="font-size: 14px">
               <Icon :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
-                ><component :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"></component
+                ><component
+                  :class="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                  class="svg-icon"
+                  :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"
+                ></component
               ></Icon>
             </el-icon>
           </template>
@@ -1018,7 +1022,11 @@ const conversionPrecision = [
             <el-option class="series-select-option" :value="item" :label="item.optionLabel">
               <el-icon style="margin-right: 8px">
                 <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  ><component
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               {{ item.optionShowName }}
@@ -1272,7 +1280,7 @@ const conversionPrecision = [
               </template>
               <span style="vertical-align: middle">
                 <el-icon style="cursor: pointer">
-                  <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
index 0448050ac3..89d41a8f00 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
@@ -302,7 +302,9 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.hPosition === 'left' }"
               >
                 <el-icon>
-                  <Icon name="icon_left-align_outlined" ><icon_leftAlign_outlined /></Icon>
+                  <Icon name="icon_left-align_outlined"
+                    ><icon_leftAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -320,7 +322,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_horizontal-align_outlined" ><icon_horizontalAlign_outlined /></Icon>
+                  <Icon name="icon_horizontal-align_outlined"
+                    ><icon_horizontalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -335,7 +339,9 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.hPosition === 'right' }"
               >
                 <el-icon>
-                  <Icon name="icon_right-align_outlined" ><icon_rightAlign_outlined /></Icon>
+                  <Icon name="icon_right-align_outlined"
+                    ><icon_rightAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -370,7 +376,9 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.vPosition === 'top' }"
               >
                 <el-icon>
-                  <Icon name="icon_top-align_outlined" ><icon_topAlign_outlined /></Icon>
+                  <Icon name="icon_top-align_outlined"
+                    ><icon_topAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -388,7 +396,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" ><icon_verticalAlign_outlined /></Icon>
+                  <Icon name="icon_vertical-align_outlined"
+                    ><icon_verticalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -406,7 +416,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" ><icon_bottomAlign_outlined /></Icon>
+                  <Icon name="icon_bottom-align_outlined"
+                    ><icon_bottomAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
index 403b410239..9840040bf5 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
@@ -284,7 +284,11 @@ onMounted(() => {
             >
               <el-icon style="margin-right: 8px">
                 <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               {{ item.name }}
@@ -378,7 +382,11 @@ onMounted(() => {
             >
               <el-icon style="margin-right: 8px">
                 <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  ><component
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               {{ item.name }}
@@ -522,9 +530,13 @@ onMounted(() => {
               :value="item.id"
             >
               <el-icon style="margin-right: 8px">
-                <Icon
-                  :className="`field-icon-${fieldType[item.deType]}`"
-                ><component :is="iconFieldMap[fieldType[item.deType]]"></component></Icon>
+                <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                  ><component
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -577,7 +589,7 @@ onMounted(() => {
             <template #content><span v-html="t('chart.axis_tip')"></span></template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
index f4d16dd7a5..b63e272839 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
@@ -205,7 +205,9 @@ watch(
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -235,7 +237,7 @@ watch(
                 :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                  <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -258,7 +260,7 @@ watch(
                 :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                  <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -284,7 +286,9 @@ watch(
                   :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
                 >
                   <el-icon>
-                    <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
+                    <Icon name="icon_left-alignment_outlined"
+                      ><icon_leftAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -302,7 +306,9 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
+                    <Icon name="icon_center-alignment_outlined"
+                      ><icon_centerAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -320,7 +326,9 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
+                    <Icon name="icon_right-alignment_outlined"
+                      ><icon_rightAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -356,7 +364,7 @@ watch(
         </label>
         <el-button text @click="openEditRemark" :effect="themes">
           <el-icon size="14px">
-            <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
+            <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
           </el-icon>
         </el-button>
       </el-form-item>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
index cc1990d1a1..a70f4be409 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@@ -519,7 +519,7 @@ onMounted(() => {
                 <div>可以${fieldName}的形式读取字段值（支持HTML）</div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
-                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -642,7 +642,11 @@ onMounted(() => {
           <template #prefix>
             <el-icon v-if="curSeriesFormatter.seriesId" style="font-size: 14px">
               <Icon :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
-                ><component :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"></component
+                ><component
+                  class="svg-icon"
+                  :class="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                  :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"
+                ></component
               ></Icon>
             </el-icon>
           </template>
@@ -657,7 +661,11 @@ onMounted(() => {
             >
               <el-icon style="margin-right: 8px">
                 <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               {{ item.name }}
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
index da0b207aea..2291f57cbe 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
@@ -215,7 +215,7 @@ onMounted(() => {
             <template #content><span v-html="t('chart.axis_tip')"></span></template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -271,7 +271,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
index 903bdf7373..fbed259593 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
@@ -183,7 +183,7 @@ onMounted(() => {
             <template #content><span v-html="t('chart.axis_tip')"></span></template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -239,7 +239,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/CustomAggrEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/CustomAggrEdit.vue
index 2f105c34d0..69cb10c172 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/CustomAggrEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/CustomAggrEdit.vue
@@ -232,7 +232,7 @@ initFunction()
                 <div>{{ t('dataset.calc_tips.tip2') }}</div>
               </template>
               <el-icon size="16px">
-                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -257,7 +257,7 @@ initFunction()
               {{ t('dataset.calc_tips.tip5') }}
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -265,7 +265,9 @@ initFunction()
           <el-input v-model="searchField" :placeholder="t('dataset.edit_search')" clearable>
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -282,20 +284,28 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon v-if="!item.groupType">
-                  <Icon name="icon_adjustment_outlined"><icon_adjustment_outlined /></Icon>
+                  <Icon name="icon_adjustment_outlined"
+                    ><icon_adjustment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
                 <el-icon v-else>
                   <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 {{ item.name }}
                 <div v-if="!item.groupType" class="icon-right">
                   <el-icon @click.stop="updateParmasToQuota" class="hover-icon">
-                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                   <el-icon @click.stop="delParmasToQuota" class="hover-icon">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -319,7 +329,7 @@ initFunction()
               <div v-else>{{ t('dataset.calc_tips.tip7') }}</div>
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -332,7 +342,9 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
index 73c0d5ba4e..393750b916 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@@ -184,7 +184,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableCellForm.isBolder }"
             >
               <el-icon>
-                <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -207,7 +207,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableCellForm.isItalic }"
             >
               <el-icon>
-                <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -238,7 +238,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
+                  <Icon name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -256,7 +258,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -274,7 +278,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
+                  <Icon name="icon_right-alignment_outlined"
+                    ><icon_rightAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
index 9970c5a831..b815e5a57f 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@@ -155,7 +155,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableHeaderForm.isBolder }"
             >
               <el-icon>
-                <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
+                <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -178,7 +178,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableHeaderForm.isItalic }"
             >
               <el-icon>
-                <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
+                <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -209,7 +209,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
+                  <Icon name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -227,7 +229,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -245,7 +249,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
+                  <Icon name="icon_right-alignment_outlined"
+                    ><icon_rightAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/QuotaFilterEditor.vue b/core/core-frontend/src/views/chart/components/editor/filter/QuotaFilterEditor.vue
index bc82c55fe1..7e8b6749ab 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/QuotaFilterEditor.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/QuotaFilterEditor.vue
@@ -143,7 +143,9 @@ init()
         </div>
         <el-button class="m-del-icon-btn" text @click="removeFilter(index)">
           <el-icon size="20px">
-            <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+            <Icon name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </el-button>
       </div>
@@ -154,7 +156,9 @@ init()
       @click="addFilter"
       :style="{ marginTop: item.filter && item.filter.length > 0 ? '10px' : 0 }"
     >
-      <Icon name="icon_add_outlined" style="width: 14px" ><icon_add_outlined /></Icon>
+      <Icon name="icon_add_outlined"
+        ><icon_add_outlined class="svg-icon" style="width: 14px"
+      /></Icon>
       {{ t('chart.add_addition') }}
     </el-button>
   </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/ResultFilterEditor.vue b/core/core-frontend/src/views/chart/components/editor/filter/ResultFilterEditor.vue
index f34d459cb6..7a012df43f 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/ResultFilterEditor.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/ResultFilterEditor.vue
@@ -335,7 +335,9 @@ init()
 
             <el-button class="m-del-icon-btn" text @click="removeFilter(index)">
               <el-icon size="20px">
-                <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                <Icon name="icon_delete-trash_outlined"
+                  ><icon_deleteTrash_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </el-button>
           </div>
@@ -346,7 +348,9 @@ init()
           @click="addFilter"
           :style="{ marginTop: item.filter && item.filter.length > 0 ? '10px' : 0 }"
         >
-          <Icon name="icon_add_outlined" style="width: 14px" ><icon_add_outlined /></Icon>
+          <Icon name="icon_add_outlined"
+            ><icon_add_outlined style="width: 14px" class="svg-icon"
+          /></Icon>
           {{ t('chart.add_addition') }}
         </el-button>
       </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
index 5f91712aa5..6f563903b6 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
@@ -94,7 +94,7 @@ const del = (index, child) => {
           <span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir">
             {{ logic === 'or' ? 'OR' : 'AND' }}
             <el-icon>
-              <Icon name="icon_down_outlined"><icon_down_outlined /></Icon>
+              <Icon name="icon_down_outlined"><icon_down_outlined class="svg-icon" /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -107,7 +107,9 @@ const del = (index, child) => {
       </div>
       <span class="operate-icon" v-if="x">
         <el-icon @click="emits('removeRelationList')">
-          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+          <Icon name="icon_delete-trash_outlined"
+            ><icon_deleteTrash_outlined class="svg-icon"
+          /></Icon>
         </el-icon>
       </span>
     </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
index fb2cbf79de..3dd961bcb0 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -375,7 +375,9 @@ const emits = defineEmits(['update:item', 'del'])
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                  <Icon name="icon_search-outline_outlined"
+                    ><icon_searchOutline_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -390,7 +392,11 @@ const emits = defineEmits(['update:item', 'del'])
               >
                 <el-icon>
                   <Icon :className="`field-icon-${fieldEnums[ele.deType]}`"
-                    ><component :is="iconFieldMap[fieldEnums[ele.deType]]"></component
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldEnums[ele.deType]}`"
+                      :is="iconFieldMap[fieldEnums[ele.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -575,7 +581,9 @@ const emits = defineEmits(['update:item', 'del'])
                     <label>{{ i }}</label>
                   </el-tooltip>
                   <el-icon @click="delChecks(idx)" style="opacity: 1">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -586,7 +594,9 @@ const emits = defineEmits(['update:item', 'del'])
                 </div>
                 <div class="footer-right">
                   <el-icon @click="clearAll">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -595,7 +605,9 @@ const emits = defineEmits(['update:item', 'del'])
         </el-popover>
       </div>
       <el-icon v-if="showDel" class="font12" @click="emits('del')">
-        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+        <Icon name="icon_delete-trash_outlined"
+          ><icon_deleteTrash_outlined class="svg-icon"
+        /></Icon>
       </el-icon>
     </div>
     <el-dialog append-to-body v-model="dialogVisible" title="日期设置" width="500">
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 55febb112f..6f4906d195 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -67,7 +67,10 @@ import { XpackComponent } from '@/components/plugin'
 import { useEmbedded } from '@/store/modules/embedded'
 import { iconChartMap } from '@/components/icon-group/chart-list'
 import { iconFieldMap } from '@/components/icon-group/field-list'
-import { iconFieldCalculatedMap, iconFieldCalculatedQMap } from '@/components/icon-group/field-calculated-list'
+import {
+  iconFieldCalculatedMap,
+  iconFieldCalculatedQMap
+} from '@/components/icon-group/field-calculated-list'
 const embeddedStore = useEmbedded()
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -1811,10 +1814,12 @@ const deleteChartFieldItem = id => {
                                 v-if="state.chartTypeOptions[0]?.isPlugin"
                                 :static-content="state.chartTypeOptions[0]?.icon"
                               />
-                              <Icon
-                                v-else
-                                class-name="chart-type-select-icon"
-                              ><component :is='iconChartMap[state.chartTypeOptions[0]['icon']]'></component></Icon>
+                              <Icon v-else class-name="chart-type-select-icon">
+                                <component
+                                  class="svg-icon chart-type-select-icon"
+                                  :is="iconChartMap[state.chartTypeOptions[0].icon]"
+                                ></component>
+                              </Icon>
                             </template>
                             <template #default>
                               <el-option
@@ -1887,7 +1892,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('xAxis')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -1945,7 +1952,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('xAxisExt')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2001,7 +2010,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('flowMapStartName')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2059,7 +2070,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('flowMapEndName')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2117,7 +2130,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extStack')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2172,7 +2187,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extColor')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2235,7 +2252,9 @@ const deleteChartFieldItem = id => {
                                   class="hint-icon"
                                   :class="{ 'hint-icon--dark': themes === 'dark' }"
                                 >
-                                  <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                                  <Icon name="icon_info_outlined"
+                                    ><icon_info_outlined class="svg-icon"
+                                  /></Icon>
                                 </el-icon>
                               </el-tooltip>
                             </span>
@@ -2250,7 +2269,9 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxis')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2311,7 +2332,9 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('extBubble')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2367,7 +2390,9 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxisExt')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2427,7 +2452,9 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxis')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2500,7 +2527,9 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxisExt')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2577,7 +2606,9 @@ const deleteChartFieldItem = id => {
                                 class="hint-icon"
                                 :class="{ 'hint-icon--dark': themes === 'dark' }"
                               >
-                                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                                <Icon name="icon_info_outlined"
+                                  ><icon_info_outlined class="svg-icon"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2592,7 +2623,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extBubble')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2649,7 +2682,9 @@ const deleteChartFieldItem = id => {
                                 class="hint-icon"
                                 :class="{ 'hint-icon--dark': themes === 'dark' }"
                               >
-                                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+                                <Icon name="icon_info_outlined"
+                                  ><icon_info_outlined class="svg-icon"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2664,7 +2699,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('drillFields')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2718,7 +2755,9 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('customFilter')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                                ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2728,7 +2767,9 @@ const deleteChartFieldItem = id => {
                           @click="openTreeFilter"
                         >
                           <el-icon>
-                            <Icon class="svg-background" name="icon-filter"><iconFilter /></Icon>
+                            <Icon class="svg-background" name="icon-filter"
+                              ><iconFilter class="svg-icon svg-background"
+                            /></Icon>
                           </el-icon>
 
                           <span>{{ $t('chart.filter') }}</span>
@@ -3008,7 +3049,9 @@ const deleteChartFieldItem = id => {
                   style="margin-left: 8px"
                   @click="editDs"
                 >
-                  <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete" ><icon_edit_outlined /></Icon>
+                  <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete"
+                    ><icon_edit_outlined class="svg-icon el-icon-arrow-down el-icon-delete"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-row>
@@ -3022,10 +3065,9 @@ const deleteChartFieldItem = id => {
                       :class="{ dark: themes === 'dark' }"
                       @click="getFields(view.tableId, view.id, view.type)"
                     >
-                      <Icon
-                        name="icon_refresh_outlined"
-                        class="el-icon-arrow-down el-icon-delete"
-                      ><icon_refresh_outlined /></Icon>
+                      <Icon name="icon_refresh_outlined" class="el-icon-arrow-down el-icon-delete"
+                        ><icon_refresh_outlined class="svg-icon el-icon-arrow-down el-icon-delete"
+                      /></Icon>
                     </el-icon>
                   </el-tooltip>
                   <el-icon
@@ -3034,7 +3076,9 @@ const deleteChartFieldItem = id => {
                     :class="{ dark: themes === 'dark' }"
                     @click="addCalcField('d')"
                   >
-                    <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete"><icon_add_outlined /></Icon>
+                    <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete"
+                      ><icon_add_outlined class="svg-icon el-icon-arrow-down el-icon-delete"
+                    /></Icon>
                   </el-icon>
                 </span>
               </div>
@@ -3049,7 +3093,9 @@ const deleteChartFieldItem = id => {
               >
                 <template #prefix>
                   <el-icon class="el-input__icon">
-                    <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                    <Icon name="icon_search-outline_outlined"
+                      ><icon_searchOutline_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </template>
               </el-input>
@@ -3093,7 +3139,10 @@ const deleteChartFieldItem = id => {
                           :class-name="`field-icon-${
                             fieldType[[2, 3].includes(element.deType) ? 2 : 0]
                           }`"
-                        ><component :is='getIconName(element.deType, element.extField)'></component></Icon>
+                          ><component
+                            :is="getIconName(element.deType, element.extField)"
+                          ></component
+                        ></Icon>
                       </el-icon>
                       <span
                         class="field-name ellipsis"
@@ -3108,7 +3157,9 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="copyChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_copy_outlined" ><icon_copy_outlined /></Icon>
+                        <Icon class-name="inner-class" name="icon_copy_outlined"
+                          ><icon_copy_outlined class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3117,7 +3168,9 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="deleteChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                        <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3167,7 +3220,8 @@ const deleteChartFieldItem = id => {
                               :class-name="`field-icon-${
                                 fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
                               }`"
-                            ><component :is='iconFieldMap[fieldType[ele.deType]]'></component></Icon>
+                              ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                            ></Icon>
                           </el-icon>
                           <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{
                             ele.name
@@ -3241,9 +3295,13 @@ const deleteChartFieldItem = id => {
                       ]"
                     >
                       <el-icon>
-                        <Icon
-                          :class-name="`field-icon-${fieldType[element.deType]}`"
-                        ><component :is='getIconName(element.deType, element.extField, true)'></component></Icon>
+                        <Icon :class-name="`field-icon-${fieldType[element.deType]}`"
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[element.deType]}`"
+                            :is="getIconName(element.deType, element.extField, true)"
+                          ></component
+                        ></Icon>
                       </el-icon>
                       <span
                         class="field-name ellipsis"
@@ -3258,7 +3316,9 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="copyChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_copy_outlined" ><icon_copy_outlined /></Icon>
+                        <Icon class-name="inner-class" name="icon_copy_outlined"
+                          ><icon_copy_outlined class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3267,7 +3327,9 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="deleteChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
+                        <Icon class-name="inner-class" name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3313,7 +3375,13 @@ const deleteChartFieldItem = id => {
                           class="items flex-align-center"
                         >
                           <el-icon>
-                            <Icon :class-name="`field-icon-${fieldType[ele.deType]}`"><component :is='iconFieldMap[fieldType[ele.deType]]'></component></Icon>
+                            <Icon :class-name="`field-icon-${fieldType[ele.deType]}`"
+                              ><component
+                                class="svg-icon"
+                                :class-name="`field-icon-${fieldType[ele.deType]}`"
+                                :is="iconFieldMap[fieldType[ele.deType]]"
+                              ></component
+                            ></Icon>
                           </el-icon>
                           <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{
                             ele.name
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartEmptyInfo.vue b/core/core-frontend/src/views/chart/components/views/components/ChartEmptyInfo.vue
index d7d73803f9..1ff5060db5 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartEmptyInfo.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartEmptyInfo.vue
@@ -22,6 +22,7 @@ const { viewIcon, themes } = toRefs(props)
   <div class="canvas-content error-info">
     <Icon class-name="item-icon"
       ><component
+        class="svg-icon item-icon"
         :is="themes === 'dark' ? iconChartDarkMap[`${viewIcon}-dark`] : iconChartMap[viewIcon]"
       ></component
     ></Icon>
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index f657a278e6..2cacfec4aa 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -859,22 +859,26 @@ const loadPluginCategory = data => {
               <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
             </template>
             <el-icon :size="iconSize" class="inner-icon">
-              <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
           <el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
             <el-icon :size="iconSize" class="inner-icon">
-              <Icon name="icon_link-record_outlined" ><icon_linkRecord_outlined /></Icon>
+              <Icon name="icon_link-record_outlined"
+                ><icon_linkRecord_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </el-tooltip>
           <el-tooltip :effect="toolTip" placement="top" content="已设置跳转" v-if="hasJumpIcon">
             <el-icon :size="iconSize" class="inner-icon">
-              <Icon name="icon_viewinchat_outlined" ><icon_viewinchat_outlined /></Icon>
+              <Icon name="icon_viewinchat_outlined"
+                ><icon_viewinchat_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </el-tooltip>
           <el-tooltip :effect="toolTip" placement="top" content="已设置下钻" v-if="hasDrillIcon">
             <el-icon :size="iconSize" class="inner-icon">
-              <Icon name="icon_drilling_outlined" ><icon_drilling_outlined /></Icon>
+              <Icon name="icon_drilling_outlined"><icon_drilling_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </div>
diff --git a/core/core-frontend/src/views/common/DeAppApply.vue b/core/core-frontend/src/views/common/DeAppApply.vue
index 50c98c3937..9ea22e11ab 100644
--- a/core/core-frontend/src/views/common/DeAppApply.vue
+++ b/core/core-frontend/src/views/common/DeAppApply.vue
@@ -40,7 +40,7 @@
             <template #default="{ data: { name } }">
               <span class="custom-tree-node">
                 <el-icon>
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <span :title="name">{{ name }}</span>
               </span>
@@ -70,7 +70,7 @@
             <template #default="{ data: { name } }">
               <span class="custom-tree-node">
                 <el-icon>
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <span :title="name">{{ name }}</span>
               </span>
@@ -100,7 +100,8 @@
                 </el-option>
               </el-select> </el-col
             ><el-col :span="2" class="icon-center">
-              <Icon style="width: 20px; height: 20px" name="dv-link-target" ><dvLinkTarget /></Icon></el-col
+              <Icon name="dv-link-target"
+                ><dvLinkTarget class="svg-icon" style="width: 20px; height: 20px" /></Icon></el-col
             ><el-col :span="11">
               <dataset-select
                 ref="datasetSelector"
diff --git a/core/core-frontend/src/views/common/DeResourceArrow.vue b/core/core-frontend/src/views/common/DeResourceArrow.vue
index 1b523780e8..418861b358 100644
--- a/core/core-frontend/src/views/common/DeResourceArrow.vue
+++ b/core/core-frontend/src/views/common/DeResourceArrow.vue
@@ -23,7 +23,7 @@ const handleClick = val => {
     class="arrow-side-tree arrow-side-tree-left"
   >
     <el-icon>
-      <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
+      <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
     </el-icon>
   </div>
   <div
@@ -32,7 +32,7 @@ const handleClick = val => {
     class="arrow-side-tree arrow-side-tree-right"
   >
     <el-icon>
-      <Icon name="icon_right_outlined" ><icon_right_outlined /></Icon>
+      <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
     </el-icon>
   </div>
 </template>
diff --git a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
index e9abbf2d1e..8bf198363a 100644
--- a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
+++ b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
@@ -345,7 +345,7 @@ const emits = defineEmits(['finish'])
           <template #default="{ data: { name } }">
             <span class="custom-tree-node">
               <el-icon>
-                <Icon name="dv-folder"><dvFolder /></Icon>
+                <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
               </el-icon>
               <span :title="name">{{ name }}</span>
             </span>
@@ -356,7 +356,9 @@ const emits = defineEmits(['finish'])
         <el-input style="margin-bottom: 12px" v-model="filterText" clearable>
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -375,7 +377,7 @@ const emits = defineEmits(['finish'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <span :title="data.name">{{ data.name }}</span>
               </span>
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index 23b41bf37d..484042e9a8 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
-
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'
 import dvDelete from '@/assets/svg/dv-delete.svg'
 import dvMove from '@/assets/svg/dv-move.svg'
@@ -519,14 +519,16 @@ defineExpose({
               style="margin-right: 20px"
               @click="addOperation('newFolder', null, 'folder')"
             >
-              <Icon name="dv-new-folder"><dvNewFolder /></Icon>
+              <Icon name="dv-new-folder"><dvNewFolder class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
 
           <el-tooltip :content="newResourceLabel" placement="top" effect="dark">
             <el-dropdown popper-class="menu-outer-dv_popper" trigger="hover">
               <el-icon class="custom-icon btn" @click="addOperation('newLeaf', null, 'leaf', true)">
-                <Icon name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
+                <Icon name="icon_file-add_outlined"
+                  ><icon_fileAdd_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -538,7 +540,7 @@ defineExpose({
                   </el-dropdown-item>
                   <el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
                     <el-icon class="handle-icon">
-                      <Icon name="dv-use-template"><dvUseTemplate /></Icon>
+                      <Icon name="dv-use-template"><dvUseTemplate class="svg-icon" /></Icon>
                     </el-icon>
                     使用模板新建
                   </el-dropdown-item>
@@ -556,7 +558,9 @@ defineExpose({
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+            <Icon name="icon_search-outline_outlined"
+              ><icon_searchOutline_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -564,12 +568,12 @@ defineExpose({
         <el-icon class="filter-icon-span">
           <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
             <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
-              ><dvSortAsc
+              ><dvSortAsc class="svg-icon opt-icon"
             /></Icon>
           </el-tooltip>
           <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
-            <Icon v-show="state.curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
-              ><dvSortDesc
+            <Icon v-if="state.curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dvSortDesc class="svg-icon opt-icon"
             /></Icon>
           </el-tooltip>
         </el-icon>
@@ -607,7 +611,7 @@ defineExpose({
         <template #default="{ node, data }">
           <span class="custom-tree-node">
             <el-icon style="font-size: 18px" v-if="!data.leaf">
-              <Icon name="dv-folder"><dvFolder /></Icon>
+              <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
             </el-icon>
             <el-icon style="font-size: 18px" v-else-if="curCanvasType === 'dashboard'">
               <Icon
@@ -618,7 +622,7 @@ defineExpose({
             </el-icon>
             <el-icon class="icon-screen-new color-dataV" style="font-size: 18px" v-else>
               <Icon name="icon_operation-analysis_outlined"
-                ><icon_operationAnalysis_outlined
+                ><icon_operationAnalysis_outlined class="svg-icon"
               /></Icon>
             </el-icon>
             <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
@@ -633,14 +637,14 @@ defineExpose({
                 class="hover-icon"
                 @click="resourceEdit(data.id)"
               >
-                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
               </el-icon>
               <handle-more
                 @handle-command="
                   cmd => addOperation(cmd, data, cmd === 'newFolder' ? 'folder' : 'leaf')
                 "
                 :menu-list="resourceTypeList"
-                icon-name="icon_add_outlined"
+                :icon-name="icon_add_outlined"
                 placement="bottom-start"
                 v-if="!data.leaf"
               ></handle-more>
diff --git a/core/core-frontend/src/views/common/DeTemplatePreviewList.vue b/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
index b223911830..305fadca42 100644
--- a/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
+++ b/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
@@ -25,13 +25,15 @@
             <span class="custom-tree-node">
               <span class="custom-label">
                 <el-icon style="font-size: 18px" v-if="data.nodeType === 'folder'">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <el-icon style="font-size: 18px" v-else-if="data.dvType === 'dashboard'">
-                  <Icon name="dv-dashboard-spine"><dvDashboardSpine /></Icon>
+                  <Icon name="dv-dashboard-spine"><dvDashboardSpine class="svg-icon" /></Icon>
                 </el-icon>
                 <el-icon class="icon-screen-new" style="font-size: 18px" v-else>
-                  <Icon name="icon_operation-analysis_outlined"><icon_operationAnalysis_outlined /></Icon>
+                  <Icon name="icon_operation-analysis_outlined"
+                    ><icon_operationAnalysis_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
                 <span :title="data.name" class="custom-name">{{ data.name }}</span>
               </span>
diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue
index 28ddd378be..3a6979a2f7 100644
--- a/core/core-frontend/src/views/copilot/DialogueChart.vue
+++ b/core/core-frontend/src/views/copilot/DialogueChart.vue
@@ -350,13 +350,13 @@ const tips = computed(() => {
           class="ed-icon_chart"
           @click="switchChartType('table')"
         >
-          <Icon name="chart-table"><chartTable /></Icon>
+          <Icon name="chart-table"><chartTable class="svg-icon" /></Icon>
         </el-icon>
       </el-tooltip>
       <el-divider direction="vertical" />
       <el-tooltip effect="dark" content="下载" placement="top">
         <el-icon class="ed-icon_chart" @click="downloadChart">
-          <Icon name="chart-download"><chartDownload /></Icon>
+          <Icon name="chart-download"><chartDownload class="svg-icon" /></Icon>
         </el-icon>
       </el-tooltip>
     </div>
diff --git a/core/core-frontend/src/views/copilot/index.vue b/core/core-frontend/src/views/copilot/index.vue
index 9ab618ae88..707a3fa691 100644
--- a/core/core-frontend/src/views/copilot/index.vue
+++ b/core/core-frontend/src/views/copilot/index.vue
@@ -207,7 +207,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
   <div class="copilot">
     <div class="copilot-analysis">
       <el-icon style="margin-right: 8px; font-size: 24px">
-        <Icon name="copilot"><copilot /></Icon>
+        <Icon name="copilot"><copilot class="svg-icon" /></Icon>
       </el-icon>
       Copilot 对话分析
     </div>
@@ -230,7 +230,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
           >
           </el-input>
           <el-icon v-if="copilotChatLoading" class="copilot-icon circular-input_icon">
-            <Icon name="icon_loading_outlined"><icon_loading_outlined /></Icon>
+            <Icon name="icon_loading_outlined"><icon_loading_outlined class="svg-icon" /></Icon>
           </el-icon>
           <el-icon v-else class="copilot-icon" @click="queryAnswer" :class="isActive && 'active'">
             <Icon><component :is="isActive ? activeBtn_copilot : btn_copilot"></component></Icon>
@@ -241,7 +241,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
         <el-tooltip effect="dark" content="收起" placement="left">
           <p v-show="!showLeft" class="arrow-right" @click="handleShowLeft(true)">
             <el-icon>
-              <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+              <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
             </el-icon>
           </p>
         </el-tooltip>
@@ -249,7 +249,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
         <el-tooltip effect="dark" content="展开" placement="left">
           <p v-show="showLeft" class="left-outlined" @click="handleShowLeft(false)">
             <el-icon>
-              <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+              <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
             </el-icon>
           </p>
         </el-tooltip>
@@ -271,10 +271,10 @@ const queryAnswer = (event?: KeyboardEvent) => {
             <template #default="{ node, data }">
               <div class="content">
                 <el-icon size="18px" v-if="!data.leaf">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <el-icon size="18px" v-if="data.leaf">
-                  <Icon name="icon_dataset"><icon_dataset /></Icon>
+                  <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                 </el-icon>
                 <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
                   node.label
@@ -287,7 +287,9 @@ const queryAnswer = (event?: KeyboardEvent) => {
           <div :class="['field-d', { open: expandedD }]">
             <div :class="['title', { expanded: expandedD }]" @click="expandedD = !expandedD">
               <ElIcon class="expand">
-                <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+                <Icon name="icon_expand-right_filled"
+                  ><icon_expandRight_filled class="svg-icon"
+                /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.dimension') }}
             </div>
@@ -310,7 +312,9 @@ const queryAnswer = (event?: KeyboardEvent) => {
           <div :class="['field-q', { open: expandedQ }]">
             <div :class="['title', { expanded: expandedQ }]" @click="expandedQ = !expandedQ">
               <ElIcon class="expand">
-                <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+                <Icon name="icon_expand-right_filled"
+                  ><icon_expandRight_filled class="svg-icon"
+                /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.quota') }}
             </div>
diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index 0afd94bda7..daabc82d88 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@@ -300,7 +300,7 @@ defineExpose({
         <empty-background description="暂无仪表板" img-type="none">
           <el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
             <template #icon>
-              <Icon name="icon_add_outlined" ><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ $t('commons.create') }}{{ $t('chart.dashboard') }}
           </el-button>
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 0220b7830e..590762320e 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -217,7 +217,7 @@ const save = () => {
     <div class="top-bar">
       <div class="mobile-to-pc">
         <el-icon @click="handleBack">
-          <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
         </el-icon>
         {{ dvInfo.name }}
       </div>
@@ -227,7 +227,7 @@ const save = () => {
         <span class="open-mobile-line"></span>
         <el-tooltip :offset="14" effect="dark" content="切换至PC端布局" placement="bottom">
           <el-icon @click="handleBack" class="switch-pc">
-            <Icon name="icon_pc_outlined" ><icon_pc_outlined /></Icon>
+            <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
           </el-icon>
         </el-tooltip>
         <el-button type="primary" @click="save">保存</el-button>
@@ -239,7 +239,7 @@ const save = () => {
       </div>
       <div class="config-panel-title">
         <el-icon>
-          <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
         </el-icon>
         {{ dvInfo.name }}
       </div>
diff --git a/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue b/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
index b8dc343452..bb4229b321 100644
--- a/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
@@ -188,8 +188,12 @@ onBeforeMount(() => {
             </span>
             <span>
               <span class="tree-select-field">
-                <Icon class-name="view-type-icon" style="margin-right: 4px"
-                  ><component :is="getIconName(data)"></component
+                <Icon class-name="view-type-icon"
+                  ><component
+                    class="svg-icon view-type-icon"
+                    style="margin-right: 4px"
+                    :is="getIconName(data)"
+                  ></component
                 ></Icon>
                 {{ data.label }}
               </span>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index 0c134befac..fa04f513f8 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@@ -122,7 +122,7 @@ const initOpenHandler = newWindow => {
       <el-popover show-arrow :offset="8" placement="bottom" width="400" trigger="hover">
         <template #reference>
           <el-icon class="info-tips"
-            ><Icon name="dv-info"><dvInfoSvg /></Icon
+            ><Icon name="dv-info"><dvInfoSvg class="svg-icon" /></Icon
           ></el-icon>
         </template>
         <dv-detail-info></dv-detail-info>
@@ -135,13 +135,13 @@ const initOpenHandler = newWindow => {
         @click="() => useEmitt().emitter.emit('canvasFullscreen')"
       >
         <template #icon>
-          <icon name="icon_pc_fullscreen"><icon_pc_fullscreen /></icon>
+          <icon name="icon_pc_fullscreen"><icon_pc_fullscreen class="svg-icon" /></icon>
         </template>
         全屏</el-button
       >
       <el-button secondary @click="preview()">
         <template #icon>
-          <icon name="icon_pc_outlined"><icon_pc_outlined /></icon>
+          <icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></icon>
         </template>
         预览</el-button
       >
@@ -152,13 +152,13 @@ const initOpenHandler = newWindow => {
       />
       <el-button class="custom-button" v-if="dvInfo.weight > 6" type="primary" @click="dvEdit()">
         <template #icon>
-          <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+          <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
         </template>
         编辑</el-button
       >
       <el-dropdown trigger="click">
         <el-icon class="head-more-icon">
-          <Icon name="dv-head-more"><dvHeadMore /></Icon>
+          <Icon name="dv-head-more"><dvHeadMore class="svg-icon" /></Icon>
         </el-icon>
         <template #dropdown>
           <el-dropdown-menu style="width: 130px">
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index ae6ceec0cb..60ceee652b 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
@@ -299,7 +299,7 @@ onBeforeMount(() => {
         <empty-background description="暂无数据大屏" img-type="none">
           <el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
             <template #icon>
-              <Icon name="icon_add_outlined" ><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ $t('commons.create') }}数据大屏
           </el-button>
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index a47e3aefd3..0fffda6186 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -435,7 +435,7 @@ eventBus.on('handleNew', handleNew)
       <main id="dv-main-center" class="center" ref="canvasCenterRef">
         <div class="de-ruler-icon-outer">
           <el-icon class="de-ruler-icon">
-            <Icon name="dv-ruler" ><dvRuler /></Icon>
+            <Icon name="dv-ruler"><dvRuler class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <de-ruler ref="deWRulerRef"></de-ruler>
diff --git a/core/core-frontend/src/views/login/index.vue b/core/core-frontend/src/views/login/index.vue
index 150862b4a5..2ba4b36101 100644
--- a/core/core-frontend/src/views/login/index.vue
+++ b/core/core-frontend/src/views/login/index.vue
@@ -311,7 +311,9 @@ onMounted(async () => {
                 v-if="!loginLogoUrl && axiosFinished"
                 className="login-logo-icon"
                 name="DataEase"
-              ><DataEase /></Icon>
+              >
+                <DataEase class="login-logo-icon" />
+              </Icon>
               <img v-if="loginLogoUrl && axiosFinished" :src="loginLogoUrl" alt="" />
             </div>
             <div class="login-welcome">
diff --git a/core/core-frontend/src/views/mobile/components/DashboardCell.vue b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
index 0545df8519..df0b9b9ec2 100644
--- a/core/core-frontend/src/views/mobile/components/DashboardCell.vue
+++ b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
@@ -33,7 +33,7 @@ const handleClick = () => {
     </div>
     <div class="switch" v-if="nextlevel">
       <el-icon>
-        <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+        <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
   </div>
diff --git a/core/core-frontend/src/views/mobile/components/OrgCell.vue b/core/core-frontend/src/views/mobile/components/OrgCell.vue
index c1b0d11540..303a35ffe2 100644
--- a/core/core-frontend/src/views/mobile/components/OrgCell.vue
+++ b/core/core-frontend/src/views/mobile/components/OrgCell.vue
@@ -48,7 +48,7 @@ const handleRightClick = () => {
         {{ tips }}
       </div>
       <el-icon>
-        <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+        <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
     <div class="left-area" @click="handleLeftClick"></div>
diff --git a/core/core-frontend/src/views/mobile/components/Workbranch.vue b/core/core-frontend/src/views/mobile/components/Workbranch.vue
index 6ac64622f0..59741dd75f 100644
--- a/core/core-frontend/src/views/mobile/components/Workbranch.vue
+++ b/core/core-frontend/src/views/mobile/components/Workbranch.vue
@@ -20,7 +20,7 @@ const handleClick = () => {
 <template>
   <div class="workbranch-cell" @click="handleClick">
     <el-icon>
-      <Icon name="icon_dashboard"><icon_dashboard /></Icon>
+      <Icon name="icon_dashboard"><icon_dashboard class="svg-icon" /></Icon>
     </el-icon>
     <div class="label">
       <div class="text ellipsis">
diff --git a/core/core-frontend/src/views/mobile/directory/index.vue b/core/core-frontend/src/views/mobile/directory/index.vue
index 5a41ef3a69..24b070bac8 100644
--- a/core/core-frontend/src/views/mobile/directory/index.vue
+++ b/core/core-frontend/src/views/mobile/directory/index.vue
@@ -210,7 +210,7 @@ onMounted(() => {
         <div @click="onClickPanel" key="仪表板">
           <span class="label primary-name">仪表板</span>
           <el-icon>
-            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <div v-for="(ele, index) in [...directName]" @click="handleDir(index)" :key="ele">
@@ -218,7 +218,7 @@ onMounted(() => {
             ele
           }}</span>
           <el-icon v-if="index !== directName.length - 1">
-            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
       </div>
@@ -233,17 +233,19 @@ onMounted(() => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
         <el-dropdown @command="sortTypeChange" trigger="click">
           <el-icon class="filter-icon-span">
             <Icon v-if="curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
-              ><dvSortAsc
+              ><dvSortAsc class="svg-icon opt-icon"
             /></Icon>
-            <Icon v-show="curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
-              ><dvSortDesc
+            <Icon v-if="curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dvSortDesc class="svg-icon opt-icon"
             /></Icon>
           </el-icon>
           <template #dropdown>
diff --git a/core/core-frontend/src/views/mobile/login/index.vue b/core/core-frontend/src/views/mobile/login/index.vue
index ae85d6f890..a5e21e9c98 100644
--- a/core/core-frontend/src/views/mobile/login/index.vue
+++ b/core/core-frontend/src/views/mobile/login/index.vue
@@ -152,8 +152,12 @@ const usernameEndValidate = ({ status, message }) => {
           >
             <template #right-icon>
               <el-icon>
-                <Icon v-if="visible" name="icon_invisible_outlined"><icon_invisible_outlined /></Icon>
-                <Icon v-else name="icon_visible_outlined"><icon_visible_outlined /></Icon>
+                <Icon v-if="visible" name="icon_invisible_outlined"
+                  ><icon_invisible_outlined class="svg-icon"
+                /></Icon>
+                <Icon v-else name="icon_visible_outlined"
+                  ><icon_visible_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </van-field>
diff --git a/core/core-frontend/src/views/mobile/personal/index.vue b/core/core-frontend/src/views/mobile/personal/index.vue
index baa9116428..120fbc9171 100644
--- a/core/core-frontend/src/views/mobile/personal/index.vue
+++ b/core/core-frontend/src/views/mobile/personal/index.vue
@@ -188,7 +188,7 @@ const activeTableData = computed(() => {
         <div @click="clearOrg" class="flex-align-center">
           <span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
           <el-icon v-if="!!directName.length">
-            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <div
@@ -199,7 +199,7 @@ const activeTableData = computed(() => {
         >
           <span class="ellipsis" :class="ele !== activeDirectName && 'active'">{{ ele }}</span>
           <el-icon v-if="directName.length > 1 && index !== directName.length - 1">
-            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
           </el-icon>
         </div>
       </div>
diff --git a/core/core-frontend/src/views/share/share/ShareGrid.vue b/core/core-frontend/src/views/share/share/ShareGrid.vue
index 75c5554d97..985fb34e23 100644
--- a/core/core-frontend/src/views/share/share/ShareGrid.vue
+++ b/core/core-frontend/src/views/share/share/ShareGrid.vue
@@ -176,7 +176,9 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+            <Icon name="icon_search-outline_outlined"
+              ><icon_searchOutline_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -196,7 +198,9 @@ watch(
         <template v-slot:default="scope">
           <div class="name-content">
             <el-icon style="margin-right: 12px; font-size: 18px" v-if="scope.row.extFlag">
-              <Icon name="dv-dashboard-spine-mobile"><dvDashboardSpineMobile /></Icon>
+              <Icon name="dv-dashboard-spine-mobile"
+                ><dvDashboardSpineMobile class="svg-icon"
+              /></Icon>
             </el-icon>
             <el-icon v-else :class="`main-color color-${scope.row.type}`">
               <Icon><component :is="iconMap[scope.row.type]"></component></Icon>
@@ -228,7 +232,7 @@ watch(
         <template #default="scope">
           <el-tooltip effect="dark" content="新页面预览" placement="top">
             <el-icon class="hover-icon hover-icon-in-table" @click="preview(scope.row.resourceId)">
-              <Icon name="icon_pc_outlined"><icon_pc_outlined /></Icon>
+              <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
           <ShareHandler
diff --git a/core/core-frontend/src/views/share/share/ShareHandler.vue b/core/core-frontend/src/views/share/share/ShareHandler.vue
index adedcaf2a7..25b9cce3d2 100644
--- a/core/core-frontend/src/views/share/share/ShareHandler.vue
+++ b/core/core-frontend/src/views/share/share/ShareHandler.vue
@@ -6,7 +6,7 @@
     placement="top"
   >
     <el-icon class="hover-icon hover-icon-in-table share-button-icon" @click.stop="share">
-      <Icon name="icon_share-label_outlined"><icon_shareLabel_outlined /></Icon>
+      <Icon name="icon_share-label_outlined"><icon_shareLabel_outlined class="svg-icon" /></Icon>
     </el-icon>
   </el-tooltip>
   <el-button v-if="props.weight >= 7 && props.isButton" @click.stop="share" icon="Share">{{
@@ -49,7 +49,7 @@
           <el-button v-if="linkCustom" text @click="finishEditUuid">完成</el-button>
           <el-button v-else @click="editUuid" size="default" plain>
             <template #icon>
-              <icon name="icon_admin_outlined"><icon_admin_outlined /></icon>
+              <icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
             </template>
           </el-button>
         </div>
@@ -141,6 +141,7 @@
 </template>
 
 <script lang="ts" setup>
+import dvShare from '@/assets/svg/dv-share.svg'
 import icon_shareLabel_outlined from '@/assets/svg/icon_share-label_outlined.svg'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -495,7 +496,7 @@ onMounted(() => {
     const commandInfo = {
       label: '分享',
       command: 'share',
-      svgName: 'dv-share'
+      svgName: dvShare
     }
     emits('loaded', commandInfo)
   }
diff --git a/core/core-frontend/src/views/share/share/ShareTicket.vue b/core/core-frontend/src/views/share/share/ShareTicket.vue
index 0b7307462c..99ce2638f1 100644
--- a/core/core-frontend/src/views/share/share/ShareTicket.vue
+++ b/core/core-frontend/src/views/share/share/ShareTicket.vue
@@ -5,7 +5,9 @@
         <el-tooltip class="item" effect="dark" :content="$t('link_ticket.back')" placement="top">
           <span class="back-tips">
             <el-icon class="custom-el-icon back-icon" @click.stop="close">
-              <Icon class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
+              <Icon class="toolbar-icon" name="icon_left_outlined"
+                ><icon_left_outlined class="svg-icon toolbar-icon"
+              /></Icon>
             </el-icon>
           </span>
         </el-tooltip>
@@ -22,7 +24,7 @@
     <div class="ticket-add">
       <el-button @click.stop="addRow" text>
         <template #icon>
-          <icon name="icon_add_outlined"><icon_add_outlined /></icon>
+          <icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></icon>
         </template>
         {{ t('commons.create') }}
       </el-button>
@@ -36,7 +38,7 @@
               <el-tooltip class="item" effect="dark" :content="$t('commons.copy')" placement="top">
                 <el-button text @click.stop="copyTicket(scope.row.ticket)">
                   <template #icon>
-                    <Icon name="de-copy"><deCopy /></Icon>
+                    <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -48,7 +50,9 @@
               >
                 <el-button text @click.stop="refreshTicket(scope.row)">
                   <template #icon>
-                    <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
+                    <Icon name="icon_refresh_outlined"
+                      ><icon_refresh_outlined class="svg-icon"
+                    /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -66,7 +70,7 @@
                 :content="$t('link_ticket.time_tips')"
                 placement="top"
               >
-                <Icon name="dv-info"><dvInfo /></Icon>
+                <Icon name="dv-info"><dvInfo class="svg-icon" /></Icon>
               </el-tooltip>
             </div>
           </template>
@@ -116,7 +120,9 @@
               >
                 <el-button text @click.stop="deleteTicket(scope.row, scope.$index)">
                   <template #icon>
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -128,12 +134,12 @@
               >
                 <el-button v-if="!scope.row.isEdit" text @click.stop="editRow(scope.row)">
                   <template #icon>
-                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </template>
                 </el-button>
                 <el-button v-else text @click.stop="saveRow(scope.row, scope.$index)">
                   <template #icon>
-                    <Icon name="edit-done"><editDone /></Icon>
+                    <Icon name="edit-done"><editDone class="svg-icon" /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
diff --git a/core/core-frontend/src/views/share/share/ShareVisualHead.vue b/core/core-frontend/src/views/share/share/ShareVisualHead.vue
index 2497c18c0a..75c94b6d03 100644
--- a/core/core-frontend/src/views/share/share/ShareVisualHead.vue
+++ b/core/core-frontend/src/views/share/share/ShareVisualHead.vue
@@ -16,7 +16,9 @@
         v-click-outside="clickOutPopover"
       >
         <template #icon>
-          <icon name="icon_share-label_outlined"><icon_shareLabel_outlined /></icon>
+          <icon name="icon_share-label_outlined"
+            ><icon_shareLabel_outlined class="svg-icon"
+          /></icon>
         </template>
         {{ t('visualization.share') }}
       </el-button>
@@ -43,7 +45,7 @@
         <el-button v-if="linkCustom" text @click.stop="finishEditUuid">完成</el-button>
         <el-button v-else @click.stop="editUuid" size="default" plain>
           <template #icon>
-            <icon name="icon_admin_outlined"><icon_admin_outlined /></icon>
+            <icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
           </template>
         </el-button>
       </div>
diff --git a/core/core-frontend/src/views/system/common/InfoTemplate.vue b/core/core-frontend/src/views/system/common/InfoTemplate.vue
index 4410e15f70..9ec94e7df1 100644
--- a/core/core-frontend/src/views/system/common/InfoTemplate.vue
+++ b/core/core-frontend/src/views/system/common/InfoTemplate.vue
@@ -23,7 +23,7 @@
             placement="top"
           >
             <el-icon class="info-tips"
-              ><Icon name="dv-info"><dvInfo /></Icon
+              ><Icon name="dv-info"><dvInfo class="svg-icon" /></Icon
             ></el-icon>
           </el-tooltip>
         </div>
@@ -41,7 +41,7 @@
             >
               <el-button text @click="copyVal(item.pval)" class="setting-tip-btn">
                 <template #icon>
-                  <Icon name="de-copy"><deCopy /></Icon>
+                  <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -73,7 +73,7 @@
             >
               <el-button text @click="copyVal(item.pval)" class="setting-tip-btn">
                 <template #icon>
-                  <Icon name="de-copy"><deCopy /></Icon>
+                  <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/system/font/FontInfo.vue b/core/core-frontend/src/views/system/font/FontInfo.vue
index a2bbdcb0ae..ce2c7e2e62 100644
--- a/core/core-frontend/src/views/system/font/FontInfo.vue
+++ b/core/core-frontend/src/views/system/font/FontInfo.vue
@@ -21,14 +21,14 @@ const del = () => {
 <template>
   <div class="font-info">
     <el-icon class="font">
-      <Icon><icon_file_font_colorful /></Icon>
+      <Icon><icon_file_font_colorful class="svg-icon" /></Icon>
     </el-icon>
     <div class="info">
       <p class="name ellipsis">{{ name || '-' }}</p>
       <p class="size ellipsis">{{ size || '-' }}</p>
     </div>
     <el-icon @click="del" class="delete">
-      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined class="svg-icon" /></Icon>
     </el-icon>
   </div>
 </template>
diff --git a/core/core-frontend/src/views/system/font/UploadDetail.vue b/core/core-frontend/src/views/system/font/UploadDetail.vue
index 8d0772af4f..bc82af6a20 100644
--- a/core/core-frontend/src/views/system/font/UploadDetail.vue
+++ b/core/core-frontend/src/views/system/font/UploadDetail.vue
@@ -156,7 +156,7 @@ const confirm = () => {
           <template #trigger>
             <el-button secondary>
               <template #icon>
-                <Icon name="icon_upload_outlined"><icon_upload_outlined /></Icon>
+                <Icon name="icon_upload_outlined"><icon_upload_outlined class="svg-icon" /></Icon>
               </template>
               上传字库文件
             </el-button>
diff --git a/core/core-frontend/src/views/system/font/index.vue b/core/core-frontend/src/views/system/font/index.vue
index eeca912eeb..a889125420 100644
--- a/core/core-frontend/src/views/system/font/index.vue
+++ b/core/core-frontend/src/views/system/font/index.vue
@@ -120,14 +120,16 @@ onMounted(() => {
         <el-input v-model="fontKeyword" clearable style="width: 240px" placeholder="搜索字体名称">
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
 
         <el-button type="primary" @click="uploadFont('新建字体', 'create', {})">
           <template #icon>
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </template>
           添加字体
         </el-button>
diff --git a/core/core-frontend/src/views/system/parameter/map/Geometry.vue b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
index 9b1b41d43c..a7fc1b1482 100644
--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@@ -5,7 +5,7 @@
         <span>{{ t('online_map.geometry') }}</span>
         <span class="add-icon-span" @click="add()">
           <el-icon>
-            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </el-icon>
         </span>
       </div>
@@ -19,7 +19,9 @@
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -53,7 +55,9 @@
                     placement="top"
                   >
                     <el-icon @click.stop="delHandler(data)" class="hover-icon">
-                      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </span>
diff --git a/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue b/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
index 516a196b0f..2e4a6962f9 100644
--- a/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
@@ -224,7 +224,9 @@ defineExpose({
           <span class="area-code-label">
             <span>区域代码</span>
             <el-tooltip effect="dark" :content="codeTips" placement="top">
-              <el-icon class="info-tips"><Icon name="dv-info"><dvInfo /></Icon></el-icon>
+              <el-icon class="info-tips"
+                ><Icon name="dv-info"><dvInfo class="svg-icon" /></Icon
+              ></el-icon>
             </el-tooltip>
           </span>
         </template>
@@ -268,12 +270,12 @@ defineExpose({
           >
             <template #suffix>
               <el-icon>
-                <Icon name="icon_upload_outlined" ><icon_upload_outlined /></Icon>
+                <Icon name="icon_upload_outlined"><icon_upload_outlined class="svg-icon" /></Icon>
               </el-icon>
             </template>
             <template #prefix>
               <el-icon v-if="!!state.form.fileName">
-                <Icon name="de-json" ><deJson /></Icon>
+                <Icon name="de-json"><deJson class="svg-icon" /></Icon>
               </el-icon>
             </template>
           </el-input>
diff --git a/core/core-frontend/src/views/template-market/component/MarketPreview.vue b/core/core-frontend/src/views/template-market/component/MarketPreview.vue
index f190c0c1af..df8522450c 100644
--- a/core/core-frontend/src/views/template-market/component/MarketPreview.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreview.vue
@@ -56,7 +56,9 @@
           />
           <el-row v-show="!state.hasResult" class="custom-position">
             <div style="text-align: center">
-              <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
+              <Icon name="no_result"
+                ><no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon"
+              /></Icon>
               <br />
               <span>{{ t('commons.no_result') }}</span>
             </div>
diff --git a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
index d1e50dc4df..4cd60ab008 100644
--- a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
@@ -4,7 +4,7 @@
       <el-col style="float: left" :class="state.asideActive ? 'aside-active' : 'aside-inActive'">
         <el-tooltip class="box-item" effect="dark" content="展开" placement="right">
           <el-icon v-show="!state.asideActive" class="insert" @click="asideActiveChange(true)">
-            <Icon name="market-expand"><marketExpand /></Icon>
+            <Icon name="market-expand"><marketExpand class="svg-icon" /></Icon>
           </el-icon>
         </el-tooltip>
         <el-row v-show="state.asideActive" style="padding: 24px 12px 0">
@@ -15,7 +15,7 @@
             <el-tooltip class="box-item" effect="dark" content="收起" placement="right">
               <div @click="asideActiveChange(false)" class="insert-retract">
                 <el-icon>
-                  <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
+                  <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -89,7 +89,9 @@
           </el-collapse>
           <el-row v-show="!state.hasResult" class="custom-position">
             <div style="text-align: center">
-              <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
+              <Icon name="no_result"
+                ><no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon"
+              /></Icon>
               <br />
               <span>没有找到相关模板</span>
             </div>
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index d1d841834b..d024ce8b83 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -154,7 +154,9 @@
         </div>
         <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
           <div style="text-align: center">
-            <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
+            <Icon name="no_result"
+              ><no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon"
+            /></Icon>
             <br />
             <span>没有找到相关模板</span>
           </div>
diff --git a/core/core-frontend/src/views/template/index.vue b/core/core-frontend/src/views/template/index.vue
index 0e79eefacf..6846486a8b 100644
--- a/core/core-frontend/src/views/template/index.vue
+++ b/core/core-frontend/src/views/template/index.vue
@@ -18,7 +18,7 @@
     >
       <template #prefix>
         <el-icon>
-          <Icon name="de-search" ><deSearch /></Icon>
+          <Icon name="de-search"><deSearch class="svg-icon" /></Icon>
         </el-icon>
       </template>
     </el-input>
@@ -56,7 +56,9 @@
                 v-if="!state.currentTemplateShowList.length && !state.templateFilterText"
                 class="custom-position"
               >
-                <Icon style="width: 125px; height: 125px" name="dv-empty" ><dvEmpty /></Icon>
+                <Icon name="dv-empty"
+                  ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
+                /></Icon>
                 <span style="margin-top: 8px; font-size: 14px"> 暂无模板 </span>
               </el-row>
 
@@ -65,7 +67,9 @@
                 v-if="!currentTemplateShowListComputed.length && state.templateFilterText"
                 class="custom-position"
               >
-                <Icon style="width: 125px; height: 125px" name="dv-nothing" ><dvNothing /></Icon>
+                <Icon name="dv-nothing"
+                  ><dvNothing style="width: 125px; height: 125px" class="svg-icon"
+                /></Icon>
                 <span style="margin-top: 8px; font-size: 14px"> 没有找到相关模板 </span>
               </el-row>
 
@@ -97,7 +101,9 @@
     </div>
     <div class="container-sys-param" v-show="!state.templateCategories.length">
       <el-row style="height: 100%" class="custom-position">
-        <Icon style="width: 125px; height: 125px" name="dv-empty" ><dvEmpty /></Icon>
+        <Icon name="dv-empty"
+          ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
+        /></Icon>
         <span style="margin-top: 8px; font-size: 14px">
           <el-button
             style="float: right"
diff --git a/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue b/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
index e809792579..62753703c6 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
@@ -399,7 +399,7 @@ defineExpose({
       @click="downLoadAll"
     >
       <template #icon>
-        <Icon name="dv-preview-download"><dvPreviewDownload /></Icon>
+        <Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
       </template>
       {{ $t('data_export.download_all') }}
     </el-button>
@@ -409,15 +409,19 @@ defineExpose({
       @click="downLoadAll"
     >
       <template #icon>
-        <Icon name="dv-preview-download" ><dvPreviewDownload /></Icon>
+        <Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
       </template>
       {{ $t('data_export.download') }}
     </el-button>
     <el-button v-if="multipleSelection.length === 0" secondary @click="delAll"
-      ><template #icon> <Icon name="de-delete"><deDelete /></Icon> </template>{{ $t('data_export.del_all') }}
+      ><template #icon>
+        <Icon name="de-delete"><deDelete class="svg-icon" /></Icon> </template
+      >{{ $t('data_export.del_all') }}
     </el-button>
     <el-button v-if="multipleSelection.length !== 0" secondary @click="delAll"
-      ><template #icon> <Icon name="de-delete"><deDelete /></Icon> </template>{{ $t('commons.delete') }}
+      ><template #icon>
+        <Icon name="de-delete"><deDelete class="svg-icon" /></Icon> </template
+      >{{ $t('commons.delete') }}
     </el-button>
     <div class="table-container" :class="!tableData.length && 'hidden-bottom'">
       <el-table
@@ -432,7 +436,9 @@ defineExpose({
           <template #default="scope">
             <div class="name-excel">
               <el-icon style="font-size: 24px">
-                <Icon name="icon_file-excel_colorful"><icon_fileExcel_colorful /></Icon>
+                <Icon name="icon_file-excel_colorful"
+                  ><icon_fileExcel_colorful class="svg-icon"
+                /></Icon>
               </el-icon>
               <div class="name-content">
                 <div class="fileName">{{ scope.row.fileName }}</div>
@@ -483,7 +489,7 @@ defineExpose({
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="dv-preview-download"><dvPreviewDownload /></Icon>
+                    <Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
                   </el-icon>
                 </template>
               </el-button>
@@ -492,7 +498,9 @@ defineExpose({
             <el-tooltip effect="dark" :content="t('data_set.re_export')" placement="top">
               <el-button v-if="scope.row.exportStatus === 'FAILED'" text @click="retry(scope.row)">
                 <template #icon>
-                  <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
+                  <Icon name="icon_refresh_outlined"
+                    ><icon_refresh_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -500,7 +508,7 @@ defineExpose({
             <el-tooltip effect="dark" :content="t('data_set.delete')" placement="top">
               <el-button text @click="deleteField(scope.row)">
                 <template #icon>
-                  <Icon name="de-delete"><deDelete /></Icon>
+                  <Icon name="de-delete"><deDelete class="svg-icon" /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/AuthTree.vue b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/AuthTree.vue
index 02f42fcc1b..53b1fb6fba 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/AuthTree.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/AuthTree.vue
@@ -91,7 +91,7 @@ const del = (index, child) => {
           <span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir">
             {{ logic === 'or' ? 'OR' : 'AND' }}
             <el-icon>
-              <Icon name="icon_down_outlined"><icon_down_outlined /></Icon>
+              <Icon name="icon_down_outlined"><icon_down_outlined class="svg-icon" /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -104,7 +104,9 @@ const del = (index, child) => {
       </div>
       <span class="operate-icon" v-if="x">
         <el-icon @click="emits('removeRelationList')">
-          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+          <Icon name="icon_delete-trash_outlined"
+            ><icon_deleteTrash_outlined class="svg-icon"
+          /></Icon>
         </el-icon>
       </span>
     </div>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
index b7b753f4c8..a9bf861fd6 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
@@ -274,7 +274,9 @@ const emits = defineEmits(['update:item', 'del'])
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                  <Icon name="icon_search-outline_outlined"
+                    ><icon_searchOutline_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -288,8 +290,12 @@ const emits = defineEmits(['update:item', 'del'])
                 v-for="ele in dimensions"
               >
                 <el-icon>
-                  <Icon :className="`field-icon-${fieldEnums[ele.deType]}`"
-                    ><component :is="iconFieldMap[fieldEnums[ele.deType]]"></component
+                  <Icon
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldEnums[ele.deType]}`"
+                      :is="iconFieldMap[fieldEnums[ele.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -442,7 +448,9 @@ const emits = defineEmits(['update:item', 'del'])
                     <label>{{ i }}</label>
                   </el-tooltip>
                   <el-icon @click="delChecks(idx)" style="opacity: 1">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -453,7 +461,9 @@ const emits = defineEmits(['update:item', 'del'])
                 </div>
                 <div class="footer-right">
                   <el-icon @click="clearAll">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -462,7 +472,9 @@ const emits = defineEmits(['update:item', 'del'])
         </el-popover>
       </div>
       <el-icon v-if="showDel" class="font12" @click="emits('del')">
-        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+        <Icon name="icon_delete-trash_outlined"
+          ><icon_deleteTrash_outlined class="svg-icon"
+        /></Icon>
       </el-icon>
     </div>
   </div>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 4fc3674420..98810cfa09 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -1,6 +1,6 @@
 <script lang="tsx" setup>
 import referencePlay from '@/assets/svg/reference-play.svg'
-import referenceSetting from '@/assets/svg/reference-setting.svg'
+import referenceSetting1 from '@/assets/svg/reference-setting.svg'
 import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
@@ -106,7 +106,10 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
           <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {iconFieldMap[fieldType[column.deType]]}
+            {{
+              ...iconFieldMap[fieldType[column.deType]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
@@ -424,7 +427,7 @@ const mousedownDrag = () => {
       <el-button @click="getSQLPreview" text style="color: #1f2329">
         <template #icon>
           <el-icon>
-            <Icon name="reference-play"><referencePlay /></Icon>
+            <Icon name="reference-play"><referencePlay class="svg-icon" /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.run') }}
@@ -432,7 +435,7 @@ const mousedownDrag = () => {
       <el-button @click="referenceSetting()" style="color: #1f2329" text>
         <template #icon>
           <el-icon>
-            <Icon name="reference-setting"><referenceSetting /></Icon>
+            <Icon name="reference-setting"><referenceSetting1 class="svg-icon" /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.parameter_settings') }}
@@ -442,7 +445,7 @@ const mousedownDrag = () => {
       >
       <el-divider direction="vertical" />
       <el-icon class="hover-icon" @click="handleClose">
-        <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
+        <Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
   </div>
@@ -450,7 +453,7 @@ const mousedownDrag = () => {
   <div class="sql-eidtor" @mouseup="mouseupDrag">
     <p v-show="!showLeft" class="arrow-right" @click="handleShowLeft">
       <el-icon>
-        <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+        <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
       </el-icon>
     </p>
     <div
@@ -470,7 +473,7 @@ const mousedownDrag = () => {
           {{ t('data_set.current_data_source') }}
           <span class="left-outlined">
             <el-icon style="color: #1f2329" @click="showLeft = false">
-              <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+              <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
             </el-icon>
           </span>
         </p>
@@ -490,7 +493,7 @@ const mousedownDrag = () => {
           {{ t('datasource.data_table')
           }}<span class="num">
             <el-icon class="icon-color">
-              <Icon name="reference-table"><referenceTable /></Icon>
+              <Icon name="reference-table"><referenceTable class="svg-icon" /></Icon>
             </el-icon>
             {{ datasourceTableData.length }}
           </span>
@@ -503,7 +506,9 @@ const mousedownDrag = () => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -536,7 +541,7 @@ const mousedownDrag = () => {
               @click="setActiveName(datasourceTableData[index])"
             >
               <el-icon class="icon-color">
-                <Icon name="icon_form_outlined"><icon_form_outlined /></Icon>
+                <Icon name="icon_form_outlined"><icon_form_outlined class="svg-icon" /></Icon>
               </el-icon>
               <span class="label">{{ datasourceTableData[index].tableName }}</span>
               <span class="name-copy">
@@ -545,7 +550,7 @@ const mousedownDrag = () => {
                     class="hover-icon"
                     @click="copyInfo(datasourceTableData[index].tableName)"
                   >
-                    <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
+                    <Icon name="icon_copy_outlined"><icon_copy_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </el-tooltip>
 
@@ -559,7 +564,7 @@ const mousedownDrag = () => {
                 >
                   <template #reference>
                     <el-icon class="hover-icon">
-                      <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                      <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                     </el-icon>
                   </template>
                   <div class="table-filed" v-loading="gridDataLoading">
@@ -577,11 +582,15 @@ const mousedownDrag = () => {
                           )
                         "
                       >
-                        <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
+                        <Icon name="icon_copy_outlined"
+                          ><icon_copy_outlined class="svg-icon"
+                        /></Icon>
                       </el-icon>
                       <div class="num flex-align-center">
                         <el-icon>
-                          <Icon name="icon_text-box_outlined"><icon_textBox_outlined /></Icon>
+                          <Icon name="icon_text-box_outlined"
+                            ><icon_textBox_outlined class="svg-icon"
+                          /></Icon>
                         </el-icon>
                         {{ gridData.length }}
                       </div>
@@ -597,8 +606,10 @@ const mousedownDrag = () => {
                           <template #default="scope">
                             <div class="flex-align-center icon">
                               <el-icon>
-                                <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
+                                <Icon
                                   ><component
+                                    class="svg-icon"
+                                    :class="`field-icon-${fieldType[scope.row.deType]}`"
                                     :is="iconFieldMap[fieldType[scope.row.deType]]"
                                   ></component
                                 ></Icon>
@@ -618,7 +629,9 @@ const mousedownDrag = () => {
                               class="hover-icon de-hover-icon-primary"
                               @click.stop="copyInfo(scope.row.originName)"
                             >
-                              <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
+                              <Icon name="icon_copy_outlined"
+                                ><icon_copy_outlined class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </template>
                         </el-table-column>
@@ -674,7 +687,9 @@ const mousedownDrag = () => {
               <div class="sql-tips flex-align-center">
                 {{ t('data_set.click_above') }}
                 <el-icon>
-                  <icon name="icon_play-round_outlined"><icon_playRound_outlined /></icon>
+                  <icon name="icon_play-round_outlined"
+                    ><icon_playRound_outlined class="svg-icon"
+                  /></icon>
                 </el-icon>
                 {{ t('data_set.see_the_results') }}
               </div>
@@ -741,7 +756,7 @@ const mousedownDrag = () => {
   >
     <div class="content">
       <el-icon style="font-size: 16px">
-        <Icon name="icon_info_colorful"><icon_info_colorful /></Icon>
+        <Icon name="icon_info_colorful"><icon_info_colorful class="svg-icon" /></Icon>
       </el-icon>
       {{ t('dataset.sql_variable_limit_1') }}<br />
       {{ t('dataset.sql_variable_limit_2') }}<br />
@@ -759,8 +774,12 @@ const mousedownDrag = () => {
           >
             <template v-slot="{ data }">
               <el-icon>
-                <Icon :className="`field-icon-${getIconName(data.value)}`"
-                  ><component :is="iconFieldMap[getIconName(data.value)]"></component
+                <Icon
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${getIconName(data.value)}`"
+                    :is="iconFieldMap[getIconName(data.value)]"
+                  ></component
                 ></Icon>
               </el-icon>
               <span>{{ data.label }}</span>
@@ -768,8 +787,12 @@ const mousedownDrag = () => {
           </el-cascader>
           <span class="select-svg-icon">
             <el-icon>
-              <Icon :className="`field-icon-${getIconName(scope.row.type[0])}`"
-                ><component :is="iconFieldMap[getIconName(scope.row.type[0])]"></component
+              <Icon
+                ><component
+                  class="svg-icon"
+                  :class="`field-icon-${getIconName(scope.row.type[0])}`"
+                  :is="iconFieldMap[getIconName(scope.row.type[0])]"
+                ></component
               ></Icon>
             </el-icon>
           </span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
index bc5cd59d59..eafd2a538a 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
@@ -360,8 +360,12 @@ initFunction()
                 <el-select v-model="fieldForm.deType" style="width: 376px">
                   <template #prefix>
                     <el-icon>
-                      <Icon :className="`field-icon-${fieldType[fieldForm.deType]}`"
-                        ><component :is="iconFieldMap[fieldType[fieldForm.deType]]"></component
+                      <Icon
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[fieldForm.deType]}`"
+                          :is="iconFieldMap[fieldType[fieldForm.deType]]"
+                        ></component
                       ></Icon>
                     </el-icon>
                   </template>
@@ -373,8 +377,12 @@ initFunction()
                   >
                     <span style="display: flex; align-items: center">
                       <el-icon>
-                        <Icon :className="`field-icon-${fieldType[item.value]}`"
-                          ><component :is="iconFieldMap[fieldType[item.value]]"></component
+                        <Icon
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[item.value]}`"
+                            :is="iconFieldMap[fieldType[item.value]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -396,7 +404,7 @@ initFunction()
                 <div>{{ t('dataset.calc_tips.tip2') }}</div>
               </template>
               <el-icon size="16px">
-                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -421,7 +429,7 @@ initFunction()
               {{ t('dataset.calc_tips.tip5') }}
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -429,7 +437,9 @@ initFunction()
           <el-input v-model="searchField" :placeholder="t('dataset.edit_search')" clearable>
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -444,8 +454,12 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon>
-                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  <Icon
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span class="ellipsis" :title="item.name">{{ item.name }}</span>
@@ -465,7 +479,7 @@ initFunction()
                   :class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
                   style="color: #646a73"
                   name="icon_adjustment_outlined"
-                  ><icon_adjustment_outlined
+                  ><icon_adjustment_outlined class="svg-icon"
                 /></Icon>
               </el-icon>
             </el-tooltip>
@@ -479,20 +493,28 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon v-if="!item.groupType">
-                  <Icon name="icon_adjustment_outlined"><icon_adjustment_outlined /></Icon>
+                  <Icon name="icon_adjustment_outlined"
+                    ><icon_adjustment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
                 <el-icon v-else>
-                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  <Icon
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span class="ellipsis" :title="item.name">{{ item.name }}</span>
                 <div v-if="!item.groupType" class="icon-right">
                   <el-icon @click.stop="updateParmasToQuota" class="hover-icon">
-                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                   <el-icon @click.stop="delParmasToQuota" class="hover-icon">
-                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -516,7 +538,7 @@ initFunction()
               <div v-else>{{ t('dataset.calc_tips.tip7') }}</div>
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -529,7 +551,9 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
index af63ca4d85..141dbcd76e 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
@@ -328,7 +328,7 @@ const emits = defineEmits(['finish'])
         >
           <template #default="{ data: { name } }">
             <el-icon>
-              <Icon name="dv-folder"><dvFolder /></Icon>
+              <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -338,7 +338,9 @@ const emits = defineEmits(['finish'])
         <el-input style="margin-bottom: 12px" v-model="filterText" clearable>
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -357,7 +359,7 @@ const emits = defineEmits(['finish'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <span class="node-text" :title="data.name">{{ data.name }}</span>
               </span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
index df9c3cd753..96518a6a8e 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'
 import icon_fullAssociation from '@/assets/svg/icon_full-association.svg'
 import icon_intersect from '@/assets/svg/icon_intersect.svg'
 import icon_leftAssociation from '@/assets/svg/icon_left-association.svg'
@@ -542,12 +546,12 @@ const dfsNodeFieldBackReal = ele => {
 
 const menuList = [
   {
-    svgName: 'icon_text-box_outlined',
+    svgName: icon_textBox_outlined,
     label: t('data_set.field_selection'),
     command: 'editerField'
   },
   {
-    svgName: 'icon_delete-trash_outlined',
+    svgName: icon_deleteTrash_outlined,
     label: t('data_set.delete'),
     command: 'del'
   }
@@ -555,12 +559,12 @@ const menuList = [
 
 const sqlMenu = [
   {
-    svgName: 'icon_edit_outlined',
+    svgName: icon_edit_outlined,
     label: t('data_set.edit_sql'),
     command: 'editerSql'
   },
   {
-    svgName: 'icon_rename_outlined',
+    svgName: icon_rename_outlined,
     label: t('datasource.field_rename'),
     command: 'rename'
   }
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue b/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
index e546501ef4..48ce4bc071 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
@@ -151,7 +151,7 @@ const handleChange = () => {
   >
     <template #reference>
       <el-icon class="menu-more">
-        <Icon name="more_v"><more_v /></Icon>
+        <Icon name="more_v"><more_v class="svg-icon" /></Icon>
       </el-icon>
     </template>
     <ElCascaderPanel
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
index 5e4ecd5ff7..a5269c5c58 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
@@ -93,7 +93,9 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+            <Icon name="icon_search-outline_outlined"
+              ><icon_searchOutline_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -121,8 +123,12 @@ watch(
         <el-table-column :label="t('dataset.origin_name')">
           <template #default="scope">
             <el-icon>
-              <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
-                ><component :is="iconFieldMap[fieldType[scope.row.deType]]"></component
+              <Icon
+                ><component
+                  class="svg-icon"
+                  :class="`field-icon-${fieldType[scope.row.deType]}`"
+                  :is="iconFieldMap[fieldType[scope.row.deType]]"
+                ></component
               ></Icon>
             </el-icon>
             {{ scope.row.originName }}
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
index 8fe1bc37d1..091d6967bf 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
@@ -88,7 +88,7 @@ init()
         <el-button type="primary" class="union-add" @click="addUnion">
           <template #icon>
             <el-icon>
-              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </el-icon>
           </template>
           {{ t('dataset.add_union_field') }}
@@ -119,8 +119,12 @@ init()
                 :value="item"
               >
                 <el-icon>
-                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  <Icon
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -130,7 +134,7 @@ init()
             </el-select>
           </span>
           <el-icon>
-            <Icon name="join-join"><joinJoin /></Icon>
+            <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
           </el-icon>
           <!--右侧孩子field-->
           <span class="column">
@@ -149,8 +153,12 @@ init()
                 :value="item"
               >
                 <el-icon>
-                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  <Icon
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -167,7 +175,9 @@ init()
               @click="removeUnionItem(index)"
             >
               <template #icon>
-                <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                <Icon name="icon_delete-trash_outlined"
+                  ><icon_deleteTrash_outlined class="svg-icon"
+                /></Icon>
               </template>
             </el-button>
           </span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index cdded9692e..34e8375c70 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -622,7 +622,10 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center">
         <ElIcon>
           <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {iconFieldMap[fieldType[column.deType]]}
+            {{
+              ...iconFieldMap[fieldType[column.deType]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px', marginLeft: '4px' }}>
@@ -1357,7 +1360,7 @@ const getDsIconName = data => {
     <div class="top">
       <span class="name">
         <el-icon @click="backToMain">
-          <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+          <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
         </el-icon>
         <template v-if="showInput">
           <el-input
@@ -1386,7 +1389,7 @@ const getDsIconName = data => {
     <div class="container dataset-db" @mouseup="mouseupDrag">
       <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
         <el-icon>
-          <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
+          <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
         </el-icon>
       </p>
       <div
@@ -1407,7 +1410,7 @@ const getDsIconName = data => {
             {{ t('data_set.select_data_source') }}
             <span class="left-outlined">
               <el-icon style="color: #1f2329" @click="showLeft = false">
-                <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
+                <Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </p>
@@ -1429,7 +1432,7 @@ const getDsIconName = data => {
               <div class="flex-align-center icon">
                 <el-icon>
                   <icon :static-content="getDsIcon({ leaf, type })"
-                    ><component :is="getDsIconName({ leaf, type })"></component
+                    ><component class="svg-icon" :is="getDsIconName({ leaf, type })"></component
                   ></icon>
                 </el-icon>
                 <span v-if="!leaf || extraFlag > -1">{{ name }}</span>
@@ -1448,7 +1451,7 @@ const getDsIconName = data => {
             {{ t('datasource.data_table') }}
             <span class="num">
               <el-icon class="icon-color">
-                <Icon name="reference-table"><referenceTable /></Icon>
+                <Icon name="reference-table"><referenceTable class="svg-icon" /></Icon>
               </el-icon>
               {{ datasourceTableData.length }}
             </span>
@@ -1461,7 +1464,9 @@ const getDsIconName = data => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -1484,7 +1489,7 @@ const getDsIconName = data => {
             @click="setActiveName(sqlNode)"
           >
             <el-icon class="icon-color">
-              <Icon name="icon_sql_outlined_1"><icon_sql_outlined_1 /></Icon>
+              <Icon name="icon_sql_outlined_1"><icon_sql_outlined_1 class="svg-icon" /></Icon>
             </el-icon>
             <span class="label">{{ t('data_set.custom_sql') }}</span>
           </div>
@@ -1509,7 +1514,7 @@ const getDsIconName = data => {
                 @click="setActiveName(datasourceTableData[index])"
               >
                 <el-icon class="icon-color">
-                  <Icon name="reference-table"><referenceTable /></Icon>
+                  <Icon name="reference-table"><referenceTable class="svg-icon" /></Icon>
                 </el-icon>
                 <span class="label">{{ datasourceTableData[index].tableName }}</span>
               </div>
@@ -1520,7 +1525,7 @@ const getDsIconName = data => {
       <div class="drag-right" :style="{ width: `calc(100vw - ${showLeft ? LeftWidth : 0}px)` }">
         <div v-if="crossDatasources" class="different-datasource">
           <el-icon>
-            <Icon name="icon_warning_colorful"><icon_warning_colorful /></Icon>
+            <Icon name="icon_warning_colorful"><icon_warning_colorful class="svg-icon" /></Icon>
           </el-icon>
           {{ t('data_set.be_reported_incorrectly') }}
         </div>
@@ -1550,7 +1555,7 @@ const getDsIconName = data => {
               <el-button :disabled="!allfields.length" @click="addCalcField('q')" secondary>
                 <template #icon>
                   <el-icon>
-                    <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+                    <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </template>
                 {{ t('dataset.add_calc_field') }}
@@ -1564,7 +1569,9 @@ const getDsIconName = data => {
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
+                    <Icon name="icon_refresh_outlined"
+                      ><icon_refresh_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </template>
                 {{ t('data_set.refresh_data') }}
@@ -1580,7 +1587,9 @@ const getDsIconName = data => {
               <div :class="['field-d', { open: expandedD }]">
                 <div :class="['title', { expanded: expandedD }]" @click="expandedD = !expandedD">
                   <ElIcon class="expand">
-                    <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+                    <Icon name="icon_expand-right_filled"
+                      ><icon_expandRight_filled class="svg-icon"
+                    /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.dimension') }}
                 </div>
@@ -1611,7 +1620,9 @@ const getDsIconName = data => {
               <div :class="['field-q', { open: expandedQ }]">
                 <div :class="['title', { expanded: expandedQ }]" @click="expandedQ = !expandedQ">
                   <ElIcon class="expand">
-                    <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+                    <Icon name="icon_expand-right_filled"
+                      ><icon_expandRight_filled class="svg-icon"
+                    /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.quota') }}
                 </div>
@@ -1781,6 +1792,7 @@ const getDsIconName = data => {
                             <el-icon>
                               <Icon className="primary-color"
                                 ><component
+                                  class="svg-icon primary-color"
                                   :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
                                 ></component
                               ></Icon>
@@ -1802,7 +1814,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'translate')">
                               <template #icon>
-                                <Icon name="icon_switch_outlined"><icon_switch_outlined /></Icon>
+                                <Icon name="icon_switch_outlined"
+                                  ><icon_switch_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1816,7 +1830,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'copy')">
                               <template #icon>
-                                <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
+                                <Icon name="icon_copy_outlined"
+                                  ><icon_copy_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1827,7 +1843,7 @@ const getDsIconName = data => {
                             <el-button text @click="handleFieldMore(scope.row, 'delete')">
                               <template #icon>
                                 <Icon name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined
+                                  ><icon_deleteTrash_outlined class="svg-icon"
                                 /></Icon>
                               </template>
                             </el-button>
@@ -1842,7 +1858,9 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                                <Icon name="icon_edit_outlined"
+                                  ><icon_edit_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1950,6 +1968,7 @@ const getDsIconName = data => {
                             <el-icon>
                               <Icon className="green-color"
                                 ><component
+                                  class="svg-icon green-color"
                                   :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
                                 ></component
                               ></Icon>
@@ -1971,7 +1990,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'translate')">
                               <template #icon>
-                                <Icon name="icon_switch_outlined"><icon_switch_outlined /></Icon>
+                                <Icon name="icon_switch_outlined"
+                                  ><icon_switch_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1985,7 +2006,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'copy')">
                               <template #icon>
-                                <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
+                                <Icon name="icon_copy_outlined"
+                                  ><icon_copy_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1996,7 +2019,7 @@ const getDsIconName = data => {
                             <el-button text @click="handleFieldMore(scope.row, 'delete')">
                               <template #icon>
                                 <Icon name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined
+                                  ><icon_deleteTrash_outlined class="svg-icon"
                                 /></Icon>
                               </template>
                             </el-button>
@@ -2011,7 +2034,9 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                                <Icon name="icon_edit_outlined"
+                                  ><icon_edit_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -2054,7 +2079,11 @@ const getDsIconName = data => {
                 <span class="select-svg-icon">
                   <el-icon>
                     <Icon :className="`field-icon-${getIconName(deTypeArr[0])}`"
-                      ><component :is="iconFieldMap[getIconName(deTypeArr[0])]"></component
+                      ><component
+                        class="svg-icon"
+                        :class="`field-icon-${getIconName(deTypeArr[0])}`"
+                        :is="iconFieldMap[getIconName(deTypeArr[0])]"
+                      ></component
                     ></Icon>
                   </el-icon>
                 </span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index 300c79429c..ba59f57757 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -1,18 +1,21 @@
 <script lang="tsx" setup>
+import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
+import icon_dataset from '@/assets/svg/icon_dataset.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
+import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
 import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import dvSortAsc from '@/assets/svg/dv-sort-asc.svg'
 import dvSortDesc from '@/assets/svg/dv-sort-desc.svg'
 import dvFolder from '@/assets/svg/dv-folder.svg'
-import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
 import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
 import icon_download_outlined from '@/assets/svg/icon_download_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
   ref,
@@ -24,8 +27,7 @@ import {
   nextTick,
   unref,
   h,
-  provide,
-  inject
+  provide
 } from 'vue'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { useEmbedded } from '@/store/modules/embedded'
@@ -217,7 +219,10 @@ const allFieldsColumns = [
       <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
         <ElIcon style={{ marginRight: '6px' }}>
           <Icon className={`field-icon-${fieldType[deType]}`}>
-            {iconFieldMap[fieldType[deType]]}
+            {{
+              ...iconFieldMap[fieldType[deType]],
+              className: `svg-icon field-icon-${fieldType[deType]}`
+            }}
           </Icon>
         </ElIcon>
         {t(`dataset.${fieldType[deType]}`) +
@@ -254,7 +259,10 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
           <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {iconFieldMap[fieldType[column.deType]]}
+            {{
+              ...iconFieldMap[fieldType[column.deType]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
@@ -603,18 +611,18 @@ const activeName = ref('dataPreview')
 const menuList = [
   {
     label: t('visualization.move_to'),
-    svgName: 'icon_into-item_outlined',
+    svgName: icon_intoItem_outlined,
     command: 'move'
   },
   {
     label: t('visualization.rename'),
-    svgName: 'icon_rename_outlined',
+    svgName: icon_rename_outlined,
     command: 'rename'
   },
   {
     label: t('common.delete'),
     divided: true,
-    svgName: 'icon_delete-trash_outlined',
+    svgName: icon_deleteTrash_outlined,
     command: 'delete'
   }
 ]
@@ -636,13 +644,13 @@ const datasetTypeList = computed(() => {
   return [
     {
       label: t('data_set.a_new_dataset'),
-      svgName: 'icon_dataset',
+      svgName: icon_dataset,
       command: 'dataset'
     },
     {
       label: t('deDataset.new_folder'),
       divided: true,
-      svgName: 'dv-folder',
+      svgName: dvFolder,
       command: 'folder'
     }
   ]
@@ -736,7 +744,7 @@ const getMenuList = (val: boolean) => {
     : [
         {
           label: t('common.copy'),
-          svgName: 'icon_copy_filled',
+          svgName: icon_copy_filled,
           command: 'copy'
         }
       ].concat(menuList)
@@ -779,7 +787,7 @@ const getMenuList = (val: boolean) => {
                   style="margin-right: 20px"
                   @click="handleDatasetTree('folder')"
                 >
-                  <Icon name="dv-new-folder"><dvNewFolder /></Icon>
+                  <Icon name="dv-new-folder"><dvNewFolder class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip
@@ -789,7 +797,9 @@ const getMenuList = (val: boolean) => {
                 placement="top"
               >
                 <el-icon class="custom-icon btn" @click="createDataset">
-                  <Icon name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
+                  <Icon name="icon_file-add_outlined"
+                    ><icon_fileAdd_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -802,7 +812,9 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -810,7 +822,7 @@ const getMenuList = (val: boolean) => {
             <el-icon class="filter-icon-span">
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
                 <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
-                  ><dvSortAsc
+                  ><dvSortAsc class="svg-icon opt-icon"
                 /></Icon>
               </el-tooltip>
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
@@ -818,7 +830,7 @@ const getMenuList = (val: boolean) => {
                   v-show="state.curSortType.includes('desc')"
                   name="dv-sort-desc"
                   class="opt-icon"
-                  ><dvSortDesc
+                  ><dvSortDesc class="svg-icon"
                 /></Icon>
               </el-tooltip>
             </el-icon>
@@ -857,10 +869,10 @@ const getMenuList = (val: boolean) => {
             <template #default="{ node, data }">
               <span class="custom-tree-node">
                 <el-icon v-if="!data.leaf" style="font-size: 18px">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <el-icon v-if="data.leaf" style="font-size: 18px">
-                  <Icon name="icon_dataset"><icon_dataset /></Icon>
+                  <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                 </el-icon>
                 <span :title="node.label" class="label-tooltip ellipsis">{{ node.label }}</span>
                 <div class="icon-more" v-if="data.weight >= 7">
@@ -868,12 +880,12 @@ const getMenuList = (val: boolean) => {
                     icon-size="24px"
                     @handle-command="cmd => handleDatasetTree(cmd, data)"
                     :menu-list="datasetTypeList"
-                    icon-name="icon_add_outlined"
+                    :icon-name="icon_add_outlined"
                     placement="bottom-start"
                     v-if="!data.leaf"
                   ></handle-more>
                   <el-icon v-else class="hover-icon" @click.stop="handleEdit(data.id)">
-                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                   </el-icon>
                   <handle-more
                     @handle-command="cmd => operation(cmd, data, data.leaf ? 'dataset' : 'folder')"
@@ -897,7 +909,7 @@ const getMenuList = (val: boolean) => {
         <empty-background :description="t('data_set.data_set_yet')" img-type="none">
           <el-button v-if="rootManage" @click="() => createDataset()" type="primary">
             <template #icon>
-              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ t('deDataset.create') + t('auth.dataset') }}</el-button
           >
@@ -915,7 +927,7 @@ const getMenuList = (val: boolean) => {
             <el-popover show-arrow :offset="8" placement="bottom" width="290" trigger="hover">
               <template #reference>
                 <el-icon size="16px" class="create-user">
-                  <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -926,26 +938,30 @@ const getMenuList = (val: boolean) => {
             <div class="right-btn">
               <el-button secondary @click="createPanel('dashboard')" v-permission="['panel']">
                 <template #icon>
-                  <Icon name="icon_dashboard_outlined"><icon_dashboard_outlined /></Icon>
+                  <Icon name="icon_dashboard_outlined"
+                    ><icon_dashboard_outlined class="svg-icon"
+                  /></Icon>
                 </template>
                 {{ t('visualization.panelAdd') }}
               </el-button>
               <el-button secondary @click="createPanel('dvCanvas')" v-permission="['screen']">
                 <template #icon>
                   <Icon name="icon_operation-analysis_outlined"
-                    ><icon_operationAnalysis_outlined
+                    ><icon_operationAnalysis_outlined class="svg-icon"
                   /></Icon> </template
                 >{{ t('data_set.new_data_screen') }}
               </el-button>
               <el-button secondary @click="exportDataset">
                 <template #icon>
-                  <Icon name="icon_download_outlined"><icon_download_outlined /></Icon>
+                  <Icon name="icon_download_outlined"
+                    ><icon_download_outlined class="svg-icon"
+                  /></Icon>
                 </template>
                 数据集导出
               </el-button>
               <el-button type="primary" @click="editorDataset" v-if="nodeInfo.weight >= 7">
                 <template #icon>
-                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </template>
                 {{ t('visualization.edit') }}
               </el-button>
@@ -1012,7 +1028,11 @@ const getMenuList = (val: boolean) => {
                       <div class="flex-align-center">
                         <ElIcon style="margin-right: 6px">
                           <Icon :className="`field-icon-${fieldType[column.deType]}`"
-                            ><component :is="iconFieldMap[fieldType[column.deType]]"></component
+                            ><component
+                              class="svg-icon"
+                              :class="`field-icon-${fieldType[column.deType]}`"
+                              :is="iconFieldMap[fieldType[column.deType]]"
+                            ></component
                           ></Icon>
                         </ElIcon>
                         <span class="ellipsis" :title="column.title" style="width: 120px">
diff --git a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
index 52424a803e..9e003c3fad 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
@@ -15,7 +15,7 @@ defineExpose({
   <div :class="[active ? 'active' : 'deactivate', 'base-info-content']">
     <p class="title" @click="active = !active">
       <el-icon style="font-size: 10px">
-        <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+        <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
       </el-icon>
       <span class="name">{{ name }}</span>
     </p>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
index f0d54e2273..ad2bdb6134 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
@@ -23,14 +23,14 @@ const del = () => {
 <template>
   <div class="excel-info">
     <el-icon class="excel">
-      <Icon name="icon_excel"><icon_excel /></Icon>
+      <Icon name="icon_excel"><icon_excel class="svg-icon" /></Icon>
     </el-icon>
     <div class="info">
       <p class="name ellipsis">{{ name || '-' }}</p>
       <p class="size ellipsis">{{ size || '-' }}</p>
     </div>
     <el-icon v-if="showDel" @click="del" class="delete">
-      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined class="svg-icon" /></Icon>
     </el-icon>
   </div>
 </template>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue b/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
index 724df0262d..8601de4930 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
@@ -36,7 +36,7 @@ const handleChange = (val: boolean) => {
   <div class="finish-page-content">
     <div class="finish-page">
       <el-icon class="succeed-icon">
-        <Icon name="icon_succeed_colorful"><icon_succeed_colorful /></Icon>
+        <Icon name="icon_succeed_colorful"><icon_succeed_colorful class="svg-icon" /></Icon>
       </el-icon>
 
       <div class="succeed-text">创建成功</div>
@@ -52,7 +52,7 @@ const handleChange = (val: boolean) => {
         <div class="title">您可能还想</div>
         <div class="ds-info">
           <el-icon class="ds">
-            <Icon name="icon_dataset"><icon_dataset /></Icon>
+            <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
           </el-icon>
           <div class="info">
             <p class="name">{{ $t('auth.dataset') }}</p>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
index cd6b86ff4b..9e60cd398e 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
@@ -77,10 +77,10 @@ const nextClick = () => {
     </div>
     <div class="tab-btn" v-if="showBtn">
       <el-icon size="12px" @click="prevClick">
-        <Icon name="icon_expand-left_filled"><icon_expandLeft_filled /></Icon>
+        <Icon name="icon_expand-left_filled"><icon_expandLeft_filled class="svg-icon" /></Icon>
       </el-icon>
       <el-icon size="12px" @click="nextClick">
-        <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+        <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
       </el-icon>
     </div>
   </div>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
index 2ab93b7bd9..a72f7949df 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@@ -595,7 +595,9 @@ defineExpose({
           @click="activeColumnInfo = !activeColumnInfo"
         >
           <el-icon style="font-size: 10px">
-            <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+            <Icon name="icon_expand-right_filled"
+              ><icon_expandRight_filled class="svg-icon"
+            /></Icon>
           </el-icon>
           <span class="name">{{ t('datasource.column_info') }}</span>
         </p>
@@ -651,6 +653,8 @@ defineExpose({
                     <el-icon>
                       <Icon :className="`field-icon-${fieldType[scope.row.deExtractType]}`"
                         ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[scope.row.deExtractType]}`"
                           :is="iconFieldMap[fieldType[scope.row.deExtractType]]"
                         ></component
                       ></Icon>
@@ -665,7 +669,11 @@ defineExpose({
                     <span style="float: left">
                       <el-icon>
                         <Icon :className="`field-icon-${fieldType[item.value]}`"
-                          ><component :is="iconFieldMap[fieldType[item.value]]"></component
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[item.value]}`"
+                            :is="iconFieldMap[fieldType[item.value]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -683,7 +691,9 @@ defineExpose({
           @click="activeDataPreview = !activeDataPreview"
         >
           <el-icon style="font-size: 10px">
-            <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+            <Icon name="icon_expand-right_filled"
+              ><icon_expandRight_filled class="svg-icon"
+            /></Icon>
           </el-icon>
           <span class="name">{{ t('datasource.data_preview') }}</span>
         </p>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
index 7b3a9a257a..e1e1dad7bc 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
@@ -122,7 +122,7 @@ const timeFunLists = [
         <div style="margin-bottom: 16px">
           <el-row :gutter="8">
             <el-icon class="drag handle">
-              <Icon name="icon_drag_outlined"><icon_drag_outlined /></Icon>
+              <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="activeName === 'params' ? 8 : 6" v-if="!unShowSelect">
               <el-input
@@ -221,7 +221,9 @@ const timeFunLists = [
             <el-col :span="1">
               <el-button text :disabled="isDisable()" @click="remove(index)">
                 <template #icon>
-                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -232,7 +234,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="icon_add_outlined"><icon_add_outlined /></icon>
+        <icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></icon>
       </template>
       添加参数
     </el-button>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiVariable.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiVariable.vue
index 46b4534f3b..3dfa5f76f5 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiVariable.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiVariable.vue
@@ -144,7 +144,7 @@ const timeFunLists = [
         <div :key="index" style="margin-bottom: 16px">
           <el-row :gutter="8">
             <el-icon class="drag handle">
-              <Icon name="icon_drag_outlined"><icon_drag_outlined /></Icon>
+              <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="6">
               <el-input
@@ -247,7 +247,9 @@ const timeFunLists = [
             <el-col :span="1">
               <el-button text :disabled="isDisable() || isReadOnly" @click="remove(index)">
                 <template #icon>
-                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -258,7 +260,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="icon_add_outlined"><icon_add_outlined /></icon>
+        <icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></icon>
       </template>
       添加参数
     </el-button>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue b/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
index 73f000de4f..9eb2e6d271 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
@@ -360,7 +360,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
         >
           <template #default="{ data: { name } }">
             <el-icon>
-              <Icon name="dv-folder"><dvFolder /></Icon>
+              <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -370,7 +370,9 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
         <el-input style="margin-bottom: 12px" v-model="filterText" clearable>
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -389,7 +391,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"><dvFolder /></Icon>
+                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                 </el-icon>
                 <span class="node-text" :title="data.name">{{ data.name }}</span>
               </span>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/DsTypeList.vue b/core/core-frontend/src/views/visualized/data/datasource/form/DsTypeList.vue
index a166bd9ff4..d559edc84a 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/DsTypeList.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/DsTypeList.vue
@@ -120,7 +120,9 @@ const selectDs = ({ type }) => {
         <div v-for="db in ele.dbList" :key="db.type" class="db-card" @click="selectDs(db)">
           <el-icon class="icon-border">
             <Icon v-if="db['isPlugin']" :static-content="db.icon"></Icon>
-            <Icon v-else><component :is="iconDatasourceMap[db.type]"></component></Icon>
+            <Icon v-else
+              ><component :is="iconDatasourceMap[db.type]" class="svg-icon"></component
+            ></Icon>
           </el-icon>
           <p class="db-name">{{ db.name }}</p>
         </div>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index b30beb9a26..9c410596b4 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
 import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
@@ -702,12 +703,12 @@ const delParams = data => {
 const datasetTypeList = [
   {
     label: '重命名',
-    svgName: 'icon_rename_outlined',
+    svgName: icon_rename_outlined,
     command: 'rename'
   },
   {
     label: '删除',
-    svgName: 'icon_delete-trash_outlined',
+    svgName: icon_deleteTrash_outlined,
     command: 'delete'
   }
 ]
@@ -769,7 +770,7 @@ defineExpose({
             </el-tabs>
             <el-button type="primary" style="margin-left: auto" @click="() => addApiItem(null)">
               <template #icon>
-                <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+                <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
               </template>
               {{ t('common.add') }}
             </el-button>
@@ -800,7 +801,7 @@ defineExpose({
                   </el-col>
                   <el-col style="text-align: right" :span="5">
                     <el-icon class="de-copy-icon hover-icon" @click.stop="copyItem(api)">
-                      <Icon name="de-copy"><deCopy /></Icon>
+                      <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
                     </el-icon>
 
                     <span @click.stop>
@@ -814,12 +815,14 @@ defineExpose({
                       >
                         <template #reference>
                           <el-icon class="de-delete-icon hover-icon">
-                            <Icon name="de-delete"><deDelete /></Icon>
+                            <Icon name="de-delete"><deDelete class="svg-icon" /></Icon>
                           </el-icon>
                         </template>
                         <template #default>
                           <el-icon class="de-copy-icon icon-warning">
-                            <Icon name="icon_warning_filled"><icon_warning_filled /></Icon>
+                            <Icon name="icon_warning_filled"
+                              ><icon_warning_filled class="svg-icon"
+                            /></Icon>
                           </el-icon>
                           <div class="tips">
                             {{ t('datasource.delete_this_item') }}
@@ -869,7 +872,7 @@ defineExpose({
                 <span class="label">{{ ele.name }}</span>
                 <span class="name-copy">
                   <el-icon class="hover-icon" @click.stop="handleApiParams('edit', ele)">
-                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                   </el-icon>
                   <handle-more
                     icon-size="24px"
@@ -896,8 +899,12 @@ defineExpose({
                   <template #default="scope">
                     <div class="flex-align-center icon">
                       <el-icon>
-                        <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
-                          ><component :is="iconFieldMap[fieldType[scope.row.deType]]"></component
+                        <Icon
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[scope.row.deType]}`"
+                            :is="iconFieldMap[fieldType[scope.row.deType]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                       {{ fieldTypeText[scope.row.deType] }}
@@ -909,7 +916,9 @@ defineExpose({
                   <template #default="scope">
                     <el-button text @click.stop="delParams(scope.row)">
                       <template #icon>
-                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
+                        <Icon name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                     </el-button>
                   </template>
@@ -1056,7 +1065,7 @@ defineExpose({
               <span class="name">{{ t('datasource.schema') }}<i class="required" /></span>
               <el-button text size="small" @click="getDsSchema()">
                 <template #icon>
-                  <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+                  <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                 </template>
                 {{ t('datasource.get_schema') }}
               </el-button>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
index 16d0a850b1..5d92240f1e 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
@@ -118,7 +118,10 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center icon">
         <ElIcon>
           <Icon className={`field-icon-${fieldType[column.fieldType]}`}>
-            {iconFieldMap[fieldType[column.fieldType]]}
+            {{
+              ...iconFieldMap[fieldType[column.fieldType]],
+              className: `svg-icon field-icon-${fieldType[column.fieldType]}`
+            }}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '100px' }}>
@@ -484,7 +487,7 @@ defineExpose({
             <template #trigger>
               <el-button secondary>
                 <template #icon>
-                  <Icon name="icon_upload_outlined"><icon_upload_outlined /></Icon>
+                  <Icon name="icon_upload_outlined"><icon_upload_outlined class="svg-icon" /></Icon>
                 </template>
                 {{ t('dataset.upload_file') }}
               </el-button>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
index e5560eb8c2..6e26ff285a 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
@@ -703,7 +703,7 @@ defineExpose({
         </el-steps>
       </div>
       <el-icon @click="close" class="datasource-close">
-        <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
+        <Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
       </el-icon>
     </template>
     <div class="datasource">
@@ -717,7 +717,9 @@ defineExpose({
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -763,7 +765,9 @@ defineExpose({
             <span class="custom-tree-node flex-align-center">
               <el-icon v-if="!!data.catalog" class="icon-border" style="width: 18px; height: 18px">
                 <Icon v-if="data['isPlugin']" :static-content="data.icon"></Icon>
-                <Icon v-else><component :is="iconDatasourceMap[data.type]"></component></Icon>
+                <Icon v-else
+                  ><component class="svg-icon" :is="iconDatasourceMap[data.type]"></component
+                ></Icon>
               </el-icon>
               <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
             </span>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 0e3b9f9dfe..f9efc2a3cc 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -243,7 +243,10 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
           <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {iconFieldMap[fieldType[column.deType]]}
+            {{
+              ...iconFieldMap[fieldType[column.deType]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
@@ -999,12 +1002,14 @@ const getMenuList = (val: boolean) => {
                   :style="{ marginRight: '20px' }"
                   @click="handleDatasourceTree('folder')"
                 >
-                  <Icon name="dv-new-folder"><dvNewFolder /></Icon>
+                  <Icon name="dv-new-folder"><dvNewFolder class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" :content="t('datasource.create')" placement="top">
                 <el-icon class="custom-icon btn" @click="createDatasource">
-                  <Icon name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
+                  <Icon name="icon_file-add_outlined"
+                    ><icon_fileAdd_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -1018,7 +1023,9 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -1026,7 +1033,7 @@ const getMenuList = (val: boolean) => {
             <el-icon class="filter-icon-span">
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
                 <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
-                  ><dvSortAsc
+                  ><dvSortAsc class="svg-icon opt-icon"
                 /></Icon>
               </el-tooltip>
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
@@ -1034,7 +1041,7 @@ const getMenuList = (val: boolean) => {
                   v-show="state.curSortType.includes('desc')"
                   name="dv-sort-desc"
                   class="opt-icon"
-                  ><dvSortDesc
+                  ><dvSortDesc class="svg-icon opt-icon"
                 /></Icon>
               </el-tooltip>
             </el-icon>
@@ -1072,7 +1079,7 @@ const getMenuList = (val: boolean) => {
               <span class="custom-tree-node">
                 <el-icon :class="data.leaf && 'icon-border'" style="font-size: 18px">
                   <Icon :static-content="getDsIcon(data)"
-                    ><component :is="getDsIconName(data)"></component
+                    ><component class="svg-icon" :is="getDsIconName(data)"></component
                   ></Icon>
                 </el-icon>
                 <span
@@ -1095,7 +1102,7 @@ const getMenuList = (val: boolean) => {
                     @click.stop="handleEdit(data)"
                     v-else-if="data.type !== 'Excel'"
                   >
-                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                   </el-icon>
                   <handle-more
                     @handle-command="
@@ -1122,7 +1129,7 @@ const getMenuList = (val: boolean) => {
         <empty-background description="暂无数据源" img-type="none">
           <el-button v-if="rootManage" @click="() => createDatasource()" type="primary">
             <template #icon>
-              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ t('datasource.create') }}</el-button
           >
@@ -1133,7 +1140,7 @@ const getMenuList = (val: boolean) => {
           <div class="info-method">
             <el-icon class="icon-border">
               <Icon :static-content="getDsIconType(nodeInfo.type)"
-                ><component :is="iconDatasourceMap[nodeInfo.type]"></component
+                ><component class="svg-icon" :is="iconDatasourceMap[nodeInfo.type]"></component
               ></Icon>
             </el-icon>
             <span :title="nodeInfo.name" class="name ellipsis">
@@ -1146,7 +1153,7 @@ const getMenuList = (val: boolean) => {
             <el-popover :offset="8" show-arrow placement="bottom" width="290" trigger="hover">
               <template #reference>
                 <el-icon size="16px" class="create-user">
-                  <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -1157,7 +1164,9 @@ const getMenuList = (val: boolean) => {
             <div class="right-btn flex-align-center">
               <el-button secondary @click="createDataset(null)" v-permission="['dataset']">
                 <template #icon>
-                  <Icon name="icon_dataset_outlined"><icon_dataset_outlined /></Icon>
+                  <Icon name="icon_dataset_outlined"
+                    ><icon_dataset_outlined class="svg-icon"
+                  /></Icon>
                 </template>
                 新建数据集
               </el-button>
@@ -1184,7 +1193,9 @@ const getMenuList = (val: boolean) => {
                   <template #trigger>
                     <el-button v-loading="replaceLoading" class="replace-excel" type="primary">
                       <template #icon>
-                        <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                        <Icon name="icon_edit_outlined"
+                          ><icon_edit_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       替换数据
                     </el-button>
@@ -1205,7 +1216,9 @@ const getMenuList = (val: boolean) => {
                   <template #trigger>
                     <el-button v-loading="addLoading" type="primary">
                       <template #icon>
-                        <Icon name="icon_new-item_outlined"><icon_newItem_outlined /></Icon>
+                        <Icon name="icon_new-item_outlined"
+                          ><icon_newItem_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       追加数据
                     </el-button>
@@ -1214,7 +1227,7 @@ const getMenuList = (val: boolean) => {
               </template>
               <el-button v-else-if="nodeInfo.weight >= 7" @click="editDatasource()" type="primary">
                 <template #icon>
-                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </template>
                 编辑
               </el-button>
@@ -1239,7 +1252,9 @@ const getMenuList = (val: boolean) => {
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+                  <Icon name="icon_search-outline_outlined"
+                    ><icon_searchOutline_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -1267,7 +1282,9 @@ const getMenuList = (val: boolean) => {
                   <div class="flex-align-center">
                     <template v-if="scope.row.status === 'Completed'">
                       <el-icon style="margin-right: 8px">
-                        <icon name="icon_succeed_filled"><icon_succeed_filled /></icon>
+                        <icon name="icon_succeed_filled"
+                          ><icon_succeed_filled class="svg-icon"
+                        /></icon>
                       </el-icon>
                       {{ t('dataset.completed') }}
                     </template>
@@ -1277,7 +1294,7 @@ const getMenuList = (val: boolean) => {
                     <template v-if="scope.row.status === 'Error' || scope.row.status === 'Warning'">
                       <el-icon style="margin-right: 8px">
                         <icon class="field-icon-red" name="icon_close_filled"
-                          ><icon_close_filled
+                          ><icon_close_filled class="svg-icon field-icon-red"
                         /></icon>
                       </el-icon>
                       {{ t('dataset.error') }}
@@ -1309,14 +1326,18 @@ const getMenuList = (val: boolean) => {
                       v-permission="['dataset']"
                     >
                       <template #icon>
-                        <Icon name="icon_dataset_outlined"><icon_dataset_outlined /></Icon>
+                        <Icon name="icon_dataset_outlined"
+                          ><icon_dataset_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                     </el-button>
                   </el-tooltip>
                   <el-tooltip effect="dark" :content="t('visualization.details')" placement="top">
                     <el-button @click.stop="selectDataset(scope.row)" text>
                       <template #icon>
-                        <Icon name="icon_describe_outlined"><icon_describe_outlined /></Icon>
+                        <Icon name="icon_describe_outlined"
+                          ><icon_describe_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                     </el-button>
                   </el-tooltip>
@@ -1503,7 +1524,9 @@ const getMenuList = (val: boolean) => {
                   <el-col style="text-align: right" :span="5">
                     <el-button @click="updateApiTable(api)" text>
                       <template #icon>
-                        <icon name="icon_replace_outlined"><icon_replace_outlined /></icon>
+                        <icon name="icon_replace_outlined"
+                          ><icon_replace_outlined class="svg-icon"
+                        /></icon>
                       </template>
                     </el-button>
                   </el-col>
@@ -1528,7 +1551,7 @@ const getMenuList = (val: boolean) => {
             </div>
             <el-button @click="updateApiDs" class="update-records" text>
               <template #icon>
-                <icon name="icon_replace_outlined"><icon_replace_outlined /></icon>
+                <icon name="icon_replace_outlined"><icon_replace_outlined class="svg-icon" /></icon>
               </template>
               全部更新
             </el-button>
@@ -1561,7 +1584,9 @@ const getMenuList = (val: boolean) => {
             </template>
             <el-button @click="getRecord" class="update-records" text>
               <template #icon>
-                <icon name="icon_describe_outlined"><icon_describe_outlined /></icon>
+                <icon name="icon_describe_outlined"
+                  ><icon_describe_outlined class="svg-icon"
+                /></icon>
               </template>
               {{ t('dataset.update_records') }}
             </el-button>
@@ -1647,7 +1672,11 @@ const getMenuList = (val: boolean) => {
               <div class="flex-align-center icon">
                 <el-icon>
                   <icon :class="`field-icon-${fieldType[scope.row.deType]}`"
-                    ><component :is="iconFieldMap[fieldType[scope.row.deType]]"></component
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[scope.row.deType]}`"
+                      :is="iconFieldMap[fieldType[scope.row.deType]]"
+                    ></component
                   ></icon>
                 </el-icon>
                 {{
@@ -1715,7 +1744,7 @@ const getMenuList = (val: boolean) => {
             <div class="flex-align-center">
               <template v-if="scope.row.taskStatus === 'Completed'">
                 <el-icon style="margin-right: 8px">
-                  <icon name="icon_succeed_filled"><icon_succeed_filled /></icon>
+                  <icon name="icon_succeed_filled"><icon_succeed_filled class="svg-icon" /></icon>
                 </el-icon>
                 {{ t('dataset.completed') }}
               </template>
@@ -1727,11 +1756,13 @@ const getMenuList = (val: boolean) => {
                 v-if="scope.row.taskStatus === 'Error' || scope.row.taskStatus === 'Warning'"
               >
                 <el-icon style="margin-right: 8px">
-                  <icon class="field-icon-red" name="icon_close_filled"><icon_close_filled /></icon>
+                  <icon class="field-icon-red" name="icon_close_filled"
+                    ><icon_close_filled class="svg-icon field-icon-red"
+                  /></icon>
                 </el-icon>
                 {{ t('dataset.error') }}
                 <el-icon @click="showErrorInfo(scope.row.info)" class="error-info">
-                  <icon name="icon-maybe_outlined"><iconMaybe_outlined /></icon>
+                  <icon name="icon-maybe_outlined"><iconMaybe_outlined class="svg-icon" /></icon>
                 </el-icon>
               </template>
             </div>
diff --git a/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue b/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
index 0aafb4fc68..79d39724a2 100644
--- a/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
+++ b/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
@@ -109,7 +109,7 @@ const handleTabClick = () => {
     <div class="name">
       选项值来源
       <el-icon>
-        <Icon name="icon_view-list_outlined"><icon_viewList_outlined /></Icon>
+        <Icon name="icon_view-list_outlined"><icon_viewList_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
     <el-tabs v-model="activeNameData" @tab-click="handleTabClick">
@@ -138,7 +138,7 @@ const handleTabClick = () => {
     <div class="filed-list field-d">
       <div :class="['filed-name', { expanded: expandedD }]" @click="expandedD = !expandedD">
         <ElIcon class="expand">
-          <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+          <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
         </ElIcon>
         &nbsp;维度
       </div>
@@ -151,8 +151,12 @@ const handleTabClick = () => {
           <template #item="{ element }">
             <div class="filter-db-row">
               <el-icon>
-                <Icon :className="`field-icon-${fieldType[element.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[element.deType]]"></component
+                <Icon
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[element.deType]}`"
+                    :is="iconFieldMap[fieldType[element.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               <span :title="element.name">{{ element.name }}</span>
@@ -164,7 +168,7 @@ const handleTabClick = () => {
     <div class="filed-list field-d">
       <div :class="['filed-name', { expanded: expandedQ }]" @click="expandedQ = !expandedQ">
         <ElIcon class="expand">
-          <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
+          <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
         </ElIcon>
         &nbsp;指标
       </div>
@@ -194,7 +198,7 @@ const handleTabClick = () => {
     <div class="name">
       文本下拉组件
       <el-icon>
-        <Icon name="icon_view-list_outlined"><icon_viewList_outlined /></Icon>
+        <Icon name="icon_view-list_outlined"><icon_viewList_outlined class="svg-icon" /></Icon>
       </el-icon>
     </div>
     <el-tabs v-model="activeName">
diff --git a/core/core-frontend/src/views/workbranch/ShortcutTable.vue b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
index 1021d6bbf9..528307006e 100644
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@@ -306,7 +306,9 @@ const getEmptyDesc = (): string => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -388,7 +390,7 @@ const getEmptyDesc = (): string => {
                     preview(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
                   "
                 >
-                  <Icon name="icon_pc_outlined"><icon_pc_outlined /></Icon>
+                  <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <ShareHandler
@@ -414,7 +416,7 @@ const getEmptyDesc = (): string => {
                   class="hover-icon hover-icon-in-table"
                   @click.stop="executeCancelStore(scope.row)"
                 >
-                  <Icon name="icon_cancel_store"><icon_cancel_store /></Icon>
+                  <Icon name="icon_cancel_store"><icon_cancel_store class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
             </template>
@@ -427,7 +429,7 @@ const getEmptyDesc = (): string => {
                     openDataset(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
                   "
                 >
-                  <Icon name="icon_pc_outlined"><icon_pc_outlined /></Icon>
+                  <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
             </template>
diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue
index 4cad2b31a5..c13cb1fed3 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -290,7 +290,7 @@ initMarketTemplate()
     <div class="info-quick-creation">
       <div class="user-info">
         <el-icon class="main-color user-icon-container">
-          <Icon name="user-img"><userImg /></Icon>
+          <Icon name="user-img"><userImg class="svg-icon" /></Icon>
         </el-icon>
         <div class="info">
           <div class="name-role flex-align-center">
@@ -357,7 +357,7 @@ initMarketTemplate()
               <div class="empty-tooltip-container-template" />
             </el-tooltip>
             <el-icon class="main-color-quick template-create">
-              <Icon name="icon_template_colorful"><icon_template_colorful /></Icon>
+              <Icon name="icon_template_colorful"><icon_template_colorful class="svg-icon" /></Icon>
             </el-icon>
             <span class="name">{{ t('work_branch.new_using_template') }}</span>
           </div>
@@ -405,7 +405,9 @@ initMarketTemplate()
           </div>
           <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
             <div style="text-align: center">
-              <Icon name="no_result" class="no-result"><no_result /></Icon>
+              <Icon name="no_result" class="no-result"
+                ><no_result class="svg-icon no-result"
+              /></Icon>
               <br />
               <span class="no-result-tips">{{ t('work_branch.relevant_templates_found') }}</span>
             </div>
diff --git a/core/core-frontend/transformVue.js b/core/core-frontend/transformVue.js
deleted file mode 100644
index d65c862430..0000000000
--- a/core/core-frontend/transformVue.js
+++ /dev/null
@@ -1,4180 +0,0 @@
-const kv = [
-    {
-        "k": "_401",
-        "ele": "import _401 from '@/assets/svg/401.svg'",
-        "v": "401"
-    },
-    {
-        "k": "icon_link_calculated_outlined",
-        "ele": "import icon_link_calculated_outlined from '@/assets/svg/icon_link-calculated_outlined.svg'",
-        "v": "icon_link-calculated_outlined"
-    },
-    {
-        "k": "icon_link_calculated_outlined_1",
-        "ele": "import icon_link_calculated_outlined_1 from '@/assets/svg/icon_link-calculated_outlined-1.svg'",
-        "v": "icon_link-calculated_outlined-1"
-    },
-    {
-        "k": "icon_text_calculated_outlined",
-        "ele": "import icon_text_calculated_outlined from '@/assets/svg/icon_text-calculated_outlined.svg'",
-        "v": "icon_text-calculated_outlined"
-    },
-    {
-        "k": "icon_text_calculated_outlined_1",
-        "ele": "import icon_text_calculated_outlined_1 from '@/assets/svg/icon_text-calculated_outlined-1.svg'",
-        "v": "icon_text-calculated_outlined-1"
-    },
-    {
-        "k": "icon_number_calculated_outlined",
-        "ele": "import icon_number_calculated_outlined from '@/assets/svg/icon_number-calculated_outlined.svg'",
-        "v": "icon_number-calculated_outlined"
-    },
-    {
-        "k": "icon_number_calculated_outlined_1",
-        "ele": "import icon_number_calculated_outlined_1 from '@/assets/svg/icon_number-calculated_outlined-1.svg'",
-        "v": "icon_number-calculated_outlined-1"
-    },
-    {
-        "k": "icon_local_calculated_outlined",
-        "ele": "import icon_local_calculated_outlined from '@/assets/svg/icon_local-calculated_outlined.svg'",
-        "v": "icon_local-calculated_outlined"
-    },
-    {
-        "k": "icon_local_calculated_outlined_1",
-        "ele": "import icon_local_calculated_outlined_1 from '@/assets/svg/icon_local-calculated_outlined-1.svg'",
-        "v": "icon_local-calculated_outlined-1"
-    },
-    {
-        "k": "icon_calendar_calculated_outlined",
-        "ele": "import icon_calendar_calculated_outlined from '@/assets/svg/icon_calendar-calculated_outlined.svg'",
-        "v": "icon_calendar-calculated_outlined"
-    },
-    {
-        "k": "icon_calendar_calculated_outlined_1",
-        "ele": "import icon_calendar_calculated_outlined_1 from '@/assets/svg/icon_calendar-calculated_outlined-1.svg'",
-        "v": "icon_calendar-calculated_outlined-1"
-    },
-    {
-        "k": "icon_adjustment_outlined",
-        "ele": "import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_outlined.svg'",
-        "v": "icon_adjustment_outlined"
-    },
-    {
-        "k": "icon_file_font_colorful",
-        "ele": "import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'",
-        "v": "icon_file-font_colorful"
-    },
-    {
-        "k": "relation_arrow_icon",
-        "ele": "import relation_arrow_icon from '@/assets/svg/relation_arrow_icon.svg'",
-        "v": "relation_arrow_icon"
-    },
-    {
-        "k": "icon_data_visualization",
-        "ele": "import icon_data_visualization from '@/assets/svg/icon_data-visualization.svg'",
-        "v": "icon_data-visualization"
-    },
-    {
-        "k": "icon_notification_filled",
-        "ele": "import icon_notification_filled from '@/assets/svg/icon_notification_filled.svg'",
-        "v": "icon_notification_filled"
-    },
-    {
-        "k": "calculate",
-        "ele": "import calculate from '@/assets/svg/calculate.svg'",
-        "v": "calculate"
-    },
-    {
-        "k": "_403",
-        "ele": "import _403 from '@/assets/svg/403.svg'",
-        "v": "403"
-    },
-    {
-        "k": "APIDs",
-        "ele": "import APIDs from '@/assets/svg/API-ds.svg'",
-        "v": "API-ds"
-    },
-    {
-        "k": "Apache_Hive",
-        "ele": "import Apache_Hive from '@/assets/svg/Apache Hive.svg'",
-        "v": "Apache Hive"
-    },
-    {
-        "k": "Checkbox",
-        "ele": "import Checkbox from '@/assets/svg/Checkbox.svg'",
-        "v": "Checkbox"
-    },
-    {
-        "k": "clock",
-        "ele": "import clock from '@/assets/svg/clock.svg'",
-        "v": "clock"
-    },
-    {
-        "k": "DM",
-        "ele": "import DM from '@/assets/svg/DM.svg'",
-        "v": "DM"
-    },
-    {
-        "k": "DataEase",
-        "ele": "import DataEase from '@/assets/svg/DataEase.svg'",
-        "v": "DataEase"
-    },
-    {
-        "k": "Elasticsearch",
-        "ele": "import Elasticsearch from '@/assets/svg/Elasticsearch.svg'",
-        "v": "Elasticsearch"
-    },
-    {
-        "k": "ExcelDs",
-        "ele": "import ExcelDs from '@/assets/svg/Excel-ds.svg'",
-        "v": "Excel-ds"
-    },
-    {
-        "k": "Frame",
-        "ele": "import Frame from '@/assets/svg/Frame.svg'",
-        "v": "Frame"
-    },
-    {
-        "k": "KingBase",
-        "ele": "import KingBase from '@/assets/svg/KingBase.svg'",
-        "v": "KingBase"
-    },
-    {
-        "k": "Kylin",
-        "ele": "import Kylin from '@/assets/svg/Kylin.svg'",
-        "v": "Kylin"
-    },
-    {
-        "k": "Maxcompute",
-        "ele": "import Maxcompute from '@/assets/svg/Maxcompute.svg'",
-        "v": "Maxcompute"
-    },
-    {
-        "k": "PDF",
-        "ele": "import PDF from '@/assets/svg/PDF.svg'",
-        "v": "PDF"
-    },
-    {
-        "k": "Presto",
-        "ele": "import Presto from '@/assets/svg/Presto.svg'",
-        "v": "Presto"
-    },
-    {
-        "k": "StarRocksDs",
-        "ele": "import StarRocksDs from '@/assets/svg/StarRocks-ds.svg'",
-        "v": "StarRocks-ds"
-    },
-    {
-        "k": "TiDBDs",
-        "ele": "import TiDBDs from '@/assets/svg/TiDB-ds.svg'",
-        "v": "TiDB-ds"
-    },
-    {
-        "k": "activeBtn_copilot",
-        "ele": "import activeBtn_copilot from '@/assets/svg/active-btn_copilot.svg'",
-        "v": "active-btn_copilot"
-    },
-    {
-        "k": "add",
-        "ele": "import add from '@/assets/svg/add.svg'",
-        "v": "add"
-    },
-    {
-        "k": "allMsg",
-        "ele": "import allMsg from '@/assets/svg/all-msg.svg'",
-        "v": "all-msg"
-    },
-    {
-        "k": "appearance",
-        "ele": "import appearance from '@/assets/svg/appearance.svg'",
-        "v": "appearance"
-    },
-    {
-        "k": "areaDark",
-        "ele": "import areaDark from '@/assets/svg/area-dark.svg'",
-        "v": "area-dark"
-    },
-    {
-        "k": "areaOrigin",
-        "ele": "import areaOrigin from '@/assets/svg/area-origin.svg'",
-        "v": "area-origin"
-    },
-    {
-        "k": "areaStackDark",
-        "ele": "import areaStackDark from '@/assets/svg/area-stack-dark.svg'",
-        "v": "area-stack-dark"
-    },
-    {
-        "k": "areaStackOrigin",
-        "ele": "import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'",
-        "v": "area-stack-origin"
-    },
-    {
-        "k": "areaStack",
-        "ele": "import areaStack from '@/assets/svg/area-stack.svg'",
-        "v": "area-stack"
-    },
-    {
-        "k": "area",
-        "ele": "import area from '@/assets/svg/area.svg'",
-        "v": "area"
-    },
-    {
-        "k": "auth",
-        "ele": "import auth from '@/assets/svg/auth.svg'",
-        "v": "auth"
-    },
-    {
-        "k": "authentication",
-        "ele": "import authentication from '@/assets/svg/authentication.svg'",
-        "v": "authentication"
-    },
-    {
-        "k": "barDark",
-        "ele": "import barDark from '@/assets/svg/bar-dark.svg'",
-        "v": "bar-dark"
-    },
-    {
-        "k": "barGroupDark",
-        "ele": "import barGroupDark from '@/assets/svg/bar-group-dark.svg'",
-        "v": "bar-group-dark"
-    },
-    {
-        "k": "barGroupOrigin",
-        "ele": "import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'",
-        "v": "bar-group-origin"
-    },
-    {
-        "k": "barGroupStackDark",
-        "ele": "import barGroupStackDark from '@/assets/svg/bar-group-stack-dark.svg'",
-        "v": "bar-group-stack-dark"
-    },
-    {
-        "k": "barGroupStackOrigin",
-        "ele": "import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'",
-        "v": "bar-group-stack-origin"
-    },
-    {
-        "k": "barGroupStack",
-        "ele": "import barGroupStack from '@/assets/svg/bar-group-stack.svg'",
-        "v": "bar-group-stack"
-    },
-    {
-        "k": "barGroup",
-        "ele": "import barGroup from '@/assets/svg/bar-group.svg'",
-        "v": "bar-group"
-    },
-    {
-        "k": "barHorizontalDark",
-        "ele": "import barHorizontalDark from '@/assets/svg/bar-horizontal-dark.svg'",
-        "v": "bar-horizontal-dark"
-    },
-    {
-        "k": "barHorizontalOrigin",
-        "ele": "import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'",
-        "v": "bar-horizontal-origin"
-    },
-    {
-        "k": "barHorizontal",
-        "ele": "import barHorizontal from '@/assets/svg/bar-horizontal.svg'",
-        "v": "bar-horizontal"
-    },
-    {
-        "k": "barOrigin",
-        "ele": "import barOrigin from '@/assets/svg/bar-origin.svg'",
-        "v": "bar-origin"
-    },
-    {
-        "k": "barRangeDark",
-        "ele": "import barRangeDark from '@/assets/svg/bar-range-dark.svg'",
-        "v": "bar-range-dark"
-    },
-    {
-        "k": "barRangeOrigin",
-        "ele": "import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'",
-        "v": "bar-range-origin"
-    },
-    {
-        "k": "barRange",
-        "ele": "import barRange from '@/assets/svg/bar-range.svg'",
-        "v": "bar-range"
-    },
-    {
-        "k": "barStackDark",
-        "ele": "import barStackDark from '@/assets/svg/bar-stack-dark.svg'",
-        "v": "bar-stack-dark"
-    },
-    {
-        "k": "barStackHorizontalDark",
-        "ele": "import barStackHorizontalDark from '@/assets/svg/bar-stack-horizontal-dark.svg'",
-        "v": "bar-stack-horizontal-dark"
-    },
-    {
-        "k": "barStackHorizontalOrigin",
-        "ele": "import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'",
-        "v": "bar-stack-horizontal-origin"
-    },
-    {
-        "k": "barStackHorizontal",
-        "ele": "import barStackHorizontal from '@/assets/svg/bar-stack-horizontal.svg'",
-        "v": "bar-stack-horizontal"
-    },
-    {
-        "k": "barStackOrigin",
-        "ele": "import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'",
-        "v": "bar-stack-origin"
-    },
-    {
-        "k": "barStack",
-        "ele": "import barStack from '@/assets/svg/bar-stack.svg'",
-        "v": "bar-stack"
-    },
-    {
-        "k": "bar",
-        "ele": "import bar from '@/assets/svg/bar.svg'",
-        "v": "bar"
-    },
-    {
-        "k": "bidirectionalBarDark",
-        "ele": "import bidirectionalBarDark from '@/assets/svg/bidirectional-bar-dark.svg'",
-        "v": "bidirectional-bar-dark"
-    },
-    {
-        "k": "bidirectionalBarOrigin",
-        "ele": "import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'",
-        "v": "bidirectional-bar-origin"
-    },
-    {
-        "k": "bidirectionalBar",
-        "ele": "import bidirectionalBar from '@/assets/svg/bidirectional-bar.svg'",
-        "v": "bidirectional-bar"
-    },
-    {
-        "k": "board_1",
-        "ele": "import board_1 from '@/assets/svg/board_1.svg'",
-        "v": "board_1"
-    },
-    {
-        "k": "board_2",
-        "ele": "import board_2 from '@/assets/svg/board_2.svg'",
-        "v": "board_2"
-    },
-    {
-        "k": "board_3",
-        "ele": "import board_3 from '@/assets/svg/board_3.svg'",
-        "v": "board_3"
-    },
-    {
-        "k": "board_4",
-        "ele": "import board_4 from '@/assets/svg/board_4.svg'",
-        "v": "board_4"
-    },
-    {
-        "k": "board_5",
-        "ele": "import board_5 from '@/assets/svg/board_5.svg'",
-        "v": "board_5"
-    },
-    {
-        "k": "board_6",
-        "ele": "import board_6 from '@/assets/svg/board_6.svg'",
-        "v": "board_6"
-    },
-    {
-        "k": "board_7",
-        "ele": "import board_7 from '@/assets/svg/board_7.svg'",
-        "v": "board_7"
-    },
-    {
-        "k": "board_8",
-        "ele": "import board_8 from '@/assets/svg/board_8.svg'",
-        "v": "board_8"
-    },
-    {
-        "k": "board_9",
-        "ele": "import board_9 from '@/assets/svg/board_9.svg'",
-        "v": "board_9"
-    },
-    {
-        "k": "btn_copilot",
-        "ele": "import btn_copilot from '@/assets/svg/btn_copilot.svg'",
-        "v": "btn_copilot"
-    },
-    {
-        "k": "btn_oidc",
-        "ele": "import btn_oidc from '@/assets/svg/btn_oidc.svg'",
-        "v": "btn_oidc"
-    },
-    {
-        "k": "bubbleMapDark",
-        "ele": "import bubbleMapDark from '@/assets/svg/bubble-map-dark.svg'",
-        "v": "bubble-map-dark"
-    },
-    {
-        "k": "bubbleMapOrigin",
-        "ele": "import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'",
-        "v": "bubble-map-origin"
-    },
-    {
-        "k": "bubbleMap",
-        "ele": "import bubbleMap from '@/assets/svg/bubble-map.svg'",
-        "v": "bubble-map"
-    },
-    {
-        "k": "button_right",
-        "ele": "import button_right from '@/assets/svg/button_right.svg'",
-        "v": "button_right"
-    },
-    {
-        "k": "cancel_release",
-        "ele": "import cancel_release from '@/assets/svg/cancel_release.svg'",
-        "v": "cancel_release"
-    },
-    {
-        "k": "chartDownload",
-        "ele": "import chartDownload from '@/assets/svg/chart-download.svg'",
-        "v": "chart-download"
-    },
-    {
-        "k": "chartMixDark",
-        "ele": "import chartMixDark from '@/assets/svg/chart-mix-dark.svg'",
-        "v": "chart-mix-dark"
-    },
-    {
-        "k": "chartMixGroupDark",
-        "ele": "import chartMixGroupDark from '@/assets/svg/chart-mix-group-dark.svg'",
-        "v": "chart-mix-group-dark"
-    },
-    {
-        "k": "chartMixGroupOrigin",
-        "ele": "import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'",
-        "v": "chart-mix-group-origin"
-    },
-    {
-        "k": "chartMixGroup",
-        "ele": "import chartMixGroup from '@/assets/svg/chart-mix-group.svg'",
-        "v": "chart-mix-group"
-    },
-    {
-        "k": "chartMixOrigin",
-        "ele": "import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'",
-        "v": "chart-mix-origin"
-    },
-    {
-        "k": "chartMixStackDark",
-        "ele": "import chartMixStackDark from '@/assets/svg/chart-mix-stack-dark.svg'",
-        "v": "chart-mix-stack-dark"
-    },
-    {
-        "k": "chartMixStackOrigin",
-        "ele": "import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'",
-        "v": "chart-mix-stack-origin"
-    },
-    {
-        "k": "chartMixStack",
-        "ele": "import chartMixStack from '@/assets/svg/chart-mix-stack.svg'",
-        "v": "chart-mix-stack"
-    },
-    {
-        "k": "chartMix",
-        "ele": "import chartMix from '@/assets/svg/chart-mix.svg'",
-        "v": "chart-mix"
-    },
-    {
-        "k": "chartTable",
-        "ele": "import chartTable from '@/assets/svg/chart-table.svg'",
-        "v": "chart-table"
-    },
-    {
-        "k": "ckDs",
-        "ele": "import ckDs from '@/assets/svg/ck-ds.svg'",
-        "v": "ck-ds"
-    },
-    {
-        "k": "copilot",
-        "ele": "import copilot from '@/assets/svg/copilot.svg'",
-        "v": "copilot"
-    },
-    {
-        "k": "custom_sort",
-        "ele": "import custom_sort from '@/assets/svg/custom_sort.svg'",
-        "v": "custom_sort"
-    },
-    {
-        "k": "dark_1",
-        "ele": "import dark_1 from '@/assets/svg/dark_1.svg'",
-        "v": "dark_1"
-    },
-    {
-        "k": "dashboard",
-        "ele": "import dashboard from '@/assets/svg/dashboard.svg'",
-        "v": "dashboard"
-    },
-    {
-        "k": "dataReference",
-        "ele": "import dataReference from '@/assets/svg/data-reference.svg'",
-        "v": "data-reference"
-    },
-    {
-        "k": "database",
-        "ele": "import database from '@/assets/svg/database.svg'",
-        "v": "database"
-    },
-    {
-        "k": "datasetOutline",
-        "ele": "import datasetOutline from '@/assets/svg/dataset-outline.svg'",
-        "v": "dataset-outline"
-    },
-    {
-        "k": "datasetTask",
-        "ele": "import datasetTask from '@/assets/svg/dataset-task.svg'",
-        "v": "dataset-task"
-    },
-    {
-        "k": "datasource",
-        "ele": "import datasource from '@/assets/svg/datasource.svg'",
-        "v": "datasource"
-    },
-    {
-        "k": "dbDe",
-        "ele": "import dbDe from '@/assets/svg/db-de.svg'",
-        "v": "db-de"
-    },
-    {
-        "k": "dbMoreWeb",
-        "ele": "import dbMoreWeb from '@/assets/svg/db-more-web.svg'",
-        "v": "db-more-web"
-    },
-    {
-        "k": "db2Ds",
-        "ele": "import db2Ds from '@/assets/svg/db2-ds.svg'",
-        "v": "db2-ds"
-    },
-    {
-        "k": "deApiNew",
-        "ele": "import deApiNew from '@/assets/svg/de-api-new.svg'",
-        "v": "de-api-new"
-    },
-    {
-        "k": "deCopy",
-        "ele": "import deCopy from '@/assets/svg/de-copy.svg'",
-        "v": "de-copy"
-    },
-    {
-        "k": "deDbNew",
-        "ele": "import deDbNew from '@/assets/svg/de-db-new.svg'",
-        "v": "de-db-new"
-    },
-    {
-        "k": "deDelete",
-        "ele": "import deDelete from '@/assets/svg/de-delete.svg'",
-        "v": "de-delete"
-    },
-    {
-        "k": "deDsError",
-        "ele": "import deDsError from '@/assets/svg/de-ds-error.svg'",
-        "v": "de-ds-error"
-    },
-    {
-        "k": "deDsMove",
-        "ele": "import deDsMove from '@/assets/svg/de-ds-move.svg'",
-        "v": "de-ds-move"
-    },
-    {
-        "k": "deDsRename",
-        "ele": "import deDsRename from '@/assets/svg/de-ds-rename.svg'",
-        "v": "de-ds-rename"
-    },
-    {
-        "k": "deDsTrash",
-        "ele": "import deDsTrash from '@/assets/svg/de-ds-trash.svg'",
-        "v": "de-ds-trash"
-    },
-    {
-        "k": "deDsWarning",
-        "ele": "import deDsWarning from '@/assets/svg/de-ds-warning.svg'",
-        "v": "de-ds-warning"
-    },
-    {
-        "k": "deExcelNew",
-        "ele": "import deExcelNew from '@/assets/svg/de-excel-new.svg'",
-        "v": "de-excel-new"
-    },
-    {
-        "k": "deJson",
-        "ele": "import deJson from '@/assets/svg/de-json.svg'",
-        "v": "de-json"
-    },
-    {
-        "k": "deMove",
-        "ele": "import deMove from '@/assets/svg/de-move.svg'",
-        "v": "de-move"
-    },
-    {
-        "k": "deSearch",
-        "ele": "import deSearch from '@/assets/svg/de-search.svg'",
-        "v": "de-search"
-    },
-    {
-        "k": "deSqlNew",
-        "ele": "import deSqlNew from '@/assets/svg/de-sql-new.svg'",
-        "v": "de-sql-new"
-    },
-    {
-        "k": "deUnionNew",
-        "ele": "import deUnionNew from '@/assets/svg/de-union-new.svg'",
-        "v": "de-union-new"
-    },
-    {
-        "k": "de_pwd_invisible",
-        "ele": "import de_pwd_invisible from '@/assets/svg/de_pwd_invisible.svg'",
-        "v": "de_pwd_invisible"
-    },
-    {
-        "k": "de_pwd_visible",
-        "ele": "import de_pwd_visible from '@/assets/svg/de_pwd_visible.svg'",
-        "v": "de_pwd_visible"
-    },
-    {
-        "k": "default_avatar",
-        "ele": "import default_avatar from '@/assets/svg/default_avatar.svg'",
-        "v": "default_avatar"
-    },
-    {
-        "k": "_delete",
-        "ele": "import _delete from '@/assets/svg/delete.svg'",
-        "v": "delete"
-    },
-    {
-        "k": "displaySetting",
-        "ele": "import displaySetting from '@/assets/svg/display-setting.svg'",
-        "v": "display-setting"
-    },
-    {
-        "k": "doc",
-        "ele": "import doc from '@/assets/svg/doc.svg'",
-        "v": "doc"
-    },
-    {
-        "k": "docs",
-        "ele": "import docs from '@/assets/svg/docs.svg'",
-        "v": "docs"
-    },
-    {
-        "k": "dorisDs",
-        "ele": "import dorisDs from '@/assets/svg/doris-ds.svg'",
-        "v": "doris-ds"
-    },
-    {
-        "k": "drag",
-        "ele": "import drag from '@/assets/svg/drag.svg'",
-        "v": "drag"
-    },
-    {
-        "k": "driverDe",
-        "ele": "import driverDe from '@/assets/svg/driver-de.svg'",
-        "v": "driver-de"
-    },
-    {
-        "k": "dsApi",
-        "ele": "import dsApi from '@/assets/svg/ds-api.svg'",
-        "v": "ds-api"
-    },
-    {
-        "k": "dsCustom",
-        "ele": "import dsCustom from '@/assets/svg/ds-custom.svg'",
-        "v": "ds-custom"
-    },
-    {
-        "k": "dsDb",
-        "ele": "import dsDb from '@/assets/svg/ds-db.svg'",
-        "v": "ds-db"
-    },
-    {
-        "k": "dsExcel",
-        "ele": "import dsExcel from '@/assets/svg/ds-excel.svg'",
-        "v": "ds-excel"
-    },
-    {
-        "k": "dsSql",
-        "ele": "import dsSql from '@/assets/svg/ds-sql.svg'",
-        "v": "ds-sql"
-    },
-    {
-        "k": "dsUnion",
-        "ele": "import dsUnion from '@/assets/svg/ds-union.svg'",
-        "v": "ds-union"
-    },
-    {
-        "k": "dvAiWindowMax",
-        "ele": "import dvAiWindowMax from '@/assets/svg/dv-ai-window-max.svg'",
-        "v": "dv-ai-window-max"
-    },
-    {
-        "k": "dvAiWindowMin",
-        "ele": "import dvAiWindowMin from '@/assets/svg/dv-ai-window-min.svg'",
-        "v": "dv-ai-window-min"
-    },
-    {
-        "k": "dvAi",
-        "ele": "import dvAi from '@/assets/svg/dv-ai.svg'",
-        "v": "dv-ai"
-    },
-    {
-        "k": "dvBarEnlarge",
-        "ele": "import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'",
-        "v": "dv-bar-enlarge"
-    },
-    {
-        "k": "dvBarUnLinkage",
-        "ele": "import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'",
-        "v": "dv-bar-unLinkage"
-    },
-    {
-        "k": "dvBatch",
-        "ele": "import dvBatch from '@/assets/svg/dv-batch.svg'",
-        "v": "dv-batch"
-    },
-    {
-        "k": "dvCopyDark",
-        "ele": "import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'",
-        "v": "dv-copy-dark"
-    },
-    {
-        "k": "dvCopy",
-        "ele": "import dvCopy from '@/assets/svg/dv-copy.svg'",
-        "v": "dv-copy"
-    },
-    {
-        "k": "dvDashboardSpineMobile",
-        "ele": "import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'",
-        "v": "dv-dashboard-spine-mobile"
-    },
-    {
-        "k": "dvDashboardSpine",
-        "ele": "import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'",
-        "v": "dv-dashboard-spine"
-    },
-    {
-        "k": "dvDashboard",
-        "ele": "import dvDashboard from '@/assets/svg/dv-dashboard.svg'",
-        "v": "dv-dashboard"
-    },
-    {
-        "k": "dvDelete",
-        "ele": "import dvDelete from '@/assets/svg/dv-delete.svg'",
-        "v": "dv-delete"
-    },
-    {
-        "k": "dvDetails",
-        "ele": "import dvDetails from '@/assets/svg/dv-details.svg'",
-        "v": "dv-details"
-    },
-    {
-        "k": "dvDragTips",
-        "ele": "import dvDragTips from '@/assets/svg/dv-drag-tips.svg'",
-        "v": "dv-drag-tips"
-    },
-    {
-        "k": "dvEdit",
-        "ele": "import dvEdit from '@/assets/svg/dv-edit.svg'",
-        "v": "dv-edit"
-    },
-    {
-        "k": "dvEmpty",
-        "ele": "import dvEmpty from '@/assets/svg/dv-empty.svg'",
-        "v": "dv-empty"
-    },
-    {
-        "k": "dvExpandDown",
-        "ele": "import dvExpandDown from '@/assets/svg/dv-expand-down.svg'",
-        "v": "dv-expand-down"
-    },
-    {
-        "k": "dvExpandRight",
-        "ele": "import dvExpandRight from '@/assets/svg/dv-expand-right.svg'",
-        "v": "dv-expand-right"
-    },
-    {
-        "k": "dvEyeClose",
-        "ele": "import dvEyeClose from '@/assets/svg/dv-eye-close.svg'",
-        "v": "dv-eye-close"
-    },
-    {
-        "k": "dvFilterShow",
-        "ele": "import dvFilterShow from '@/assets/svg/dv-filter-show.svg'",
-        "v": "dv-filter-show"
-    },
-    {
-        "k": "dvFilter",
-        "ele": "import dvFilter from '@/assets/svg/dv-filter.svg'",
-        "v": "dv-filter"
-    },
-    {
-        "k": "dvFolder",
-        "ele": "import dvFolder from '@/assets/svg/dv-folder.svg'",
-        "v": "dv-folder"
-    },
-    {
-        "k": "dvHeadMore",
-        "ele": "import dvHeadMore from '@/assets/svg/dv-head-more.svg'",
-        "v": "dv-head-more"
-    },
-    {
-        "k": "dvInfo",
-        "ele": "import dvInfo from '@/assets/svg/dv-info.svg'",
-        "v": "dv-info"
-    },
-    {
-        "k": "dvLinkTarget",
-        "ele": "import dvLinkTarget from '@/assets/svg/dv-link-target.svg'",
-        "v": "dv-link-target"
-    },
-    {
-        "k": "dvLock",
-        "ele": "import dvLock from '@/assets/svg/dv-lock.svg'",
-        "v": "dv-lock"
-    },
-    {
-        "k": "dvMaterial",
-        "ele": "import dvMaterial from '@/assets/svg/dv-material.svg'",
-        "v": "dv-material"
-    },
-    {
-        "k": "dvMax",
-        "ele": "import dvMax from '@/assets/svg/dv-max.svg'",
-        "v": "dv-max"
-    },
-    {
-        "k": "dvMedia",
-        "ele": "import dvMedia from '@/assets/svg/dv-media.svg'",
-        "v": "dv-media"
-    },
-    {
-        "k": "dvMin",
-        "ele": "import dvMin from '@/assets/svg/dv-min.svg'",
-        "v": "dv-min"
-    },
-    {
-        "k": "dvMoreCom",
-        "ele": "import dvMoreCom from '@/assets/svg/dv-more-com.svg'",
-        "v": "dv-more-com"
-    },
-    {
-        "k": "dvMoreTimeClock",
-        "ele": "import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'",
-        "v": "dv-more-time-clock"
-    },
-    {
-        "k": "dvMore",
-        "ele": "import dvMore from '@/assets/svg/dv-more.svg'",
-        "v": "dv-more"
-    },
-    {
-        "k": "dvMove",
-        "ele": "import dvMove from '@/assets/svg/dv-move.svg'",
-        "v": "dv-move"
-    },
-    {
-        "k": "dvNewFolder",
-        "ele": "import dvNewFolder from '@/assets/svg/dv-new-folder.svg'",
-        "v": "dv-new-folder"
-    },
-    {
-        "k": "dvNew",
-        "ele": "import dvNew from '@/assets/svg/dv-new.svg'",
-        "v": "dv-new"
-    },
-    {
-        "k": "dvNoImg",
-        "ele": "import dvNoImg from '@/assets/svg/dv-no-img.svg'",
-        "v": "dv-no-img"
-    },
-    {
-        "k": "dvNothing",
-        "ele": "import dvNothing from '@/assets/svg/dv-nothing.svg'",
-        "v": "dv-nothing"
-    },
-    {
-        "k": "dvParams",
-        "ele": "import dvParams from '@/assets/svg/dv-params.svg'",
-        "v": "dv-params"
-    },
-    {
-        "k": "dvPictureReal",
-        "ele": "import dvPictureReal from '@/assets/svg/dv-picture-real.svg'",
-        "v": "dv-picture-real"
-    },
-    {
-        "k": "dvPictureShow",
-        "ele": "import dvPictureShow from '@/assets/svg/dv-picture-show.svg'",
-        "v": "dv-picture-show"
-    },
-    {
-        "k": "dvPicture",
-        "ele": "import dvPicture from '@/assets/svg/dv-picture.svg'",
-        "v": "dv-picture"
-    },
-    {
-        "k": "dvPreviewDownload",
-        "ele": "import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'",
-        "v": "dv-preview-download"
-    },
-    {
-        "k": "dvPreviewInner",
-        "ele": "import dvPreviewInner from '@/assets/svg/dv-preview-inner.svg'",
-        "v": "dv-preview-inner"
-    },
-    {
-        "k": "dvPreviewOuter",
-        "ele": "import dvPreviewOuter from '@/assets/svg/dv-preview-outer.svg'",
-        "v": "dv-preview-outer"
-    },
-    {
-        "k": "dvPreview",
-        "ele": "import dvPreview from '@/assets/svg/dv-preview.svg'",
-        "v": "dv-preview"
-    },
-    {
-        "k": "dvRename",
-        "ele": "import dvRename from '@/assets/svg/dv-rename.svg'",
-        "v": "dv-rename"
-    },
-    {
-        "k": "dvReposition",
-        "ele": "import dvReposition from '@/assets/svg/dv-reposition.svg'",
-        "v": "dv-reposition"
-    },
-    {
-        "k": "dvRichText",
-        "ele": "import dvRichText from '@/assets/svg/dv-richText.svg'",
-        "v": "dv-richText"
-    },
-    {
-        "k": "dvRuler",
-        "ele": "import dvRuler from '@/assets/svg/dv-ruler.svg'",
-        "v": "dv-ruler"
-    },
-    {
-        "k": "dvScreenNew",
-        "ele": "import dvScreenNew from '@/assets/svg/dv-screen-new.svg'",
-        "v": "dv-screen-new"
-    },
-    {
-        "k": "dvScreenSpine",
-        "ele": "import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'",
-        "v": "dv-screen-spine"
-    },
-    {
-        "k": "dvScrollText",
-        "ele": "import dvScrollText from '@/assets/svg/dv-scroll-text.svg'",
-        "v": "dv-scroll-text"
-    },
-    {
-        "k": "dvShare",
-        "ele": "import dvShare from '@/assets/svg/dv-share.svg'",
-        "v": "dv-share"
-    },
-    {
-        "k": "dvShow",
-        "ele": "import dvShow from '@/assets/svg/dv-show.svg'",
-        "v": "dv-show"
-    },
-    {
-        "k": "dvSortAsc",
-        "ele": "import dvSortAsc from '@/assets/svg/dv-sort-asc.svg'",
-        "v": "dv-sort-asc"
-    },
-    {
-        "k": "dvSortDesc",
-        "ele": "import dvSortDesc from '@/assets/svg/dv-sort-desc.svg'",
-        "v": "dv-sort-desc"
-    },
-    {
-        "k": "dvStyleActiveFont",
-        "ele": "import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'",
-        "v": "dv-style-activeFont"
-    },
-    {
-        "k": "dvStyleActiveFontSize",
-        "ele": "import dvStyleActiveFontSize from '@/assets/svg/dv-style-activeFontSize.svg'",
-        "v": "dv-style-activeFontSize"
-    },
-    {
-        "k": "dvStyleBackgroundColor",
-        "ele": "import dvStyleBackgroundColor from '@/assets/svg/dv-style-backgroundColor.svg'",
-        "v": "dv-style-backgroundColor"
-    },
-    {
-        "k": "dvStyleBorderColor",
-        "ele": "import dvStyleBorderColor from '@/assets/svg/dv-style-borderColor.svg'",
-        "v": "dv-style-borderColor"
-    },
-    {
-        "k": "dvStyleBorderRadius",
-        "ele": "import dvStyleBorderRadius from '@/assets/svg/dv-style-borderRadius.svg'",
-        "v": "dv-style-borderRadius"
-    },
-    {
-        "k": "dvStyleBorderSize",
-        "ele": "import dvStyleBorderSize from '@/assets/svg/dv-style-borderSize.svg'",
-        "v": "dv-style-borderSize"
-    },
-    {
-        "k": "dvStyleBorderStyle",
-        "ele": "import dvStyleBorderStyle from '@/assets/svg/dv-style-borderStyle.svg'",
-        "v": "dv-style-borderStyle"
-    },
-    {
-        "k": "dvStyleColor",
-        "ele": "import dvStyleColor from '@/assets/svg/dv-style-color.svg'",
-        "v": "dv-style-color"
-    },
-    {
-        "k": "dvStyleFontFamily",
-        "ele": "import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'",
-        "v": "dv-style-fontFamily"
-    },
-    {
-        "k": "dvStyleFontSize",
-        "ele": "import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'",
-        "v": "dv-style-fontSize"
-    },
-    {
-        "k": "dvStyleFontWeight",
-        "ele": "import dvStyleFontWeight from '@/assets/svg/dv-style-fontWeight.svg'",
-        "v": "dv-style-fontWeight"
-    },
-    {
-        "k": "dvStyleHeadBorderActiveColor",
-        "ele": "import dvStyleHeadBorderActiveColor from '@/assets/svg/dv-style-headBorderActiveColor.svg'",
-        "v": "dv-style-headBorderActiveColor"
-    },
-    {
-        "k": "dvStyleHeadBorderColor",
-        "ele": "import dvStyleHeadBorderColor from '@/assets/svg/dv-style-headBorderColor.svg'",
-        "v": "dv-style-headBorderColor"
-    },
-    {
-        "k": "dvStyleHeadFontActiveColor",
-        "ele": "import dvStyleHeadFontActiveColor from '@/assets/svg/dv-style-headFontActiveColor.svg'",
-        "v": "dv-style-headFontActiveColor"
-    },
-    {
-        "k": "dvStyleHeadFontColor",
-        "ele": "import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'",
-        "v": "dv-style-headFontColor"
-    },
-    {
-        "k": "dvStyleHeadHorizontalPosition",
-        "ele": "import dvStyleHeadHorizontalPosition from '@/assets/svg/dv-style-headHorizontalPosition.svg'",
-        "v": "dv-style-headHorizontalPosition"
-    },
-    {
-        "k": "dvStyleLetterSpacing",
-        "ele": "import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'",
-        "v": "dv-style-letterSpacing"
-    },
-    {
-        "k": "dvStyleLineHeight",
-        "ele": "import dvStyleLineHeight from '@/assets/svg/dv-style-lineHeight.svg'",
-        "v": "dv-style-lineHeight"
-    },
-    {
-        "k": "dvStyleOpacity",
-        "ele": "import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'",
-        "v": "dv-style-opacity"
-    },
-    {
-        "k": "dvStyleScrollSpeed",
-        "ele": "import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'",
-        "v": "dv-style-scroll-speed"
-    },
-    {
-        "k": "dvStyleTextAlign",
-        "ele": "import dvStyleTextAlign from '@/assets/svg/dv-style-textAlign.svg'",
-        "v": "dv-style-textAlign"
-    },
-    {
-        "k": "dvTabShow",
-        "ele": "import dvTabShow from '@/assets/svg/dv-tab-show.svg'",
-        "v": "dv-tab-show"
-    },
-    {
-        "k": "dvTab",
-        "ele": "import dvTab from '@/assets/svg/dv-tab.svg'",
-        "v": "dv-tab"
-    },
-    {
-        "k": "dvText",
-        "ele": "import dvText from '@/assets/svg/dv-text.svg'",
-        "v": "dv-text"
-    },
-    {
-        "k": "dvUnlock",
-        "ele": "import dvUnlock from '@/assets/svg/dv-unlock.svg'",
-        "v": "dv-unlock"
-    },
-    {
-        "k": "dvUpArrow",
-        "ele": "import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'",
-        "v": "dv-up-arrow"
-    },
-    {
-        "k": "dvUseTemplate",
-        "ele": "import dvUseTemplate from '@/assets/svg/dv-use-template.svg'",
-        "v": "dv-use-template"
-    },
-    {
-        "k": "dvVideo",
-        "ele": "import dvVideo from '@/assets/svg/dv-video.svg'",
-        "v": "dv-video"
-    },
-    {
-        "k": "dvView",
-        "ele": "import dvView from '@/assets/svg/dv-view.svg'",
-        "v": "dv-view"
-    },
-    {
-        "k": "dv_mobile_layout",
-        "ele": "import dv_mobile_layout from '@/assets/svg/dv_mobile_layout.svg'",
-        "v": "dv_mobile_layout"
-    },
-    {
-        "k": "editDone",
-        "ele": "import editDone from '@/assets/svg/edit-done.svg'",
-        "v": "edit-done"
-    },
-    {
-        "k": "editIn",
-        "ele": "import editIn from '@/assets/svg/edit-in.svg'",
-        "v": "edit-in"
-    },
-    {
-        "k": "edit",
-        "ele": "import edit from '@/assets/svg/edit.svg'",
-        "v": "edit"
-    },
-    {
-        "k": "emailTask",
-        "ele": "import emailTask from '@/assets/svg/email-task.svg'",
-        "v": "email-task"
-    },
-    {
-        "k": "embedded",
-        "ele": "import embedded from '@/assets/svg/embedded.svg'",
-        "v": "embedded"
-    },
-    {
-        "k": "association",
-        "ele": "import association from '@/assets/svg/association.svg'",
-        "v": "association"
-    },
-    {
-        "k": "threshold",
-        "ele": "import threshold from '@/assets/svg/threshold.svg'",
-        "v": "threshold"
-    },
-    {
-        "k": "threshold_full",
-        "ele": "import threshold_full from '@/assets/svg/threshold_full.svg'",
-        "v": "threshold_full"
-    },
-    {
-        "k": "example",
-        "ele": "import example from '@/assets/svg/example.svg'",
-        "v": "example"
-    },
-    {
-        "k": "exclamationmark",
-        "ele": "import exclamationmark from '@/assets/svg/exclamationmark.svg'",
-        "v": "exclamationmark"
-    },
-    {
-        "k": "exclamationmark2",
-        "ele": "import exclamationmark2 from '@/assets/svg/exclamationmark2.svg'",
-        "v": "exclamationmark2"
-    },
-    {
-        "k": "exitFullscreen",
-        "ele": "import exitFullscreen from '@/assets/svg/exit-fullscreen.svg'",
-        "v": "exit-fullscreen"
-    },
-    {
-        "k": "eyeOpen",
-        "ele": "import eyeOpen from '@/assets/svg/eye-open.svg'",
-        "v": "eye-open"
-    },
-    {
-        "k": "eye",
-        "ele": "import eye from '@/assets/svg/eye.svg'",
-        "v": "eye"
-    },
-    {
-        "k": "field_location",
-        "ele": "import field_location from '@/assets/svg/field_location.svg'",
-        "v": "field_location"
-    },
-    {
-        "k": "field_text",
-        "ele": "import field_text from '@/assets/svg/field_text.svg'",
-        "v": "field_text"
-    },
-    {
-        "k": "field_time",
-        "ele": "import field_time from '@/assets/svg/field_time.svg'",
-        "v": "field_time"
-    },
-    {
-        "k": "field_value",
-        "ele": "import field_value from '@/assets/svg/field_value.svg'",
-        "v": "field_value"
-    },
-    {
-        "k": "field_url",
-        "ele": "import field_url from '@/assets/svg/field_url.svg'",
-        "v": "field_url"
-    },
-    {
-        "k": "filterCenter",
-        "ele": "import filterCenter from '@/assets/svg/filter-center.svg'",
-        "v": "filter-center"
-    },
-    {
-        "k": "filterHCenter",
-        "ele": "import filterHCenter from '@/assets/svg/filter-h-center.svg'",
-        "v": "filter-h-center"
-    },
-    {
-        "k": "filterHLeft",
-        "ele": "import filterHLeft from '@/assets/svg/filter-h-left.svg'",
-        "v": "filter-h-left"
-    },
-    {
-        "k": "filterHRight",
-        "ele": "import filterHRight from '@/assets/svg/filter-h-right.svg'",
-        "v": "filter-h-right"
-    },
-    {
-        "k": "filterTop",
-        "ele": "import filterTop from '@/assets/svg/filter-top.svg'",
-        "v": "filter-top"
-    },
-    {
-        "k": "filter",
-        "ele": "import filter from '@/assets/svg/filter.svg'",
-        "v": "filter"
-    },
-    {
-        "k": "filterParams",
-        "ele": "import filterParams from '@/assets/svg/filter-params.svg'",
-        "v": "filter-params"
-    },
-    {
-        "k": "flowMapDark",
-        "ele": "import flowMapDark from '@/assets/svg/flow-map-dark.svg'",
-        "v": "flow-map-dark"
-    },
-    {
-        "k": "flowMapOrigin",
-        "ele": "import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'",
-        "v": "flow-map-origin"
-    },
-    {
-        "k": "flowMap",
-        "ele": "import flowMap from '@/assets/svg/flow-map.svg'",
-        "v": "flow-map"
-    },
-    {
-        "k": "folder",
-        "ele": "import folder from '@/assets/svg/folder.svg'",
-        "v": "folder"
-    },
-    {
-        "k": "form",
-        "ele": "import form from '@/assets/svg/form.svg'",
-        "v": "form"
-    },
-    {
-        "k": "fullscreen",
-        "ele": "import fullscreen from '@/assets/svg/fullscreen.svg'",
-        "v": "fullscreen"
-    },
-    {
-        "k": "funnelDark",
-        "ele": "import funnelDark from '@/assets/svg/funnel-dark.svg'",
-        "v": "funnel-dark"
-    },
-    {
-        "k": "funnelOrigin",
-        "ele": "import funnelOrigin from '@/assets/svg/funnel-origin.svg'",
-        "v": "funnel-origin"
-    },
-    {
-        "k": "funnel",
-        "ele": "import funnel from '@/assets/svg/funnel.svg'",
-        "v": "funnel"
-    },
-    {
-        "k": "gaugeDark",
-        "ele": "import gaugeDark from '@/assets/svg/gauge-dark.svg'",
-        "v": "gauge-dark"
-    },
-    {
-        "k": "gaugeOrigin",
-        "ele": "import gaugeOrigin from '@/assets/svg/gauge-origin.svg'",
-        "v": "gauge-origin"
-    },
-    {
-        "k": "gauge",
-        "ele": "import gauge from '@/assets/svg/gauge.svg'",
-        "v": "gauge"
-    },
-    {
-        "k": "graphicalCircular",
-        "ele": "import graphicalCircular from '@/assets/svg/graphical-circular.svg'",
-        "v": "graphical-circular"
-    },
-    {
-        "k": "graphicalRect",
-        "ele": "import graphicalRect from '@/assets/svg/graphical-rect.svg'",
-        "v": "graphical-rect"
-    },
-    {
-        "k": "graphicalTriangle",
-        "ele": "import graphicalTriangle from '@/assets/svg/graphical-triangle.svg'",
-        "v": "graphical-triangle"
-    },
-    {
-        "k": "group3400",
-        "ele": "import group3400 from '@/assets/svg/group-3400.svg'",
-        "v": "group-3400"
-    },
-    {
-        "k": "group",
-        "ele": "import group from '@/assets/svg/group.svg'",
-        "v": "group"
-    },
-    {
-        "k": "heatMapDark",
-        "ele": "import heatMapDark from '@/assets/svg/heat-map-dark.svg'",
-        "v": "heat-map-dark"
-    },
-    {
-        "k": "heatMapOrigin",
-        "ele": "import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'",
-        "v": "heat-map-origin"
-    },
-    {
-        "k": "heatMap",
-        "ele": "import heatMap from '@/assets/svg/heat-map.svg'",
-        "v": "heat-map"
-    },
-    {
-        "k": "iconCtrlClose",
-        "ele": "import iconCtrlClose from '@/assets/svg/icon/ctrl/close.svg'",
-        "v": "icon/ctrl/close"
-    },
-    {
-        "k": "iconOutlineNotification",
-        "ele": "import iconOutlineNotification from '@/assets/svg/icon/outline/notification.svg'",
-        "v": "icon/outline/notification"
-    },
-    {
-        "k": "iconAlarmclock",
-        "ele": "import iconAlarmclock from '@/assets/svg/icon-alarmclock.svg'",
-        "v": "icon-alarmclock"
-    },
-    {
-        "k": "iconContacts",
-        "ele": "import iconContacts from '@/assets/svg/icon-contacts.svg'",
-        "v": "icon-contacts"
-    },
-    {
-        "k": "iconDraft",
-        "ele": "import iconDraft from '@/assets/svg/icon-draft.svg'",
-        "v": "icon-draft"
-    },
-    {
-        "k": "iconFilter",
-        "ele": "import iconFilter from '@/assets/svg/icon-filter.svg'",
-        "v": "icon-filter"
-    },
-    {
-        "k": "iconGroup",
-        "ele": "import iconGroup from '@/assets/svg/icon-group.svg'",
-        "v": "icon-group"
-    },
-    {
-        "k": "iconImageUpload",
-        "ele": "import iconImageUpload from '@/assets/svg/icon-image-upload.svg'",
-        "v": "icon-image-upload"
-    },
-    {
-        "k": "iconImage",
-        "ele": "import iconImage from '@/assets/svg/icon-image.svg'",
-        "v": "icon-image"
-    },
-    {
-        "k": "iconLaser",
-        "ele": "import iconLaser from '@/assets/svg/icon-laser.svg'",
-        "v": "icon-laser"
-    },
-    {
-        "k": "iconLock",
-        "ele": "import iconLock from '@/assets/svg/icon-lock.svg'",
-        "v": "icon-lock"
-    },
-    {
-        "k": "iconMaybe",
-        "ele": "import iconMaybe from '@/assets/svg/icon-maybe.svg'",
-        "v": "icon-maybe"
-    },
-    {
-        "k": "iconMaybe_outlined",
-        "ele": "import iconMaybe_outlined from '@/assets/svg/icon-maybe_outlined.svg'",
-        "v": "icon-maybe_outlined"
-    },
-    {
-        "k": "iconMore",
-        "ele": "import iconMore from '@/assets/svg/icon-more.svg'",
-        "v": "icon-more"
-    },
-    {
-        "k": "iconQuicksetting",
-        "ele": "import iconQuicksetting from '@/assets/svg/icon-quicksetting.svg'",
-        "v": "icon-quicksetting"
-    },
-    {
-        "k": "iconSetting",
-        "ele": "import iconSetting from '@/assets/svg/icon-setting.svg'",
-        "v": "icon-setting"
-    },
-    {
-        "k": "iconStream",
-        "ele": "import iconStream from '@/assets/svg/icon-stream.svg'",
-        "v": "icon-stream"
-    },
-    {
-        "k": "iconVideo",
-        "ele": "import iconVideo from '@/assets/svg/icon-video.svg'",
-        "v": "icon-video"
-    },
-    {
-        "k": "icon_Batch_outlined",
-        "ele": "import icon_Batch_outlined from '@/assets/svg/icon_Batch_outlined.svg'",
-        "v": "icon_Batch_outlined"
-    },
-    {
-        "k": "icon_Invalid_colorful",
-        "ele": "import icon_Invalid_colorful from '@/assets/svg/icon_Invalid_colorful.svg'",
-        "v": "icon_Invalid_colorful"
-    },
-    {
-        "k": "icon_addDictionary_outlined",
-        "ele": "import icon_addDictionary_outlined from '@/assets/svg/icon_add-dictionary_outlined.svg'",
-        "v": "icon_add-dictionary_outlined"
-    },
-    {
-        "k": "icon_addEntry_outlined",
-        "ele": "import icon_addEntry_outlined from '@/assets/svg/icon_add-entry_outlined.svg'",
-        "v": "icon_add-entry_outlined"
-    },
-    {
-        "k": "icon_addFolder_outlined",
-        "ele": "import icon_addFolder_outlined from '@/assets/svg/icon_add-folder_outlined.svg'",
-        "v": "icon_add-folder_outlined"
-    },
-    {
-        "k": "icon_add_outlined1",
-        "ele": "import icon_add_outlined1 from '@/assets/svg/icon_add_outlined-1.svg'",
-        "v": "icon_add_outlined-1"
-    },
-    {
-        "k": "icon_add_outlined",
-        "ele": "import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'",
-        "v": "icon_add_outlined"
-    },
-    {
-        "k": "icon_admin_outlined",
-        "ele": "import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'",
-        "v": "icon_admin_outlined"
-    },
-    {
-        "k": "icon_apiOutlined",
-        "ele": "import icon_apiOutlined from '@/assets/svg/icon_api-outlined.svg'",
-        "v": "icon_api-outlined"
-    },
-    {
-        "k": "icon_api",
-        "ele": "import icon_api from '@/assets/svg/icon_api.svg'",
-        "v": "icon_api"
-    },
-    {
-        "k": "icon_app_outlined",
-        "ele": "import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'",
-        "v": "icon_app_outlined"
-    },
-    {
-        "k": "icon_arrowRight_outlined",
-        "ele": "import icon_arrowRight_outlined from '@/assets/svg/icon_arrow-right_outlined.svg'",
-        "v": "icon_arrow-right_outlined"
-    },
-    {
-        "k": "icon_assigned_outlined",
-        "ele": "import icon_assigned_outlined from '@/assets/svg/icon_assigned_outlined.svg'",
-        "v": "icon_assigned_outlined"
-    },
-    {
-        "k": "icon_attachment_outlined",
-        "ele": "import icon_attachment_outlined from '@/assets/svg/icon_attachment_outlined.svg'",
-        "v": "icon_attachment_outlined"
-    },
-    {
-        "k": "icon_bold_outlined",
-        "ele": "import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'",
-        "v": "icon_bold_outlined"
-    },
-    {
-        "k": "icon_bottomAlign_outlined",
-        "ele": "import icon_bottomAlign_outlined from '@/assets/svg/icon_bottom-align_outlined.svg'",
-        "v": "icon_bottom-align_outlined"
-    },
-    {
-        "k": "icon_calendar_outlined",
-        "ele": "import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'",
-        "v": "icon_calendar_outlined"
-    },
-    {
-        "k": "icon_cancel_store",
-        "ele": "import icon_cancel_store from '@/assets/svg/icon_cancel_store.svg'",
-        "v": "icon_cancel_store"
-    },
-    {
-        "k": "icon_card_outlined",
-        "ele": "import icon_card_outlined from '@/assets/svg/icon_card_outlined.svg'",
-        "v": "icon_card_outlined"
-    },
-    {
-        "k": "icon_centerAlignment_outlined",
-        "ele": "import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'",
-        "v": "icon_center-alignment_outlined"
-    },
-    {
-        "k": "icon_chartLineC",
-        "ele": "import icon_chartLineC from '@/assets/svg/icon_chart-line-c.svg'",
-        "v": "icon_chart-line-c"
-    },
-    {
-        "k": "icon_chartLine",
-        "ele": "import icon_chartLine from '@/assets/svg/icon_chart-line.svg'",
-        "v": "icon_chart-line"
-    },
-    {
-        "k": "icon_clear_outlined",
-        "ele": "import icon_clear_outlined from '@/assets/svg/icon_clear_outlined.svg'",
-        "v": "icon_clear_outlined"
-    },
-    {
-        "k": "icon_close_filled",
-        "ele": "import icon_close_filled from '@/assets/svg/icon_close_filled.svg'",
-        "v": "icon_close_filled"
-    },
-    {
-        "k": "icon_close_outlined",
-        "ele": "import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'",
-        "v": "icon_close_outlined"
-    },
-    {
-        "k": "icon_collect_filled",
-        "ele": "import icon_collect_filled from '@/assets/svg/icon_collect_filled.svg'",
-        "v": "icon_collect_filled"
-    },
-    {
-        "k": "icon_collection_outlined",
-        "ele": "import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'",
-        "v": "icon_collection_outlined"
-    },
-    {
-        "k": "icon_copy_filled",
-        "ele": "import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'",
-        "v": "icon_copy_filled"
-    },
-    {
-        "k": "icon_copy_outlined",
-        "ele": "import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'",
-        "v": "icon_copy_outlined"
-    },
-    {
-        "k": "icon_customize",
-        "ele": "import icon_customize from '@/assets/svg/icon_customize.svg'",
-        "v": "icon_customize"
-    },
-    {
-        "k": "icon_dashboard",
-        "ele": "import icon_dashboard from '@/assets/svg/icon_dashboard.svg'",
-        "v": "icon_dashboard"
-    },
-    {
-        "k": "icon_dashboard_outlinedC",
-        "ele": "import icon_dashboard_outlinedC from '@/assets/svg/icon_dashboard_outlined-c.svg'",
-        "v": "icon_dashboard_outlined-c"
-    },
-    {
-        "k": "icon_dashboard_outlined",
-        "ele": "import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'",
-        "v": "icon_dashboard_outlined"
-    },
-    {
-        "k": "icon_databaseAlert_filled",
-        "ele": "import icon_databaseAlert_filled from '@/assets/svg/icon_database-alert_filled.svg'",
-        "v": "icon_database-alert_filled"
-    },
-    {
-        "k": "icon_databaseFail_filled",
-        "ele": "import icon_databaseFail_filled from '@/assets/svg/icon_database-fail_filled.svg'",
-        "v": "icon_database-fail_filled"
-    },
-    {
-        "k": "icon_database",
-        "ele": "import icon_database from '@/assets/svg/icon_database.svg'",
-        "v": "icon_database"
-    },
-    {
-        "k": "icon_database_outlined",
-        "ele": "import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'",
-        "v": "icon_database_outlined"
-    },
-    {
-        "k": "icon_dataset",
-        "ele": "import icon_dataset from '@/assets/svg/icon_dataset.svg'",
-        "v": "icon_dataset"
-    },
-    {
-        "k": "icon_dataset_outlined",
-        "ele": "import icon_dataset_outlined from '@/assets/svg/icon_dataset_outlined.svg'",
-        "v": "icon_dataset_outlined"
-    },
-    {
-        "k": "icon_db_filled",
-        "ele": "import icon_db_filled from '@/assets/svg/icon_db_filled.svg'",
-        "v": "icon_db_filled"
-    },
-    {
-        "k": "icon_deleteTrash_outlined",
-        "ele": "import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'",
-        "v": "icon_delete-trash_outlined"
-    },
-    {
-        "k": "icon_describe_outlined",
-        "ele": "import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'",
-        "v": "icon_describe_outlined"
-    },
-    {
-        "k": "icon_dialpad_outlined",
-        "ele": "import icon_dialpad_outlined from '@/assets/svg/icon_dialpad_outlined.svg'",
-        "v": "icon_dialpad_outlined"
-    },
-    {
-        "k": "icon_disordeList_outlined",
-        "ele": "import icon_disordeList_outlined from '@/assets/svg/icon_disorde-list_outlined.svg'",
-        "v": "icon_disorde-list_outlined"
-    },
-    {
-        "k": "icon_divider_outlined",
-        "ele": "import icon_divider_outlined from '@/assets/svg/icon_divider_outlined.svg'",
-        "v": "icon_divider_outlined"
-    },
-    {
-        "k": "icon_docReplace_outlined",
-        "ele": "import icon_docReplace_outlined from '@/assets/svg/icon_doc-replace_outlined.svg'",
-        "v": "icon_doc-replace_outlined"
-    },
-    {
-        "k": "icon_done_outlined",
-        "ele": "import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'",
-        "v": "icon_done_outlined"
-    },
-    {
-        "k": "icon_downRight_outlined",
-        "ele": "import icon_downRight_outlined from '@/assets/svg/icon_down-right_outlined.svg'",
-        "v": "icon_down-right_outlined"
-    },
-    {
-        "k": "icon_down_outlined1",
-        "ele": "import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'",
-        "v": "icon_down_outlined-1"
-    },
-    {
-        "k": "icon_down_outlined",
-        "ele": "import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'",
-        "v": "icon_down_outlined"
-    },
-    {
-        "k": "icon_download_outlined",
-        "ele": "import icon_download_outlined from '@/assets/svg/icon_download_outlined.svg'",
-        "v": "icon_download_outlined"
-    },
-    {
-        "k": "icon_drag_outlined",
-        "ele": "import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'",
-        "v": "icon_drag_outlined"
-    },
-    {
-        "k": "icon_drilling_outlined",
-        "ele": "import icon_drilling_outlined from '@/assets/svg/icon_drilling_outlined.svg'",
-        "v": "icon_drilling_outlined"
-    },
-    {
-        "k": "icon_drive_filled",
-        "ele": "import icon_drive_filled from '@/assets/svg/icon_drive_filled.svg'",
-        "v": "icon_drive_filled"
-    },
-    {
-        "k": "icon_edit_outlined",
-        "ele": "import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'",
-        "v": "icon_edit_outlined"
-    },
-    {
-        "k": "icon_effects_outlined",
-        "ele": "import icon_effects_outlined from '@/assets/svg/icon_effects_outlined.svg'",
-        "v": "icon_effects_outlined"
-    },
-    {
-        "k": "icon_excel",
-        "ele": "import icon_excel from '@/assets/svg/icon_excel.svg'",
-        "v": "icon_excel"
-    },
-    {
-        "k": "icon_excel_outlined",
-        "ele": "import icon_excel_outlined from '@/assets/svg/icon_excel_outlined.svg'",
-        "v": "icon_excel_outlined"
-    },
-    {
-        "k": "icon_expandDown_filled",
-        "ele": "import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'",
-        "v": "icon_expand-down_filled"
-    },
-    {
-        "k": "icon_expandLeft_filled",
-        "ele": "import icon_expandLeft_filled from '@/assets/svg/icon_expand-left_filled.svg'",
-        "v": "icon_expand-left_filled"
-    },
-    {
-        "k": "icon_expandRight_filled",
-        "ele": "import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'",
-        "v": "icon_expand-right_filled"
-    },
-    {
-        "k": "icon_fileAdd_outlined",
-        "ele": "import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'",
-        "v": "icon_file-add_outlined"
-    },
-    {
-        "k": "icon_fileExcel_colorful",
-        "ele": "import icon_fileExcel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'",
-        "v": "icon_file-excel_colorful"
-    },
-    {
-        "k": "icon_folder_filled",
-        "ele": "import icon_folder_filled from '@/assets/svg/icon_folder_filled.svg'",
-        "v": "icon_folder_filled"
-    },
-    {
-        "k": "icon_fontColor_outlined",
-        "ele": "import icon_fontColor_outlined from '@/assets/svg/icon_font-color_outlined.svg'",
-        "v": "icon_font-color_outlined"
-    },
-    {
-        "k": "icon_form_outlined",
-        "ele": "import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'",
-        "v": "icon_form_outlined"
-    },
-    {
-        "k": "icon_fullAssociation",
-        "ele": "import icon_fullAssociation from '@/assets/svg/icon_full-association.svg'",
-        "v": "icon_full-association"
-    },
-    {
-        "k": "icon_functions_outlined",
-        "ele": "import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'",
-        "v": "icon_functions_outlined"
-    },
-    {
-        "k": "icon_graphical",
-        "ele": "import icon_graphical from '@/assets/svg/icon_graphical.svg'",
-        "v": "icon_graphical"
-    },
-    {
-        "k": "icon_gridlines_outlined",
-        "ele": "import icon_gridlines_outlined from '@/assets/svg/icon_gridlines_outlined.svg'",
-        "v": "icon_gridlines_outlined"
-    },
-    {
-        "k": "icon_h1_outlined",
-        "ele": "import icon_h1_outlined from '@/assets/svg/icon_h1_outlined.svg'",
-        "v": "icon_h1_outlined"
-    },
-    {
-        "k": "icon_h2_outlined",
-        "ele": "import icon_h2_outlined from '@/assets/svg/icon_h2_outlined.svg'",
-        "v": "icon_h2_outlined"
-    },
-    {
-        "k": "icon_h3_outlined",
-        "ele": "import icon_h3_outlined from '@/assets/svg/icon_h3_outlined.svg'",
-        "v": "icon_h3_outlined"
-    },
-    {
-        "k": "icon_hn_outlined",
-        "ele": "import icon_hn_outlined from '@/assets/svg/icon_hn_outlined.svg'",
-        "v": "icon_hn_outlined"
-    },
-    {
-        "k": "icon_horizontalAlign_outlined",
-        "ele": "import icon_horizontalAlign_outlined from '@/assets/svg/icon_horizontal-align_outlined.svg'",
-        "v": "icon_horizontal-align_outlined"
-    },
-    {
-        "k": "icon_info_colorful",
-        "ele": "import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'",
-        "v": "icon_info_colorful"
-    },
-    {
-        "k": "icon_info_filled",
-        "ele": "import icon_info_filled from '@/assets/svg/icon_info_filled.svg'",
-        "v": "icon_info_filled"
-    },
-    {
-        "k": "icon_info_outlined",
-        "ele": "import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'",
-        "v": "icon_info_outlined"
-    },
-    {
-        "k": "icon_intersect",
-        "ele": "import icon_intersect from '@/assets/svg/icon_intersect.svg'",
-        "v": "icon_intersect"
-    },
-    {
-        "k": "icon_intoItem_outlined",
-        "ele": "import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'",
-        "v": "icon_into-item_outlined"
-    },
-    {
-        "k": "icon_invisible_outlined",
-        "ele": "import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'",
-        "v": "icon_invisible_outlined"
-    },
-    {
-        "k": "icon_italic_outlined",
-        "ele": "import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'",
-        "v": "icon_italic_outlined"
-    },
-    {
-        "k": "icon_leftAlign_outlined",
-        "ele": "import icon_leftAlign_outlined from '@/assets/svg/icon_left-align_outlined.svg'",
-        "v": "icon_left-align_outlined"
-    },
-    {
-        "k": "icon_leftAlignment_outlined",
-        "ele": "import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'",
-        "v": "icon_left-alignment_outlined"
-    },
-    {
-        "k": "icon_leftAssociation",
-        "ele": "import icon_leftAssociation from '@/assets/svg/icon_left-association.svg'",
-        "v": "icon_left-association"
-    },
-    {
-        "k": "icon_left_outlined",
-        "ele": "import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'",
-        "v": "icon_left_outlined"
-    },
-    {
-        "k": "icon_letterSpacing_outlined",
-        "ele": "import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'",
-        "v": "icon_letter-spacing_outlined"
-    },
-    {
-        "k": "icon_linkRecord",
-        "ele": "import icon_linkRecord from '@/assets/svg/icon_link-record.svg'",
-        "v": "icon_link-record"
-    },
-    {
-        "k": "icon_linkRecord_outlined1",
-        "ele": "import icon_linkRecord_outlined1 from '@/assets/svg/icon_link-record_outlined-1.svg'",
-        "v": "icon_link-record_outlined-1"
-    },
-    {
-        "k": "icon_linkRecord_outlined",
-        "ele": "import icon_linkRecord_outlined from '@/assets/svg/icon_link-record_outlined.svg'",
-        "v": "icon_link-record_outlined"
-    },
-    {
-        "k": "icon_loading_outlined",
-        "ele": "import icon_loading_outlined from '@/assets/svg/icon_loading_outlined.svg'",
-        "v": "icon_loading_outlined"
-    },
-    {
-        "k": "icon_local",
-        "ele": "import icon_local from '@/assets/svg/icon_local.svg'",
-        "v": "icon_local"
-    },
-    {
-        "k": "icon_local_outlined",
-        "ele": "import icon_local_outlined from '@/assets/svg/icon_local_outlined.svg'",
-        "v": "icon_local_outlined"
-    },
-    {
-        "k": "icon_logs_outlined1",
-        "ele": "import icon_logs_outlined1 from '@/assets/svg/icon_logs_outlined-1.svg'",
-        "v": "icon_logs_outlined-1"
-    },
-    {
-        "k": "icon_logs_outlined",
-        "ele": "import icon_logs_outlined from '@/assets/svg/icon_logs_outlined.svg'",
-        "v": "icon_logs_outlined"
-    },
-    {
-        "k": "icon_magnify_outlined",
-        "ele": "import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'",
-        "v": "icon_magnify_outlined"
-    },
-    {
-        "k": "icon_memberAdd_outlined",
-        "ele": "import icon_memberAdd_outlined from '@/assets/svg/icon_member-add_outlined.svg'",
-        "v": "icon_member-add_outlined"
-    },
-    {
-        "k": "icon_member_filled",
-        "ele": "import icon_member_filled from '@/assets/svg/icon_member_filled.svg'",
-        "v": "icon_member_filled"
-    },
-    {
-        "k": "icon_minify_outlined",
-        "ele": "import icon_minify_outlined from '@/assets/svg/icon_minify_outlined.svg'",
-        "v": "icon_minify_outlined"
-    },
-    {
-        "k": "icon_momentsCategories_outlined",
-        "ele": "import icon_momentsCategories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'",
-        "v": "icon_moments-categories_outlined"
-    },
-    {
-        "k": "icon_moreVertical_outlined",
-        "ele": "import icon_moreVertical_outlined from '@/assets/svg/icon_more-vertical_outlined.svg'",
-        "v": "icon_more-vertical_outlined"
-    },
-    {
-        "k": "icon_more_outlined",
-        "ele": "import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'",
-        "v": "icon_more_outlined"
-    },
-    {
-        "k": "icon_newItem_outlined",
-        "ele": "import icon_newItem_outlined from '@/assets/svg/icon_new-item_outlined.svg'",
-        "v": "icon_new-item_outlined"
-    },
-    {
-        "k": "icon_number_outlined",
-        "ele": "import icon_number_outlined from '@/assets/svg/icon_number_outlined.svg'",
-        "v": "icon_number_outlined"
-    },
-    {
-        "k": "icon_url_outlined",
-        "ele": "import icon_url_outlined from '@/assets/svg/icon_url_outlined.svg'",
-        "v": "icon_url_outlined"
-    },
-    {
-        "k": "icon_operationAnalysis_outlined",
-        "ele": "import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'",
-        "v": "icon_operation-analysis_outlined"
-    },
-    {
-        "k": "icon_ordeList_outlined",
-        "ele": "import icon_ordeList_outlined from '@/assets/svg/icon_orde-list_outlined.svg'",
-        "v": "icon_orde-list_outlined"
-    },
-    {
-        "k": "icon_organization_outlined",
-        "ele": "import icon_organization_outlined from '@/assets/svg/icon_organization_outlined.svg'",
-        "v": "icon_organization_outlined"
-    },
-    {
-        "k": "icon_params_setting",
-        "ele": "import icon_params_setting from '@/assets/svg/icon_params_setting.svg'",
-        "v": "icon_params_setting"
-    },
-    {
-        "k": "icon_pc_fullscreen",
-        "ele": "import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'",
-        "v": "icon_pc_fullscreen"
-    },
-    {
-        "k": "icon_pc_outlined",
-        "ele": "import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'",
-        "v": "icon_pc_outlined"
-    },
-    {
-        "k": "icon_pc_outlined_copy",
-        "ele": "import icon_pc_outlined_copy from '@/assets/svg/icon_pc_outlined_copy.svg'",
-        "v": "icon_pc_outlined_copy"
-    },
-    {
-        "k": "icon_phone_outlined",
-        "ele": "import icon_phone_outlined from '@/assets/svg/icon_phone_outlined.svg'",
-        "v": "icon_phone_outlined"
-    },
-    {
-        "k": "icon_pie_outlinedC",
-        "ele": "import icon_pie_outlinedC from '@/assets/svg/icon_pie_outlined-c.svg'",
-        "v": "icon_pie_outlined-c"
-    },
-    {
-        "k": "icon_playRound_filled",
-        "ele": "import icon_playRound_filled from '@/assets/svg/icon_play-round_filled.svg'",
-        "v": "icon_play-round_filled"
-    },
-    {
-        "k": "icon_playRound_outlined",
-        "ele": "import icon_playRound_outlined from '@/assets/svg/icon_play-round_outlined.svg'",
-        "v": "icon_play-round_outlined"
-    },
-    {
-        "k": "icon_plugin_outlined",
-        "ele": "import icon_plugin_outlined from '@/assets/svg/icon_plugin_outlined.svg'",
-        "v": "icon_plugin_outlined"
-    },
-    {
-        "k": "icon_pullLeft_outlined",
-        "ele": "import icon_pullLeft_outlined from '@/assets/svg/icon_pull-left_outlined.svg'",
-        "v": "icon_pull-left_outlined"
-    },
-    {
-        "k": "icon_pullRight_outlined",
-        "ele": "import icon_pullRight_outlined from '@/assets/svg/icon_pull-right_outlined.svg'",
-        "v": "icon_pull-right_outlined"
-    },
-    {
-        "k": "icon_qr_outlined",
-        "ele": "import icon_qr_outlined from '@/assets/svg/icon_qr_outlined.svg'",
-        "v": "icon_qr_outlined"
-    },
-    {
-        "k": "icon_redo_outlined",
-        "ele": "import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'",
-        "v": "icon_redo_outlined"
-    },
-    {
-        "k": "icon_refresh_outlined",
-        "ele": "import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'",
-        "v": "icon_refresh_outlined"
-    },
-    {
-        "k": "icon_rename_outlined",
-        "ele": "import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'",
-        "v": "icon_rename_outlined"
-    },
-    {
-        "k": "icon_replace_outlined",
-        "ele": "import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'",
-        "v": "icon_replace_outlined"
-    },
-    {
-        "k": "icon_reset_outlined",
-        "ele": "import icon_reset_outlined from '@/assets/svg/icon_reset_outlined.svg'",
-        "v": "icon_reset_outlined"
-    },
-    {
-        "k": "icon_resetpassword",
-        "ele": "import icon_resetpassword from '@/assets/svg/icon_resetpassword.svg'",
-        "v": "icon_resetpassword"
-    },
-    {
-        "k": "icon_rightAlign_outlined",
-        "ele": "import icon_rightAlign_outlined from '@/assets/svg/icon_right-align_outlined.svg'",
-        "v": "icon_right-align_outlined"
-    },
-    {
-        "k": "icon_rightAlignment_outlined",
-        "ele": "import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'",
-        "v": "icon_right-alignment_outlined"
-    },
-    {
-        "k": "icon_rightAssociation",
-        "ele": "import icon_rightAssociation from '@/assets/svg/icon_right-association.svg'",
-        "v": "icon_right-association"
-    },
-    {
-        "k": "icon_right_outlined",
-        "ele": "import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'",
-        "v": "icon_right_outlined"
-    },
-    {
-        "k": "icon_scroll_filled",
-        "ele": "import icon_scroll_filled from '@/assets/svg/icon_scroll_filled.svg'",
-        "v": "icon_scroll_filled"
-    },
-    {
-        "k": "icon_searchOutline_outlined",
-        "ele": "import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'",
-        "v": "icon_search-outline_outlined"
-    },
-    {
-        "k": "icon_search",
-        "ele": "import icon_search from '@/assets/svg/icon_search.svg'",
-        "v": "icon_search"
-    },
-    {
-        "k": "icon_shareLabel_filled",
-        "ele": "import icon_shareLabel_filled from '@/assets/svg/icon_share-label_filled.svg'",
-        "v": "icon_share-label_filled"
-    },
-    {
-        "k": "icon_shareLabel_outlined",
-        "ele": "import icon_shareLabel_outlined from '@/assets/svg/icon_share-label_outlined.svg'",
-        "v": "icon_share-label_outlined"
-    },
-    {
-        "k": "icon_sideExpand_outlined",
-        "ele": "import icon_sideExpand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'",
-        "v": "icon_side-expand_outlined"
-    },
-    {
-        "k": "icon_sideFold_outlined",
-        "ele": "import icon_sideFold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'",
-        "v": "icon_side-fold_outlined"
-    },
-    {
-        "k": "icon_sortAToZ_outlined",
-        "ele": "import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'",
-        "v": "icon_sort-a-to-z_outlined"
-    },
-    {
-        "k": "icon_sortZToA_outlined",
-        "ele": "import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'",
-        "v": "icon_sort-z-to-a_outlined"
-    },
-    {
-        "k": "icon_sort_outlined",
-        "ele": "import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'",
-        "v": "icon_sort_outlined"
-    },
-    {
-        "k": "icon_sql",
-        "ele": "import icon_sql from '@/assets/svg/icon_sql.svg'",
-        "v": "icon_sql"
-    },
-    {
-        "k": "icon_sql_outlined",
-        "ele": "import icon_sql_outlined from '@/assets/svg/icon_sql_outlined.svg'",
-        "v": "icon_sql_outlined"
-    },
-    {
-        "k": "icon_sql_outlined_1",
-        "ele": "import icon_sql_outlined_1 from '@/assets/svg/icon_sql_outlined_1.svg'",
-        "v": "icon_sql_outlined_1"
-    },
-    {
-        "k": "icon_stretch_outlined",
-        "ele": "import icon_stretch_outlined from '@/assets/svg/icon_stretch_outlined.svg'",
-        "v": "icon_stretch_outlined"
-    },
-    {
-        "k": "icon_styleSet_outlined",
-        "ele": "import icon_styleSet_outlined from '@/assets/svg/icon_style-set_outlined.svg'",
-        "v": "icon_style-set_outlined"
-    },
-    {
-        "k": "icon_succeed_colorful",
-        "ele": "import icon_succeed_colorful from '@/assets/svg/icon_succeed_colorful.svg'",
-        "v": "icon_succeed_colorful"
-    },
-    {
-        "k": "icon_succeed_filled",
-        "ele": "import icon_succeed_filled from '@/assets/svg/icon_succeed_filled.svg'",
-        "v": "icon_succeed_filled"
-    },
-    {
-        "k": "icon_switch_outlined",
-        "ele": "import icon_switch_outlined from '@/assets/svg/icon_switch_outlined.svg'",
-        "v": "icon_switch_outlined"
-    },
-    {
-        "k": "icon_syncPlayRound_filled",
-        "ele": "import icon_syncPlayRound_filled from '@/assets/svg/icon_sync-play-round_filled.svg'",
-        "v": "icon_sync-play-round_filled"
-    },
-    {
-        "k": "icon_syncPlayRound_outlined",
-        "ele": "import icon_syncPlayRound_outlined from '@/assets/svg/icon_sync-play-round_outlined.svg'",
-        "v": "icon_sync-play-round_outlined"
-    },
-    {
-        "k": "icon_sync_close_log_details",
-        "ele": "import icon_sync_close_log_details from '@/assets/svg/icon_sync_close_log_details.svg'",
-        "v": "icon_sync_close_log_details"
-    },
-    {
-        "k": "icon_sync_datasource",
-        "ele": "import icon_sync_datasource from '@/assets/svg/icon_sync_datasource.svg'",
-        "v": "icon_sync_datasource"
-    },
-    {
-        "k": "icon_sync_log_number",
-        "ele": "import icon_sync_log_number from '@/assets/svg/icon_sync_log_number.svg'",
-        "v": "icon_sync_log_number"
-    },
-    {
-        "k": "icon_sync_logs_outlined",
-        "ele": "import icon_sync_logs_outlined from '@/assets/svg/icon_sync_logs_outlined.svg'",
-        "v": "icon_sync_logs_outlined"
-    },
-    {
-        "k": "icon_sync_progress",
-        "ele": "import icon_sync_progress from '@/assets/svg/icon_sync_progress.svg'",
-        "v": "icon_sync_progress"
-    },
-    {
-        "k": "icon_sync_target_to_datasource",
-        "ele": "import icon_sync_target_to_datasource from '@/assets/svg/icon_sync_target_to_datasource.svg'",
-        "v": "icon_sync_target_to_datasource"
-    },
-    {
-        "k": "icon_sync_task_number",
-        "ele": "import icon_sync_task_number from '@/assets/svg/icon_sync_task_number.svg'",
-        "v": "icon_sync_task_number"
-    },
-    {
-        "k": "icon_takeAction_outlined",
-        "ele": "import icon_takeAction_outlined from '@/assets/svg/icon_take-action_outlined.svg'",
-        "v": "icon_take-action_outlined"
-    },
-    {
-        "k": "icon_teamAdd_outlined",
-        "ele": "import icon_teamAdd_outlined from '@/assets/svg/icon_team-add_outlined.svg'",
-        "v": "icon_team-add_outlined"
-    },
-    {
-        "k": "icon_template",
-        "ele": "import icon_template from '@/assets/svg/icon_template.svg'",
-        "v": "icon_template"
-    },
-    {
-        "k": "icon_template_colorful",
-        "ele": "import icon_template_colorful from '@/assets/svg/icon_template_colorful.svg'",
-        "v": "icon_template_colorful"
-    },
-    {
-        "k": "icon_template_outlined",
-        "ele": "import icon_template_outlined from '@/assets/svg/icon_template_outlined.svg'",
-        "v": "icon_template_outlined"
-    },
-    {
-        "k": "icon_textBox_outlined",
-        "ele": "import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'",
-        "v": "icon_text-box_outlined"
-    },
-    {
-        "k": "icon_text_outlined",
-        "ele": "import icon_text_outlined from '@/assets/svg/icon_text_outlined.svg'",
-        "v": "icon_text_outlined"
-    },
-    {
-        "k": "icon_time_outlined",
-        "ele": "import icon_time_outlined from '@/assets/svg/icon_time_outlined.svg'",
-        "v": "icon_time_outlined"
-    },
-    {
-        "k": "icon_titleLeftAlign_outlined",
-        "ele": "import icon_titleLeftAlign_outlined from '@/assets/svg/icon_title-left-align_outlined.svg'",
-        "v": "icon_title-left-align_outlined"
-    },
-    {
-        "k": "icon_titleTopAlign_outlined",
-        "ele": "import icon_titleTopAlign_outlined from '@/assets/svg/icon_title-top-align_outlined.svg'",
-        "v": "icon_title-top-align_outlined"
-    },
-    {
-        "k": "icon_topAlign_outlined",
-        "ele": "import icon_topAlign_outlined from '@/assets/svg/icon_top-align_outlined.svg'",
-        "v": "icon_top-align_outlined"
-    },
-    {
-        "k": "icon_undo_outlined",
-        "ele": "import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'",
-        "v": "icon_undo_outlined"
-    },
-    {
-        "k": "icon_upLeft_outlined",
-        "ele": "import icon_upLeft_outlined from '@/assets/svg/icon_up-left_outlined.svg'",
-        "v": "icon_up-left_outlined"
-    },
-    {
-        "k": "icon_upload_outlined",
-        "ele": "import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'",
-        "v": "icon_upload_outlined"
-    },
-    {
-        "k": "icon_verticalAlign_outlined",
-        "ele": "import icon_verticalAlign_outlined from '@/assets/svg/icon_vertical-align_outlined.svg'",
-        "v": "icon_vertical-align_outlined"
-    },
-    {
-        "k": "icon_viewList_outlined",
-        "ele": "import icon_viewList_outlined from '@/assets/svg/icon_view-list_outlined.svg'",
-        "v": "icon_view-list_outlined"
-    },
-    {
-        "k": "icon_viewinchat_outlined",
-        "ele": "import icon_viewinchat_outlined from '@/assets/svg/icon_viewinchat_outlined.svg'",
-        "v": "icon_viewinchat_outlined"
-    },
-    {
-        "k": "icon_visible_outlined",
-        "ele": "import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'",
-        "v": "icon_visible_outlined"
-    },
-    {
-        "k": "icon_warning_colorful",
-        "ele": "import icon_warning_colorful from '@/assets/svg/icon_warning_colorful.svg'",
-        "v": "icon_warning_colorful"
-    },
-    {
-        "k": "icon_warning_filled",
-        "ele": "import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'",
-        "v": "icon_warning_filled"
-    },
-    {
-        "k": "icon_yes_outlined",
-        "ele": "import icon_yes_outlined from '@/assets/svg/icon_yes_outlined.svg'",
-        "v": "icon_yes_outlined"
-    },
-    {
-        "k": "iconfont",
-        "ele": "import iconfont from '@/assets/svg/iconfont.svg'",
-        "v": "iconfont"
-    },
-    {
-        "k": "impalaDs",
-        "ele": "import impalaDs from '@/assets/svg/impala-ds.svg'",
-        "v": "impala-ds"
-    },
-    {
-        "k": "indicatorDark",
-        "ele": "import indicatorDark from '@/assets/svg/indicator-dark.svg'",
-        "v": "indicator-dark"
-    },
-    {
-        "k": "indicatorOrigin",
-        "ele": "import indicatorOrigin from '@/assets/svg/indicator-origin.svg'",
-        "v": "indicator-origin"
-    },
-    {
-        "k": "indicator",
-        "ele": "import indicator from '@/assets/svg/indicator.svg'",
-        "v": "indicator"
-    },
-    {
-        "k": "innerJoin",
-        "ele": "import innerJoin from '@/assets/svg/inner-join.svg'",
-        "v": "inner-join"
-    },
-    {
-        "k": "international",
-        "ele": "import international from '@/assets/svg/international.svg'",
-        "v": "international"
-    },
-    {
-        "k": "joinJoin",
-        "ele": "import joinJoin from '@/assets/svg/join-join.svg'",
-        "v": "join-join"
-    },
-    {
-        "k": "label",
-        "ele": "import label from '@/assets/svg/label.svg'",
-        "v": "label"
-    },
-    {
-        "k": "language",
-        "ele": "import language from '@/assets/svg/language.svg'",
-        "v": "language"
-    },
-    {
-        "k": "leftJoin",
-        "ele": "import leftJoin from '@/assets/svg/left-join.svg'",
-        "v": "left-join"
-    },
-    {
-        "k": "lineDark",
-        "ele": "import lineDark from '@/assets/svg/line-dark.svg'",
-        "v": "line-dark"
-    },
-    {
-        "k": "lineOrigin",
-        "ele": "import lineOrigin from '@/assets/svg/line-origin.svg'",
-        "v": "line-origin"
-    },
-    {
-        "k": "line",
-        "ele": "import line from '@/assets/svg/line.svg'",
-        "v": "line"
-    },
-    {
-        "k": "linkBack",
-        "ele": "import linkBack from '@/assets/svg/link-back.svg'",
-        "v": "link-back"
-    },
-    {
-        "k": "linkDown",
-        "ele": "import linkDown from '@/assets/svg/link-down.svg'",
-        "v": "link-down"
-    },
-    {
-        "k": "link",
-        "ele": "import link from '@/assets/svg/link.svg'",
-        "v": "link"
-    },
-    {
-        "k": "liquidDark",
-        "ele": "import liquidDark from '@/assets/svg/liquid-dark.svg'",
-        "v": "liquid-dark"
-    },
-    {
-        "k": "liquidOrigin",
-        "ele": "import liquidOrigin from '@/assets/svg/liquid-origin.svg'",
-        "v": "liquid-origin"
-    },
-    {
-        "k": "liquid",
-        "ele": "import liquid from '@/assets/svg/liquid.svg'",
-        "v": "liquid"
-    },
-    {
-        "k": "lock_closed",
-        "ele": "import lock_closed from '@/assets/svg/lock_closed.svg'",
-        "v": "lock_closed"
-    },
-    {
-        "k": "lock_closed_switch",
-        "ele": "import lock_closed_switch from '@/assets/svg/lock_closed_switch.svg'",
-        "v": "lock_closed_switch"
-    },
-    {
-        "k": "lock_open",
-        "ele": "import lock_open from '@/assets/svg/lock_open.svg'",
-        "v": "lock_open"
-    },
-    {
-        "k": "lock_open_back",
-        "ele": "import lock_open_back from '@/assets/svg/lock_open_back.svg'",
-        "v": "lock_open_back"
-    },
-    {
-        "k": "lock_other_open",
-        "ele": "import lock_other_open from '@/assets/svg/lock_other_open.svg'",
-        "v": "lock_other_open"
-    },
-    {
-        "k": "log",
-        "ele": "import log from '@/assets/svg/log.svg'",
-        "v": "log"
-    },
-    {
-        "k": "logo",
-        "ele": "import logo from '@/assets/svg/logo.svg'",
-        "v": "logo"
-    },
-    {
-        "k": "logo_cas",
-        "ele": "import logo_cas from '@/assets/svg/logo_cas.svg'",
-        "v": "logo_cas"
-    },
-    {
-        "k": "logo_ldap",
-        "ele": "import logo_ldap from '@/assets/svg/logo_ldap.svg'",
-        "v": "logo_ldap"
-    },
-    {
-        "k": "logo_dingtalk",
-        "ele": "import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'",
-        "v": "logo_dingtalk"
-    },
-    {
-        "k": "logo_lark",
-        "ele": "import logo_lark from '@/assets/svg/logo_lark.svg'",
-        "v": "logo_lark"
-    },
-    {
-        "k": "logo_oauth",
-        "ele": "import logo_oauth from '@/assets/svg/logo_oauth.svg'",
-        "v": "logo_oauth"
-    },
-    {
-        "k": "logo_wechatWork",
-        "ele": "import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'",
-        "v": "logo_wechat-work"
-    },
-    {
-        "k": "mapDark",
-        "ele": "import mapDark from '@/assets/svg/map-dark.svg'",
-        "v": "map-dark"
-    },
-    {
-        "k": "mapOrigin",
-        "ele": "import mapOrigin from '@/assets/svg/map-origin.svg'",
-        "v": "map-origin"
-    },
-    {
-        "k": "map",
-        "ele": "import map from '@/assets/svg/map.svg'",
-        "v": "map"
-    },
-    {
-        "k": "map_mini",
-        "ele": "import map_mini from '@/assets/svg/map_mini.svg'",
-        "v": "map_mini"
-    },
-    {
-        "k": "map_old",
-        "ele": "import map_old from '@/assets/svg/map_old.svg'",
-        "v": "map_old"
-    },
-    {
-        "k": "mariadbDs",
-        "ele": "import mariadbDs from '@/assets/svg/mariadb-ds.svg'",
-        "v": "mariadb-ds"
-    },
-    {
-        "k": "marketExpand",
-        "ele": "import marketExpand from '@/assets/svg/market-expand.svg'",
-        "v": "market-expand"
-    },
-    {
-        "k": "marketRetract",
-        "ele": "import marketRetract from '@/assets/svg/market-retract.svg'",
-        "v": "market-retract"
-    },
-    {
-        "k": "menu",
-        "ele": "import menu from '@/assets/svg/menu.svg'",
-        "v": "menu"
-    },
-    {
-        "k": "mobileIcon_dashboard_filled",
-        "ele": "import mobileIcon_dashboard_filled from '@/assets/svg/mobile/icon_dashboard_filled.svg'",
-        "v": "mobile/icon_dashboard_filled"
-    },
-    {
-        "k": "mobileIcon_dashboard_outlined",
-        "ele": "import mobileIcon_dashboard_outlined from '@/assets/svg/mobile/icon_dashboard_outlined.svg'",
-        "v": "mobile/icon_dashboard_outlined"
-    },
-    {
-        "k": "mobileIcon_home_filled",
-        "ele": "import mobileIcon_home_filled from '@/assets/svg/mobile/icon_home_filled.svg'",
-        "v": "mobile/icon_home_filled"
-    },
-    {
-        "k": "mobileIcon_home_outlined",
-        "ele": "import mobileIcon_home_outlined from '@/assets/svg/mobile/icon_home_outlined.svg'",
-        "v": "mobile/icon_home_outlined"
-    },
-    {
-        "k": "mobileIcon_member_filled",
-        "ele": "import mobileIcon_member_filled from '@/assets/svg/mobile/icon_member_filled.svg'",
-        "v": "mobile/icon_member_filled"
-    },
-    {
-        "k": "mobileIcon_member_outlined",
-        "ele": "import mobileIcon_member_outlined from '@/assets/svg/mobile/icon_member_outlined.svg'",
-        "v": "mobile/icon_member_outlined"
-    },
-    {
-        "k": "mobileCheckbox",
-        "ele": "import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'",
-        "v": "mobile-checkbox"
-    },
-    {
-        "k": "mongoDs",
-        "ele": "import mongoDs from '@/assets/svg/mongo-ds.svg'",
-        "v": "mongo-ds"
-    },
-    {
-        "k": "more_v",
-        "ele": "import more_v from '@/assets/svg/more_v.svg'",
-        "v": "more_v"
-    },
-    {
-        "k": "move",
-        "ele": "import move from '@/assets/svg/move.svg'",
-        "v": "move"
-    },
-    {
-        "k": "msgSetting",
-        "ele": "import msgSetting from '@/assets/svg/msg-setting.svg'",
-        "v": "msg-setting"
-    },
-    {
-        "k": "mysqlDs",
-        "ele": "import mysqlDs from '@/assets/svg/mysql-ds.svg'",
-        "v": "mysql-ds"
-    },
-    {
-        "k": "mysqlFrame",
-        "ele": "import mysqlFrame from '@/assets/svg/mysql-frame.svg'",
-        "v": "mysql-frame"
-    },
-    {
-        "k": "nested",
-        "ele": "import nested from '@/assets/svg/nested.svg'",
-        "v": "nested"
-    },
-    {
-        "k": "noJoin",
-        "ele": "import noJoin from '@/assets/svg/no-join.svg'",
-        "v": "no-join"
-    },
-    {
-        "k": "no_result",
-        "ele": "import no_result from '@/assets/svg/no_result.svg'",
-        "v": "no_result"
-    },
-    {
-        "k": "nonExistent",
-        "ele": "import nonExistent from '@/assets/svg/non-existent.svg'",
-        "v": "non-existent"
-    },
-    {
-        "k": "none_select",
-        "ele": "import none_select from '@/assets/svg/none_select.svg'",
-        "v": "none_select"
-    },
-    {
-        "k": "notification",
-        "ele": "import notification from '@/assets/svg/notification.svg'",
-        "v": "notification"
-    },
-    {
-        "k": "oracleDs",
-        "ele": "import oracleDs from '@/assets/svg/oracle-ds.svg'",
-        "v": "oracle-ds"
-    },
-    {
-        "k": "org",
-        "ele": "import org from '@/assets/svg/org.svg'",
-        "v": "org"
-    },
-    {
-        "k": "other_material",
-        "ele": "import other_material from '@/assets/svg/other_material.svg'",
-        "v": "other_material"
-    },
-    {
-        "k": "other_material_board",
-        "ele": "import other_material_board from '@/assets/svg/other_material_board.svg'",
-        "v": "other_material_board"
-    },
-    {
-        "k": "other_material_icon",
-        "ele": "import other_material_icon from '@/assets/svg/other_material_icon.svg'",
-        "v": "other_material_icon"
-    },
-    {
-        "k": "other_media",
-        "ele": "import other_media from '@/assets/svg/other_media.svg'",
-        "v": "other_media"
-    },
-    {
-        "k": "other_setting",
-        "ele": "import other_setting from '@/assets/svg/other_setting.svg'",
-        "v": "other_setting"
-    },
-    {
-        "k": "other_text",
-        "ele": "import other_text from '@/assets/svg/other_text.svg'",
-        "v": "other_text"
-    },
-    {
-        "k": "pageLine",
-        "ele": "import pageLine from '@/assets/svg/page-line.svg'",
-        "v": "page-line"
-    },
-    {
-        "k": "panelMobilePublish",
-        "ele": "import panelMobilePublish from '@/assets/svg/panel-mobile-publish.svg'",
-        "v": "panel-mobile-publish"
-    },
-    {
-        "k": "panelMobileUnpublishedBack",
-        "ele": "import panelMobileUnpublishedBack from '@/assets/svg/panel-mobile-unpublished-back.svg'",
-        "v": "panel-mobile-unpublished-back"
-    },
-    {
-        "k": "panelMobileUnpublished",
-        "ele": "import panelMobileUnpublished from '@/assets/svg/panel-mobile-unpublished.svg'",
-        "v": "panel-mobile-unpublished"
-    },
-    {
-        "k": "panelPublish",
-        "ele": "import panelPublish from '@/assets/svg/panel-publish.svg'",
-        "v": "panel-publish"
-    },
-    {
-        "k": "panelUnpublishedBack",
-        "ele": "import panelUnpublishedBack from '@/assets/svg/panel-unpublished-back.svg'",
-        "v": "panel-unpublished-back"
-    },
-    {
-        "k": "panelUnpublished",
-        "ele": "import panelUnpublished from '@/assets/svg/panel-unpublished.svg'",
-        "v": "panel-unpublished"
-    },
-    {
-        "k": "panel",
-        "ele": "import panel from '@/assets/svg/panel.svg'",
-        "v": "panel"
-    },
-    {
-        "k": "people",
-        "ele": "import people from '@/assets/svg/people.svg'",
-        "v": "people"
-    },
-    {
-        "k": "peoples",
-        "ele": "import peoples from '@/assets/svg/peoples.svg'",
-        "v": "peoples"
-    },
-    {
-        "k": "percentageBarStackDark",
-        "ele": "import percentageBarStackDark from '@/assets/svg/percentage-bar-stack-dark.svg'",
-        "v": "percentage-bar-stack-dark"
-    },
-    {
-        "k": "percentageBarStackHorizontalDark",
-        "ele": "import percentageBarStackHorizontalDark from '@/assets/svg/percentage-bar-stack-horizontal-dark.svg'",
-        "v": "percentage-bar-stack-horizontal-dark"
-    },
-    {
-        "k": "percentageBarStackHorizontalOrigin",
-        "ele": "import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'",
-        "v": "percentage-bar-stack-horizontal-origin"
-    },
-    {
-        "k": "percentageBarStackHorizontal",
-        "ele": "import percentageBarStackHorizontal from '@/assets/svg/percentage-bar-stack-horizontal.svg'",
-        "v": "percentage-bar-stack-horizontal"
-    },
-    {
-        "k": "percentageBarStackOrigin",
-        "ele": "import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'",
-        "v": "percentage-bar-stack-origin"
-    },
-    {
-        "k": "percentageBarStack",
-        "ele": "import percentageBarStack from '@/assets/svg/percentage-bar-stack.svg'",
-        "v": "percentage-bar-stack"
-    },
-    {
-        "k": "pgDs",
-        "ele": "import pgDs from '@/assets/svg/pg-ds.svg'",
-        "v": "pg-ds"
-    },
-    {
-        "k": "pieDark",
-        "ele": "import pieDark from '@/assets/svg/pie-dark.svg'",
-        "v": "pie-dark"
-    },
-    {
-        "k": "pieDonutDark",
-        "ele": "import pieDonutDark from '@/assets/svg/pie-donut-dark.svg'",
-        "v": "pie-donut-dark"
-    },
-    {
-        "k": "pieDonutOrigin",
-        "ele": "import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'",
-        "v": "pie-donut-origin"
-    },
-    {
-        "k": "pieDonutRoseDark",
-        "ele": "import pieDonutRoseDark from '@/assets/svg/pie-donut-rose-dark.svg'",
-        "v": "pie-donut-rose-dark"
-    },
-    {
-        "k": "pieDonutRoseOrigin",
-        "ele": "import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'",
-        "v": "pie-donut-rose-origin"
-    },
-    {
-        "k": "pieDonutRose",
-        "ele": "import pieDonutRose from '@/assets/svg/pie-donut-rose.svg'",
-        "v": "pie-donut-rose"
-    },
-    {
-        "k": "pieDonut",
-        "ele": "import pieDonut from '@/assets/svg/pie-donut.svg'",
-        "v": "pie-donut"
-    },
-    {
-        "k": "pieOrigin",
-        "ele": "import pieOrigin from '@/assets/svg/pie-origin.svg'",
-        "v": "pie-origin"
-    },
-    {
-        "k": "pieRoseDark",
-        "ele": "import pieRoseDark from '@/assets/svg/pie-rose-dark.svg'",
-        "v": "pie-rose-dark"
-    },
-    {
-        "k": "pieRoseOrigin",
-        "ele": "import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'",
-        "v": "pie-rose-origin"
-    },
-    {
-        "k": "pieRose",
-        "ele": "import pieRose from '@/assets/svg/pie-rose.svg'",
-        "v": "pie-rose"
-    },
-    {
-        "k": "pie",
-        "ele": "import pie from '@/assets/svg/pie.svg'",
-        "v": "pie"
-    },
-    {
-        "k": "platform",
-        "ele": "import platform from '@/assets/svg/platform.svg'",
-        "v": "platform"
-    },
-    {
-        "k": "plugin3dmap",
-        "ele": "import plugin3dmap from '@/assets/svg/plugin-3dmap.svg'",
-        "v": "plugin-3dmap"
-    },
-    {
-        "k": "plugin3dpie",
-        "ele": "import plugin3dpie from '@/assets/svg/plugin-3dpie.svg'",
-        "v": "plugin-3dpie"
-    },
-    {
-        "k": "pluginDameng",
-        "ele": "import pluginDameng from '@/assets/svg/plugin-dameng.svg'",
-        "v": "plugin-dameng"
-    },
-    {
-        "k": "pluginDefault",
-        "ele": "import pluginDefault from '@/assets/svg/plugin-default.svg'",
-        "v": "plugin-default"
-    },
-    {
-        "k": "plugin",
-        "ele": "import plugin from '@/assets/svg/plugin.svg'",
-        "v": "plugin"
-    },
-    {
-        "k": "pluginsNew",
-        "ele": "import pluginsNew from '@/assets/svg/plugins-new.svg'",
-        "v": "plugins-new"
-    },
-    {
-        "k": "plugins",
-        "ele": "import plugins from '@/assets/svg/plugins.svg'",
-        "v": "plugins"
-    },
-    {
-        "k": "progressBarDark",
-        "ele": "import progressBarDark from '@/assets/svg/progress-bar-dark.svg'",
-        "v": "progress-bar-dark"
-    },
-    {
-        "k": "progressBarOrigin",
-        "ele": "import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'",
-        "v": "progress-bar-origin"
-    },
-    {
-        "k": "progressBar",
-        "ele": "import progressBar from '@/assets/svg/progress-bar.svg'",
-        "v": "progress-bar"
-    },
-    {
-        "k": "pwd_invisible",
-        "ele": "import pwd_invisible from '@/assets/svg/pwd_invisible.svg'",
-        "v": "pwd_invisible"
-    },
-    {
-        "k": "pwd_visible",
-        "ele": "import pwd_visible from '@/assets/svg/pwd_visible.svg'",
-        "v": "pwd_visible"
-    },
-    {
-        "k": "quadrantDark",
-        "ele": "import quadrantDark from '@/assets/svg/quadrant-dark.svg'",
-        "v": "quadrant-dark"
-    },
-    {
-        "k": "quadrantOrigin",
-        "ele": "import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'",
-        "v": "quadrant-origin"
-    },
-    {
-        "k": "quadrant",
-        "ele": "import quadrant from '@/assets/svg/quadrant.svg'",
-        "v": "quadrant"
-    },
-    {
-        "k": "radarDark",
-        "ele": "import radarDark from '@/assets/svg/radar-dark.svg'",
-        "v": "radar-dark"
-    },
-    {
-        "k": "radarOrigin",
-        "ele": "import radarOrigin from '@/assets/svg/radar-origin.svg'",
-        "v": "radar-origin"
-    },
-    {
-        "k": "radar",
-        "ele": "import radar from '@/assets/svg/radar.svg'",
-        "v": "radar"
-    },
-    {
-        "k": "readMsg",
-        "ele": "import readMsg from '@/assets/svg/read-msg.svg'",
-        "v": "read-msg"
-    },
-    {
-        "k": "redshiftDs",
-        "ele": "import redshiftDs from '@/assets/svg/redshift-ds.svg'",
-        "v": "redshift-ds"
-    },
-    {
-        "k": "referenceField",
-        "ele": "import referenceField from '@/assets/svg/reference-field.svg'",
-        "v": "reference-field"
-    },
-    {
-        "k": "referencePlay",
-        "ele": "import referencePlay from '@/assets/svg/reference-play.svg'",
-        "v": "reference-play"
-    },
-    {
-        "k": "referenceSetting",
-        "ele": "import referenceSetting from '@/assets/svg/reference-setting.svg'",
-        "v": "reference-setting"
-    },
-    {
-        "k": "referenceTable",
-        "ele": "import referenceTable from '@/assets/svg/reference-table.svg'",
-        "v": "reference-table"
-    },
-    {
-        "k": "release",
-        "ele": "import release from '@/assets/svg/release.svg'",
-        "v": "release"
-    },
-    {
-        "k": "report",
-        "ele": "import report from '@/assets/svg/report.svg'",
-        "v": "report"
-    },
-    {
-        "k": "richTextDark",
-        "ele": "import richTextDark from '@/assets/svg/rich-text-dark.svg'",
-        "v": "rich-text-dark"
-    },
-    {
-        "k": "richTextOrigin",
-        "ele": "import richTextOrigin from '@/assets/svg/rich-text-origin.svg'",
-        "v": "rich-text-origin"
-    },
-    {
-        "k": "richText",
-        "ele": "import richText from '@/assets/svg/rich-text.svg'",
-        "v": "rich-text"
-    },
-    {
-        "k": "richTextView",
-        "ele": "import richTextView from '@/assets/svg/richTextView.svg'",
-        "v": "richTextView"
-    },
-    {
-        "k": "rightJoin",
-        "ele": "import rightJoin from '@/assets/svg/right-join.svg'",
-        "v": "right-join"
-    },
-    {
-        "k": "role",
-        "ele": "import role from '@/assets/svg/role.svg'",
-        "v": "role"
-    },
-    {
-        "k": "round_play",
-        "ele": "import round_play from '@/assets/svg/round_play.svg'",
-        "v": "round_play"
-    },
-    {
-        "k": "sankeyDark",
-        "ele": "import sankeyDark from '@/assets/svg/sankey-dark.svg'",
-        "v": "sankey-dark"
-    },
-    {
-        "k": "sankeyOrigin",
-        "ele": "import sankeyOrigin from '@/assets/svg/sankey-origin.svg'",
-        "v": "sankey-origin"
-    },
-    {
-        "k": "sankey",
-        "ele": "import sankey from '@/assets/svg/sankey.svg'",
-        "v": "sankey"
-    },
-    {
-        "k": "scatterDark",
-        "ele": "import scatterDark from '@/assets/svg/scatter-dark.svg'",
-        "v": "scatter-dark"
-    },
-    {
-        "k": "scatterOrigin",
-        "ele": "import scatterOrigin from '@/assets/svg/scatter-origin.svg'",
-        "v": "scatter-origin"
-    },
-    {
-        "k": "scatter",
-        "ele": "import scatter from '@/assets/svg/scatter.svg'",
-        "v": "scatter"
-    },
-    {
-        "k": "scene",
-        "ele": "import scene from '@/assets/svg/scene.svg'",
-        "v": "scene"
-    },
-    {
-        "k": "scrollText",
-        "ele": "import scrollText from '@/assets/svg/scroll-text.svg'",
-        "v": "scroll-text"
-    },
-    {
-        "k": "size",
-        "ele": "import size from '@/assets/svg/size.svg'",
-        "v": "size"
-    },
-    {
-        "k": "sortAsc",
-        "ele": "import sortAsc from '@/assets/svg/sort-asc.svg'",
-        "v": "sort-asc"
-    },
-    {
-        "k": "sortDesc",
-        "ele": "import sortDesc from '@/assets/svg/sort-desc.svg'",
-        "v": "sort-desc"
-    },
-    {
-        "k": "sqlServerDs",
-        "ele": "import sqlServerDs from '@/assets/svg/sqlServer-ds.svg'",
-        "v": "sqlServer-ds"
-    },
-    {
-        "k": "stockLineDark",
-        "ele": "import stockLineDark from '@/assets/svg/stock-line-dark.svg'",
-        "v": "stock-line-dark"
-    },
-    {
-        "k": "stockLineOrigin",
-        "ele": "import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'",
-        "v": "stock-line-origin"
-    },
-    {
-        "k": "stockLine",
-        "ele": "import stockLine from '@/assets/svg/stock-line.svg'",
-        "v": "stock-line"
-    },
-    {
-        "k": "symbolicMapDark",
-        "ele": "import symbolicMapDark from '@/assets/svg/symbolic-map-dark.svg'",
-        "v": "symbolic-map-dark"
-    },
-    {
-        "k": "symbolicMapOrigin",
-        "ele": "import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'",
-        "v": "symbolic-map-origin"
-    },
-    {
-        "k": "symbolicMap",
-        "ele": "import symbolicMap from '@/assets/svg/symbolic-map.svg'",
-        "v": "symbolic-map"
-    },
-    {
-        "k": "sync",
-        "ele": "import sync from '@/assets/svg/sync.svg'",
-        "v": "sync"
-    },
-    {
-        "k": "sysParam",
-        "ele": "import sysParam from '@/assets/svg/sys-param.svg'",
-        "v": "sys-param"
-    },
-    {
-        "k": "sysParameter",
-        "ele": "import sysParameter from '@/assets/svg/sys-parameter.svg'",
-        "v": "sys-parameter"
-    },
-    {
-        "k": "sysRelationship",
-        "ele": "import sysRelationship from '@/assets/svg/sys-relationship.svg'",
-        "v": "sys-relationship"
-    },
-    {
-        "k": "sysSetting",
-        "ele": "import sysSetting from '@/assets/svg/sys-setting.svg'",
-        "v": "sys-setting"
-    },
-    {
-        "k": "sysTools",
-        "ele": "import sysTools from '@/assets/svg/sys-tools.svg'",
-        "v": "sys-tools"
-    },
-    {
-        "k": "system",
-        "ele": "import system from '@/assets/svg/system.svg'",
-        "v": "system"
-    },
-    {
-        "k": "tableInfoDark",
-        "ele": "import tableInfoDark from '@/assets/svg/table-info-dark.svg'",
-        "v": "table-info-dark"
-    },
-    {
-        "k": "tableInfoOrigin",
-        "ele": "import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'",
-        "v": "table-info-origin"
-    },
-    {
-        "k": "tableInfo",
-        "ele": "import tableInfo from '@/assets/svg/table-info.svg'",
-        "v": "table-info"
-    },
-    {
-        "k": "tableNormalDark",
-        "ele": "import tableNormalDark from '@/assets/svg/table-normal-dark.svg'",
-        "v": "table-normal-dark"
-    },
-    {
-        "k": "tableNormalOrigin",
-        "ele": "import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'",
-        "v": "table-normal-origin"
-    },
-    {
-        "k": "tableNormal",
-        "ele": "import tableNormal from '@/assets/svg/table-normal.svg'",
-        "v": "table-normal"
-    },
-    {
-        "k": "tablePivotDark",
-        "ele": "import tablePivotDark from '@/assets/svg/table-pivot-dark.svg'",
-        "v": "table-pivot-dark"
-    },
-    {
-        "k": "tablePivotOrigin",
-        "ele": "import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'",
-        "v": "table-pivot-origin"
-    },
-    {
-        "k": "tablePivot",
-        "ele": "import tablePivot from '@/assets/svg/table-pivot.svg'",
-        "v": "table-pivot"
-    },
-    {
-        "k": "table",
-        "ele": "import table from '@/assets/svg/table.svg'",
-        "v": "table"
-    },
-    {
-        "k": "task",
-        "ele": "import task from '@/assets/svg/task.svg'",
-        "v": "task"
-    },
-    {
-        "k": "textDark",
-        "ele": "import textDark from '@/assets/svg/text-dark.svg'",
-        "v": "text-dark"
-    },
-    {
-        "k": "text",
-        "ele": "import text from '@/assets/svg/text.svg'",
-        "v": "text"
-    },
-    {
-        "k": "titleBold",
-        "ele": "import titleBold from '@/assets/svg/title-bold.svg'",
-        "v": "title-bold"
-    },
-    {
-        "k": "titleCenter",
-        "ele": "import titleCenter from '@/assets/svg/title-center.svg'",
-        "v": "title-center"
-    },
-    {
-        "k": "titleItalic",
-        "ele": "import titleItalic from '@/assets/svg/title-italic.svg'",
-        "v": "title-italic"
-    },
-    {
-        "k": "titleLeft",
-        "ele": "import titleLeft from '@/assets/svg/title-left.svg'",
-        "v": "title-left"
-    },
-    {
-        "k": "titleRight",
-        "ele": "import titleRight from '@/assets/svg/title-right.svg'",
-        "v": "title-right"
-    },
-    {
-        "k": "titleVBottom",
-        "ele": "import titleVBottom from '@/assets/svg/title-v-bottom.svg'",
-        "v": "title-v-bottom"
-    },
-    {
-        "k": "titleVCenter",
-        "ele": "import titleVCenter from '@/assets/svg/title-v-center.svg'",
-        "v": "title-v-center"
-    },
-    {
-        "k": "titleVTop",
-        "ele": "import titleVTop from '@/assets/svg/title-v-top.svg'",
-        "v": "title-v-top"
-    },
-    {
-        "k": "toolboxData_fill",
-        "ele": "import toolboxData_fill from '@/assets/svg/toolbox-data_fill.svg'",
-        "v": "toolbox-data_fill"
-    },
-    {
-        "k": "toolboxIcon_template",
-        "ele": "import toolboxIcon_template from '@/assets/svg/toolbox-icon_template.svg'",
-        "v": "toolbox-icon_template"
-    },
-    {
-        "k": "toolboxLog",
-        "ele": "import toolboxLog from '@/assets/svg/toolbox-log.svg'",
-        "v": "toolbox-log"
-    },
-    {
-        "k": "topDocDefault",
-        "ele": "import topDocDefault from '@/assets/svg/top-doc-default.svg'",
-        "v": "top-doc-default"
-    },
-    {
-        "k": "topEnterpriseTrial",
-        "ele": "import topEnterpriseTrial from '@/assets/svg/top-enterprise-trial.svg'",
-        "v": "top-enterprise-trial"
-    },
-    {
-        "k": "topHelpDoc",
-        "ele": "import topHelpDoc from '@/assets/svg/top-help-doc.svg'",
-        "v": "top-help-doc"
-    },
-    {
-        "k": "topProductBbs",
-        "ele": "import topProductBbs from '@/assets/svg/top-product-bbs.svg'",
-        "v": "top-product-bbs"
-    },
-    {
-        "k": "topTechVideo",
-        "ele": "import topTechVideo from '@/assets/svg/top-tech-video.svg'",
-        "v": "top-tech-video"
-    },
-    {
-        "k": "topTechnology",
-        "ele": "import topTechnology from '@/assets/svg/top-technology.svg'",
-        "v": "top-technology"
-    },
-    {
-        "k": "tree",
-        "ele": "import tree from '@/assets/svg/tree.svg'",
-        "v": "tree"
-    },
-    {
-        "k": "treemapDark",
-        "ele": "import treemapDark from '@/assets/svg/treemap-dark.svg'",
-        "v": "treemap-dark"
-    },
-    {
-        "k": "treemapOrigin",
-        "ele": "import treemapOrigin from '@/assets/svg/treemap-origin.svg'",
-        "v": "treemap-origin"
-    },
-    {
-        "k": "treemap",
-        "ele": "import treemap from '@/assets/svg/treemap.svg'",
-        "v": "treemap"
-    },
-    {
-        "k": "unlock",
-        "ele": "import unlock from '@/assets/svg/unlock.svg'",
-        "v": "unlock"
-    },
-    {
-        "k": "unpublished",
-        "ele": "import unpublished from '@/assets/svg/unpublished.svg'",
-        "v": "unpublished"
-    },
-    {
-        "k": "unreadMsg",
-        "ele": "import unreadMsg from '@/assets/svg/unread-msg.svg'",
-        "v": "unread-msg"
-    },
-    {
-        "k": "userImg",
-        "ele": "import userImg from '@/assets/svg/user-img.svg'",
-        "v": "user-img"
-    },
-    {
-        "k": "userReci",
-        "ele": "import userReci from '@/assets/svg/user-reci.svg'",
-        "v": "user-reci"
-    },
-    {
-        "k": "user",
-        "ele": "import user from '@/assets/svg/user.svg'",
-        "v": "user"
-    },
-    {
-        "k": "variable",
-        "ele": "import variable from '@/assets/svg/variable.svg'",
-        "v": "variable"
-    },
-    {
-        "k": "visualStar",
-        "ele": "import visualStar from '@/assets/svg/visual-star.svg'",
-        "v": "visual-star"
-    },
-    {
-        "k": "warnTree",
-        "ele": "import warnTree from '@/assets/svg/warn-tree.svg'",
-        "v": "warn-tree"
-    },
-    {
-        "k": "waterfallDark",
-        "ele": "import waterfallDark from '@/assets/svg/waterfall-dark.svg'",
-        "v": "waterfall-dark"
-    },
-    {
-        "k": "waterfallOrigin",
-        "ele": "import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'",
-        "v": "waterfall-origin"
-    },
-    {
-        "k": "waterfall",
-        "ele": "import waterfall from '@/assets/svg/waterfall.svg'",
-        "v": "waterfall"
-    },
-    {
-        "k": "watermark",
-        "ele": "import watermark from '@/assets/svg/watermark.svg'",
-        "v": "watermark"
-    },
-    {
-        "k": "webMsg",
-        "ele": "import webMsg from '@/assets/svg/web-msg.svg'",
-        "v": "web-msg"
-    },
-    {
-        "k": "wizard_enterprise",
-        "ele": "import wizard_enterprise from '@/assets/svg/wizard_enterprise.svg'",
-        "v": "wizard_enterprise"
-    },
-    {
-        "k": "wizard_help",
-        "ele": "import wizard_help from '@/assets/svg/wizard_help.svg'",
-        "v": "wizard_help"
-    },
-    {
-        "k": "wizard_main_bg_inner",
-        "ele": "import wizard_main_bg_inner from '@/assets/svg/wizard_main_bg_inner.svg'",
-        "v": "wizard_main_bg_inner"
-    },
-    {
-        "k": "wizard_quick_start",
-        "ele": "import wizard_quick_start from '@/assets/svg/wizard_quick_start.svg'",
-        "v": "wizard_quick_start"
-    },
-    {
-        "k": "wordCloudDark",
-        "ele": "import wordCloudDark from '@/assets/svg/word-cloud-dark.svg'",
-        "v": "word-cloud-dark"
-    },
-    {
-        "k": "wordCloudOrigin",
-        "ele": "import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'",
-        "v": "word-cloud-origin"
-    },
-    {
-        "k": "wordCloud",
-        "ele": "import wordCloud from '@/assets/svg/word-cloud.svg'",
-        "v": "word-cloud"
-    },
-    {
-        "k": "icon_multi_line_outlined",
-        "ele": "import icon_multi_line_outlined from '@/assets/svg/icon_multi-line_outlined.svg'",
-        "v": "icon_multi-line_outlined"
-    },
-    {
-        "k": "icon_radio_outlined",
-        "ele": "import icon_radio_outlined from '@/assets/svg/icon_radio_outlined.svg'",
-        "v": "icon_radio_outlined"
-    },
-    {
-        "k": "icon_single_line_outlined",
-        "ele": "import icon_single_line_outlined from '@/assets/svg/icon_single-line_outlined.svg'",
-        "v": "icon_single-line_outlined"
-    },
-    {
-        "k": "icon_todo_outlined",
-        "ele": "import icon_todo_outlined from '@/assets/svg/icon_todo_outlined.svg'",
-        "v": "icon_todo_outlined"
-    },
-    {
-        "k": "icon_file_doc_colorful",
-        "ele": "import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'",
-        "v": "icon_file-doc_colorful"
-    },
-    {
-        "k": "icon_font",
-        "ele": "import icon_font from '@/assets/svg/icon_font.svg'",
-        "v": "icon_font"
-    },
-    {
-        "k": "tHeatmap",
-        "ele": "import tHeatmap from '@/assets/svg/t-heatmap.svg'",
-        "v": "t-heatmap"
-    },
-    {
-        "k": "tHeatmapDark",
-        "ele": "import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'",
-        "v": "t-heatmap-dark"
-    },
-    {
-        "k": "tHeatmapOrigin",
-        "ele": "import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'",
-        "v": "t-heatmap-origin"
-    }
-]
-const fs = require('fs');
-const path = require('path');
-const htmlparser2 = require('htmlparser2');
-// b.split('\n').map(ele => { const [k, v] = ele.replace('import ', '').split(' from '); return { k, ele, v: v.replace('\'', '').replace('.svg', '').split('@/assets/svg/')[1] }})
-// 读取Vue文件内容 kv
-const aviodName = []
-
-function BBQ(file) {
-    const vueContent = fs.readFileSync(file, 'utf-8');
-    let scriptStr = []
-    function replaceAll(k, l, v) {
-        const dom = htmlparser2.parseDocument(k);
-        const element = kv.find(ele => ele.v === dom.children[0].attribs?.name)
-        if (!element) {
-            return k + 'yyyyyy'
-        }
-        aviodName.push(dom.children[0].attribs.name)
-        scriptStr.push(`\n${element.ele}`)
-        scriptStr = [...new Set(scriptStr)]
-        if (k.endsWith('/>')) {
-            return k.replace(/\/>/, `><${element.k} /><\/Icon>`)
-            // return k.replace(/\/>/, `><${element.k} /><\/icon>`)
-        }
-        return k.replace(/<\/Icon>/, `<${element.k} /><\/Icon>`)
-        // return k.replace(/<\/icon>/, `<${element.k} /><\/icon>`)
-    }
-    let afterStr = vueContent.replaceAll(/<Icon[^>]*>(.*?)<\/Icon>|<Icon*[^>]*\/>/g, replaceAll)
-    // let afterStr = vueContent.replaceAll(/<icon[^>]*>(.*?)<\/icon>|<icon*[^>]*\/>/g, replaceAll)
-    if (!!scriptStr.length) {
-        afterStr = afterStr.replace(/(<script\s+[^>]*>)/, '$1' + scriptStr.join(''))
-        // afterStr = afterStr.replace('<script setup lang="ts">', '<script setup lang="ts">' + scriptStr)
-        // afterStr = afterStr.replace('<script lang="ts" setup>', '<script lang="ts" setup>' + scriptStr)
-        // afterStr = afterStr.replace('<script setup lang="tsx">', '<script setup lang="tsx">' + scriptStr)
-        // afterStr = afterStr.replace('<script lang="tsx" setup>', '<script lang="tsx" setup>' + scriptStr)
-        scriptStr = []
-    }
-    fs.writeFileSync(file, afterStr, 'utf8');
-    // afterStr1 = afterStr.replaceAll(/<Icon*[^>]*\/>/g, replaceAll)
-    // if (!!scriptStr) {
-    //     afterStr1 = afterStr1.replace(/(<script\s+[^>]*>)/, '$1' + scriptStr)
-    //     afterStr1 = afterStr1.replace('<script setup lang="ts">', '<script setup lang="ts">' + scriptStr)
-    //     afterStr1 = afterStr1.replace('<script lang="ts" setup>', '<script lang="ts" setup>' + scriptStr)
-    //     afterStr1 = afterStr1.replace('<script setup lang="tsx">', '<script setup lang="tsx">' + scriptStr)
-    //     afterStr1 = afterStr1.replace('<script lang="tsx" setup>', '<script lang="tsx" setup>' + scriptStr)
-    //     scriptStr = ''
-    // }
-    // fs.writeFileSync(file, afterStr1, 'utf8');
-}
-
-function walkDir(dir, callback) {
-    fs.readdirSync(dir).forEach(file => {
-        const fullPath = path.join(dir, file);
-        if (fs.lstatSync(fullPath).isDirectory()) {
-            walkDir(fullPath, callback);
-        } else {
-            callback(fullPath);
-        }
-    });
-
-}
-
-// 使用示例
-const directoryPath = './src'; // 替换为你的目录路径
-
-// walkDir(directoryPath, filePath => {
-//     if (filePath.endsWith('.vue')) {
-//         BBQ(filePath)
-//     }
-// });
-const CANVAS_MATERIAL = [
-    {
-        category: 'CanvasBoard',
-        title: '边框',
-        span: 8,
-        details: [
-            {
-                value: 'board_1',
-                type: 'outer_svg',
-                title: '边框1',
-                icon: 'board_1'
-            },
-            {
-                value: 'board_2',
-                type: 'outer_svg',
-                title: '边框2',
-                icon: 'board_2'
-            },
-            {
-                value: 'board_3',
-                type: 'outer_svg',
-                title: '边框3',
-                icon: 'board_3'
-            },
-            {
-                value: 'board_4',
-                type: 'outer_svg',
-                title: '边框4',
-                icon: 'board_4'
-            },
-            {
-                value: 'board_5',
-                type: 'outer_svg',
-                title: '边框5',
-                icon: 'board_5'
-            },
-            {
-                value: 'board_6',
-                type: 'outer_svg',
-                title: '边框6',
-                icon: 'board_6'
-            },
-            {
-                value: 'board_7',
-                type: 'outer_svg',
-                title: '边框7',
-                icon: 'board_7'
-            },
-            {
-                value: 'board_8',
-                type: 'outer_svg',
-                title: '边框8',
-                icon: 'board_8'
-            },
-            {
-                value: 'board_9',
-                type: 'outer_svg',
-                title: '边框9',
-                icon: 'board_9'
-            }
-        ]
-    },
-    {
-        category: 'DeGraphical',
-        title: '图形',
-        span: 8,
-        details: [
-            {
-                value: 'RectShape',
-                type: 'graphical',
-                title: '矩形',
-                icon: 'graphical-rect'
-            },
-            {
-                value: 'SvgTriangle',
-                type: 'graphical',
-                title: '三角形',
-                icon: 'graphical-triangle'
-            },
-            {
-                value: 'CircleShape',
-                type: 'graphical',
-                title: '圆形',
-                icon: 'graphical-circular'
-            }
-        ]
-    },
-    {
-        category: 'CanvasIcon',
-        title: '图标',
-        span: 4,
-        details: [
-            {
-                value: 'Plus',
-                type: 'inner_svg',
-                icon: 'Plus'
-            },
-            {
-                value: 'Minus',
-                type: 'inner_svg',
-                icon: 'Minus'
-            },
-            {
-                value: 'CirclePlus',
-                type: 'inner_svg',
-                icon: 'CirclePlus'
-            },
-            {
-                value: 'Search',
-                type: 'inner_svg',
-                icon: 'Search'
-            },
-            {
-                value: 'Female',
-                type: 'inner_svg',
-                icon: 'Female'
-            },
-            {
-                value: 'Male',
-                type: 'inner_svg',
-                icon: 'Male'
-            },
-            {
-                value: 'Aim',
-                type: 'inner_svg',
-                icon: 'Aim'
-            },
-            {
-                value: 'House',
-                type: 'inner_svg',
-                icon: 'House'
-            },
-            {
-                value: 'FullScreen',
-                type: 'inner_svg',
-                icon: 'FullScreen'
-            },
-            {
-                value: 'Loading',
-                type: 'inner_svg',
-                icon: 'Loading'
-            },
-            {
-                value: 'Link',
-                type: 'inner_svg',
-                icon: 'Link'
-            },
-            {
-                value: 'Service',
-                type: 'inner_svg',
-                icon: 'Service'
-            },
-            {
-                value: 'Pointer',
-                type: 'inner_svg',
-                icon: 'Pointer'
-            },
-            {
-                value: 'Star',
-                type: 'inner_svg',
-                icon: 'Star'
-            },
-            {
-                value: 'Notification',
-                type: 'inner_svg',
-                icon: 'Notification'
-            },
-            {
-                value: 'Connection',
-                type: 'inner_svg',
-                icon: 'Connection'
-            },
-            {
-                value: 'ChatDotRound',
-                type: 'inner_svg',
-                icon: 'ChatDotRound'
-            },
-            {
-                value: 'Setting',
-                type: 'inner_svg',
-                icon: 'Setting'
-            },
-            {
-                value: 'Clock',
-                type: 'inner_svg',
-                icon: 'Clock'
-            },
-            {
-                value: 'Position',
-                type: 'inner_svg',
-                icon: 'Position'
-            },
-            {
-                value: 'Discount',
-                type: 'inner_svg',
-                icon: 'Discount'
-            },
-            {
-                value: 'Odometer',
-                type: 'inner_svg',
-                icon: 'Odometer'
-            },
-            {
-                value: 'ChatSquare',
-                type: 'inner_svg',
-                icon: 'ChatSquare'
-            },
-            {
-                value: 'ChatRound',
-                type: 'inner_svg',
-                icon: 'ChatRound'
-            },
-            {
-                value: 'ChatLineRound',
-                type: 'inner_svg',
-                icon: 'ChatLineRound'
-            },
-            {
-                value: 'ChatLineSquare',
-                type: 'inner_svg',
-                icon: 'ChatLineSquare'
-            },
-            {
-                value: 'ChatDotSquare',
-                type: 'inner_svg',
-                icon: 'ChatDotSquare'
-            },
-            {
-                value: 'View',
-                type: 'inner_svg',
-                icon: 'View'
-            },
-            {
-                value: 'Hide',
-                type: 'inner_svg',
-                icon: 'Hide'
-            },
-            {
-                value: 'Unlock',
-                type: 'inner_svg',
-                icon: 'Unlock'
-            },
-            {
-                value: 'Lock',
-                type: 'inner_svg',
-                icon: 'Lock'
-            },
-            {
-                value: 'RefreshRight',
-                type: 'inner_svg',
-                icon: 'RefreshRight'
-            },
-            {
-                value: 'RefreshLeft',
-                type: 'inner_svg',
-                icon: 'RefreshLeft'
-            },
-            {
-                value: 'Refresh',
-                type: 'inner_svg',
-                icon: 'Refresh'
-            },
-            {
-                value: 'Bell',
-                type: 'inner_svg',
-                icon: 'Bell'
-            },
-            {
-                value: 'MuteNotification',
-                type: 'inner_svg',
-                icon: 'MuteNotification'
-            },
-            {
-                value: 'User',
-                type: 'inner_svg',
-                icon: 'User'
-            },
-            {
-                value: 'Check',
-                type: 'inner_svg',
-                icon: 'Check'
-            },
-            {
-                value: 'CircleCheck',
-                type: 'inner_svg',
-                icon: 'CircleCheck'
-            },
-            {
-                value: 'Warning',
-                type: 'inner_svg',
-                icon: 'Warning'
-            },
-            {
-                value: 'CircleClose',
-                type: 'inner_svg',
-                icon: 'CircleClose'
-            },
-            {
-                value: 'Close',
-                type: 'inner_svg',
-                icon: 'Close'
-            },
-            {
-                value: 'PieChart',
-                type: 'inner_svg',
-                icon: 'PieChart'
-            },
-            {
-                value: 'More',
-                type: 'inner_svg',
-                icon: 'More'
-            },
-            {
-                value: 'Compass',
-                type: 'inner_svg',
-                icon: 'Compass'
-            },
-            {
-                value: 'Filter',
-                type: 'inner_svg',
-                icon: 'Filter'
-            },
-            {
-                value: 'Switch',
-                type: 'inner_svg',
-                icon: 'Switch'
-            },
-            {
-                value: 'Select',
-                type: 'inner_svg',
-                icon: 'Select'
-            },
-            {
-                value: 'SemiSelect',
-                type: 'inner_svg',
-                icon: 'SemiSelect'
-            },
-            {
-                value: 'CloseBold',
-                type: 'inner_svg',
-                icon: 'CloseBold'
-            },
-            {
-                value: 'EditPen',
-                type: 'inner_svg',
-                icon: 'EditPen'
-            },
-            {
-                value: 'Edit',
-                type: 'inner_svg',
-                icon: 'Edit'
-            },
-            {
-                value: 'Message',
-                type: 'inner_svg',
-                icon: 'Message'
-            },
-            {
-                value: 'MessageBox',
-                type: 'inner_svg',
-                icon: 'MessageBox'
-            },
-            {
-                value: 'TurnOff',
-                type: 'inner_svg',
-                icon: 'TurnOff'
-            },
-            {
-                value: 'Finished',
-                type: 'inner_svg',
-                icon: 'Finished'
-            },
-            {
-                value: 'Delete',
-                type: 'inner_svg',
-                icon: 'Delete'
-            },
-            {
-                value: 'Crop',
-                type: 'inner_svg',
-                icon: 'Crop'
-            },
-            {
-                value: 'SwitchButton',
-                type: 'inner_svg',
-                icon: 'SwitchButton'
-            },
-            {
-                value: 'Operation',
-                type: 'inner_svg',
-                icon: 'Operation'
-            },
-            {
-                value: 'Open',
-                type: 'inner_svg',
-                icon: 'Open'
-            },
-            {
-                value: 'Remove',
-                type: 'inner_svg',
-                icon: 'Remove'
-            },
-            {
-                value: 'ZoomOut',
-                type: 'inner_svg',
-                icon: 'ZoomOut'
-            },
-            {
-                value: 'ZoomIn',
-                type: 'inner_svg',
-                icon: 'ZoomIn'
-            },
-            {
-                value: 'InfoFilled',
-                type: 'inner_svg',
-                icon: 'InfoFilled'
-            },
-            {
-                value: 'CircleCheckFilled',
-                type: 'inner_svg',
-                icon: 'CircleCheckFilled'
-            },
-            {
-                value: 'SuccessFilled',
-                type: 'inner_svg',
-                icon: 'SuccessFilled'
-            },
-            {
-                value: 'WarningFilled',
-                type: 'inner_svg',
-                icon: 'WarningFilled'
-            },
-            {
-                value: 'CircleCloseFilled',
-                type: 'inner_svg',
-                icon: 'CircleCloseFilled'
-            },
-            {
-                value: 'QuestionFilled',
-                type: 'inner_svg',
-                icon: 'QuestionFilled'
-            },
-            {
-                value: 'WarnTriangleFilled',
-                type: 'inner_svg',
-                icon: 'WarnTriangleFilled'
-            },
-            {
-                value: 'UserFilled',
-                type: 'inner_svg',
-                icon: 'UserFilled'
-            },
-            {
-                value: 'MoreFilled',
-                type: 'inner_svg',
-                icon: 'MoreFilled'
-            },
-            {
-                value: 'Tools',
-                type: 'inner_svg',
-                icon: 'Tools'
-            },
-            {
-                value: 'HomeFilled',
-                type: 'inner_svg',
-                icon: 'HomeFilled'
-            },
-            {
-                value: 'Menu',
-                type: 'inner_svg',
-                icon: 'Menu'
-            },
-            {
-                value: 'UploadFilled',
-                type: 'inner_svg',
-                icon: 'UploadFilled'
-            },
-            {
-                value: 'Avatar',
-                type: 'inner_svg',
-                icon: 'Avatar'
-            },
-            {
-                value: 'HelpFilled',
-                type: 'inner_svg',
-                icon: 'HelpFilled'
-            },
-            {
-                value: 'Share',
-                type: 'inner_svg',
-                icon: 'Share'
-            },
-            {
-                value: 'StarFilled',
-                type: 'inner_svg',
-                icon: 'StarFilled'
-            },
-            {
-                value: 'Comment',
-                type: 'inner_svg',
-                icon: 'Comment'
-            },
-            {
-                value: 'Histogram',
-                type: 'inner_svg',
-                icon: 'Histogram'
-            },
-            {
-                value: 'Grid',
-                type: 'inner_svg',
-                icon: 'Grid'
-            },
-            {
-                value: 'Promotion',
-                type: 'inner_svg',
-                icon: 'Promotion'
-            },
-            {
-                value: 'DeleteFilled',
-                type: 'inner_svg',
-                icon: 'DeleteFilled'
-            },
-            {
-                value: 'RemoveFilled',
-                type: 'inner_svg',
-                icon: 'RemoveFilled'
-            },
-            {
-                value: 'CirclePlusFilled',
-                type: 'inner_svg',
-                icon: 'CirclePlusFilled'
-            },
-            {
-                value: 'ArrowLeft',
-                type: 'inner_svg',
-                icon: 'ArrowLeft'
-            },
-            {
-                value: 'ArrowUp',
-                type: 'inner_svg',
-                icon: 'ArrowUp'
-            },
-            {
-                value: 'ArrowRight',
-                type: 'inner_svg',
-                icon: 'ArrowRight'
-            },
-            {
-                value: 'ArrowDown',
-                type: 'inner_svg',
-                icon: 'ArrowDown'
-            },
-            {
-                value: 'ArrowLeftBold',
-                type: 'inner_svg',
-                icon: 'ArrowLeftBold'
-            },
-            {
-                value: 'ArrowUpBold',
-                type: 'inner_svg',
-                icon: 'ArrowUpBold'
-            },
-            {
-                value: 'ArrowRightBold',
-                type: 'inner_svg',
-                icon: 'ArrowRightBold'
-            },
-            {
-                value: 'ArrowDownBold',
-                type: 'inner_svg',
-                icon: 'ArrowDownBold'
-            },
-            {
-                value: 'DArrowRight',
-                type: 'inner_svg',
-                icon: 'DArrowRight'
-            },
-            {
-                value: 'DArrowLeft',
-                type: 'inner_svg',
-                icon: 'DArrowLeft'
-            },
-            {
-                value: 'Download',
-                type: 'inner_svg',
-                icon: 'Download'
-            },
-            {
-                value: 'Upload',
-                type: 'inner_svg',
-                icon: 'Upload'
-            },
-            {
-                value: 'Top',
-                type: 'inner_svg',
-                icon: 'Top'
-            },
-            {
-                value: 'Bottom',
-                type: 'inner_svg',
-                icon: 'Bottom'
-            }
-        ]
-    }
-]
-const ojk = {}
-// const chartType = []
-// CANVAS_MATERIAL.forEach(ele => {
-//     ele.details.forEach(itx => {
-//         chartType.push(itx.icon)
-//     })
-// })
-const chartType = ['dv-view', 'dv-filter', 'dv-text', 'dv-media', 'dv-tab', 'dv-more-com', 'icon_params_setting', 'dv-batch', 'dv-dashboard', 'icon_phone_outlined', 'dv-material']
-// const chartType = Object.values({
-//     left: 'icon_left-association',
-//     right: 'icon_right-association',
-//     inner: 'icon_intersect',
-//     full: 'icon_full-association'
-// })
-// const chartType = ['dv-move', 'dv-rename', 'dv-delete', 'dv-folder', 'dv-use-template', 'dv-copy-dark']
-// let chartType = ['icon_text_calculated_outlined',
-//     'icon_calendar_calculated_outlined',
-//     'icon_number_calculated_outlined',
-//     'icon_number_calculated_outlined',
-//     'icon_number_calculated_outlined',
-//     'icon_local_calculated_outlined',
-//     'binary',
-//     'icon_link_calculated_outlined']
-// chartType = chartType.concat(chartType.map(ele => ele + '_1'))
-// const chartType = ['icon_graphical', 'icon_search', 'bar', 'icon-video', 'icon-stream', 'db-more-web', 'dv-more-time-clock', 'dv-picture-real', 'other_material_icon', 'other_material_board', 'icon_graphical', 'dv-tab', 'scroll-text']
-// const chartType = ["gauge", "liquid", "indicator", "table-info", "table-normal", "table-pivot", "t-heatmap", "line", "area", "area-stack", "bar", "bar-stack", "percentage-bar-stack", "bar-group", "bar-group-stack", "waterfall", "bar-horizontal", "bar-stack-horizontal", "percentage-bar-stack-horizontal", "bar-range", "bidirectional-bar", "progress-bar", "stock-line", "pie", "pie-donut", "pie-rose", "pie-donut-rose", "radar", "treemap", "word-cloud", "map", "bubble-map", "flow-map", "heat-map", "symbolic-map", "scatter", "quadrant", "funnel", "sankey", "chart-mix", "chart-mix-group", "chart-mix-stack", "rich-text"]
-// const chartTypeOrigin = chartType.map(ele => ele + '-origin')
-// const chartTypeDark = chartType.map(ele => ele + '-dark')
-const aviodName1 = []
-kv.forEach(ele => {
-    if (chartType.includes(ele.v)) {
-        ojk[ele.v] = `_-_${ele.k}_-_`
-        aviodName.push(ele.ele)
-        aviodName1.push(ele.v)
-    }
-})
-// CANVAS_MATERIAL.forEach(ele => {
-//     ele.details.forEach(itx => {
-//         ojk[itx.icon] && (itx.icon = ojk[itx.icon])
-//     })
-// })
-console.log('aviodName', aviodName.join('\n'))
-console.log('aviodName1', JSON.stringify(aviodName1))
-// console.log('chartType', JSON.stringify(chartType))
-// console.log('CANVAS_MATERIAL', JSON.stringify(CANVAS_MATERIAL))
-console.log('ojk', JSON.stringify(ojk))
-
-
-