From db6aee66f1ec5fb6c8d593b6d6e0cf468ef95b4b Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 13 Sep 2024 18:06:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E6=95=88svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/config/dev.ts              |    2 +-
 .../color-scheme/src/ColorScheme.vue          |    3 +-
 .../components/column-list/src/ColumnList.vue |    3 +-
 .../dashboard/DbComponentToolBar.vue          |   36 -
 .../src/components/dashboard/DbToolbar.vue    |   48 +-
 .../FilterStyleSimpleSelector.vue             |   15 +-
 .../dashboard-style/OverallSetting.vue        |    5 +-
 .../dashboard-style/ViewSimpleTitle.vue       |   15 +-
 .../pre-subject/SubjectTemplateItem.vue       |    3 +-
 .../data-visualization/CanvasAttr.vue         |    3 +-
 .../data-visualization/DvToolbar.vue          |   38 +-
 .../data-visualization/RealTimeGroup.vue      |  133 +-
 .../data-visualization/RealTimeListTree.vue   |  146 +-
 .../data-visualization/canvas/Shape.vue       |    6 +-
 .../components/filter-text/src/FilterText.vue |   14 +-
 .../handle-more/src/DvHandleMore.vue          |   13 +-
 .../components/handle-more/src/HandleMore.vue |   13 +-
 .../src/components/icon-custom/src/Icon.vue   | 1388 +-----
 .../src/components/icon-group/board-list.ts   |   22 +
 .../components/icon-group/chart-dark-list.ts  |   91 +
 .../src/components/icon-group/chart-list.ts   |   91 +
 .../components/icon-group/datasource-list.ts  |   34 +
 .../icon-group/field-calculated-list.ts       |   33 +
 .../src/components/icon-group/field-list.ts   |   14 +
 .../src/components/plugin/src/index.vue       |   33 +-
 .../visualization/CanvasBaseSetting.vue       |    3 +-
 .../visualization/CanvasCacheDialog.vue       |    3 +-
 .../components/visualization/CanvasOptBar.vue |    3 +-
 .../visualization/ComponentButton.vue         |    2 +-
 .../visualization/ComponentButtonLabel.vue    |    2 +-
 .../visualization/ComponentEditBar.vue        |   21 +-
 .../src/components/visualization/EditMenu.vue |    3 +-
 .../components/visualization/LinkJumpSet.vue  |   68 +-
 .../components/visualization/LinkageSet.vue   |   44 +-
 .../visualization/OuterParamsSet.vue          |   21 +-
 .../visualization/OuterParamsSetDS.vue        |   24 +-
 .../visualization/common/DragInfo.vue         |    3 +-
 .../component-background/BackgroundItem.vue   |    5 +-
 .../BackgroundItemOverall.vue                 |    9 +-
 .../component-background/BoardItem.vue        |    9 +-
 .../src/components/visualization/linkJump.vue |   16 +-
 .../canvas-icon/Component.vue                 |    9 +-
 .../custom-component/common/CommonEvent.vue   |    3 +-
 .../common/CommonStyleSet.vue                 |   48 +-
 .../common/ComponentConfig.ts                 |  708 +--
 .../common/TabCarouselSetting.vue             |    3 +-
 .../component-group/CommonGroup.vue           |    4 +-
 .../component-group/DbMoreComGroup.vue        |    3 +-
 .../component-group/DragComponent.vue         |    2 +-
 .../component-group/MediaGroup.vue            |    9 +-
 .../component-group/MoreComGroup.vue          |    3 +-
 .../component-group/QueryGroup.vue            |    3 +-
 .../component-group/TabsGroup.vue             |    3 +-
 .../component-group/TextGroup.vue             |    6 +-
 .../component-group/UserViewGroup.vue         |   16 +-
 .../custom-component/de-frame/FrameLinks.vue  |    3 +-
 .../de-tabs/CustomTabsSort.vue                |    3 +-
 .../custom-component/v-query/Component.vue    |    6 +-
 .../v-query/ConditionDefaultConfiguration.vue |    3 +-
 .../custom-component/v-query/QueryCascade.vue |   16 +-
 .../v-query/QueryConditionConfiguration.vue   |  130 +-
 .../v-query/TreeFieldDialog.vue               |    6 +-
 .../src/layout/components/AccountOperator.vue |    6 +-
 .../src/layout/components/AiTips.vue          |    3 +-
 .../src/layout/components/CollapseBar.vue     |    8 +-
 .../src/layout/components/Copilot.vue         |    3 +-
 .../src/layout/components/Header.vue          |   12 +-
 .../src/layout/components/HeaderSystem.vue    |    6 +-
 .../src/layout/components/LangSelector.vue    |    3 +-
 .../src/layout/components/SystemCfg.vue       |    3 +-
 .../src/layout/components/ToolboxCfg.vue      |   15 +-
 .../src/layout/components/TopDoc.vue          |   15 +-
 .../src/layout/components/TopDocCard.vue      |    2 +-
 core/core-frontend/src/views/401/index.vue    |    3 +-
 core/core-frontend/src/views/404/index.vue    |    3 +-
 core/core-frontend/src/views/about/index.vue  |    3 +-
 .../editor/chart-type/ChartType.vue           |   16 +-
 .../editor/common/ChartTemplateInfo.vue       |    5 +-
 .../editor/dataset-select/DatasetSelect.vue   |    9 +-
 .../editor/drag-item/DimensionItem.vue        |  100 +-
 .../components/editor/drag-item/DrillItem.vue |   14 +-
 .../editor/drag-item/FilterItem.vue           |   20 +-
 .../components/editor/drag-item/QuotaItem.vue |  118 +-
 .../drag-item/components/CustomSortEdit.vue   |    3 +-
 .../editor/editor-senior/Senior.vue           |   10 +-
 .../editor-senior/components/AssistLine.vue   |    6 +-
 .../editor-senior/components/Threshold.vue    |   15 +-
 .../components/dialog/AssistLineEdit.vue      |   14 +-
 .../components/dialog/TableThresholdEdit.vue  |   18 +-
 .../dialog/TextLabelThresholdEdit.vue         |    6 +-
 .../components/dialog/TextThresholdEdit.vue   |    6 +-
 .../editor/editor-style/VQueryChartStyle.vue  |   13 +-
 .../components/CustomColorStyleSelect.vue     |    3 +-
 .../components/DualYAxisSelectorInner.vue     |    5 +-
 .../components/IndicatorNameSelector.vue      |    9 +-
 .../components/IndicatorValueSelector.vue     |   33 +-
 .../editor-style/components/LabelSelector.vue |   22 +-
 .../components/LegendSelector.vue             |   18 +-
 .../editor-style/components/MiscSelector.vue  |   21 +-
 .../editor-style/components/TitleSelector.vue |   21 +-
 .../components/TooltipSelector.vue            |   18 +-
 .../editor-style/components/XAxisSelector.vue |    5 +-
 .../editor-style/components/YAxisSelector.vue |    5 +-
 .../components/table/CustomAggrEdit.vue       |   27 +-
 .../components/table/TableCellSelector.vue    |   15 +-
 .../components/table/TableHeaderSelector.vue  |   15 +-
 .../editor/filter/QuotaFilterEditor.vue       |    6 +-
 .../editor/filter/ResultFilterEditor.vue      |    6 +-
 .../editor/filter/auth-tree/AuthTree.vue      |    6 +-
 .../editor/filter/auth-tree/FilterFiled.vue   |   16 +-
 .../views/chart/components/editor/index.vue   |   85 +-
 .../views/components/ChartEmptyInfo.vue       |    8 +-
 .../views/chart/components/views/index.vue    |   12 +-
 .../src/views/common/DeAppApply.vue           |    8 +-
 .../src/views/common/DeResourceArrow.vue      |    6 +-
 .../src/views/common/DeResourceGroupOpt.vue   |    8 +-
 .../src/views/common/DeResourceTree.vue       |   75 +-
 .../views/common/DeTemplatePreviewList.vue    |    9 +-
 .../src/views/copilot/DialogueChart.vue       |   26 +-
 .../core-frontend/src/views/copilot/index.vue |   32 +-
 .../views/dashboard/DashboardPreviewShow.vue  |    3 +-
 .../src/views/dashboard/MobileConfigPanel.vue |    8 +-
 .../MultiplexPreviewShow.vue                  |   40 +-
 .../views/data-visualization/PreviewHead.vue  |   22 +-
 .../views/data-visualization/PreviewShow.vue  |    3 +-
 .../src/views/data-visualization/index.vue    |    3 +-
 core/core-frontend/src/views/login/index.vue  |    3 +-
 .../views/mobile/components/DashboardCell.vue |    5 +-
 .../src/views/mobile/components/OrgCell.vue   |    5 +-
 .../views/mobile/components/Workbranch.vue    |    3 +-
 .../src/views/mobile/directory/index.vue      |   23 +-
 core/core-frontend/src/views/mobile/index.vue |   20 +-
 .../src/views/mobile/login/index.vue          |    6 +-
 .../src/views/mobile/personal/index.vue       |    5 +-
 .../src/views/share/share/ShareGrid.vue       |   31 +-
 .../src/views/share/share/ShareHandler.vue    |    6 +-
 .../src/views/share/share/ShareTicket.vue     |   24 +-
 .../src/views/share/share/ShareVisualHead.vue |    6 +-
 .../src/views/system/common/InfoTemplate.vue  |   16 +-
 .../src/views/system/font/FontInfo.vue        |    6 +-
 .../src/views/system/font/UploadDetail.vue    |    3 +-
 .../src/views/system/font/index.vue           |    6 +-
 .../system/parameter/engine/EngineEdit.vue    |    6 +-
 .../parameter/engine/EngineInfoTemplate.vue   |    6 +-
 .../views/system/parameter/map/Geometry.vue   |    9 +-
 .../system/parameter/map/GeometryEdit.vue     |    9 +-
 .../component/MarketPreview.vue               |    3 +-
 .../component/MarketPreviewV2.vue             |    9 +-
 .../src/views/template-market/index.vue       |    3 +-
 .../src/views/template/index.vue              |   11 +-
 .../visualized/data/dataset/ExportExcel.vue   |   20 +-
 .../data/dataset/auth-tree/AuthTree.vue       |    6 +-
 .../data/dataset/auth-tree/FilterFiled.vue    |   16 +-
 .../visualized/data/dataset/form/AddSql.vue   |   68 +-
 .../data/dataset/form/CalcFieldEdit.vue       |   45 +-
 .../data/dataset/form/CreatDsGroup.vue        |    8 +-
 .../data/dataset/form/DatasetUnion.vue        |   23 +-
 .../data/dataset/form/FieldMore.vue           |   41 +-
 .../data/dataset/form/UnionFieldList.vue      |    9 +-
 .../data/dataset/form/UnionItemEdit.vue       |   27 +-
 .../visualized/data/dataset/form/index.vue    |  115 +-
 .../views/visualized/data/dataset/index.vue   |   72 +-
 .../data/datasource/BaseInfoContent.vue       |    3 +-
 .../visualized/data/datasource/ExcelInfo.vue  |    6 +-
 .../visualized/data/datasource/FinishPage.vue |    6 +-
 .../visualized/data/datasource/SheetTabs.vue  |    6 +-
 .../datasource/form/ApiHttpRequestDraw.vue    |   18 +-
 .../data/datasource/form/ApiKeyValue.vue      |    9 +-
 .../data/datasource/form/ApiVariable.vue      |    9 +-
 .../data/datasource/form/CreatDsGroup.vue     |    8 +-
 .../data/datasource/form/DsTypeList.vue       |    3 +-
 .../data/datasource/form/EditorDetail.vue     |   38 +-
 .../data/datasource/form/ExcelDetail.vue      |   11 +-
 .../visualized/data/datasource/form/index.vue |    9 +-
 .../visualized/data/datasource/index.vue      |  129 +-
 .../view/panel/filter-config/index.vue        |   17 +-
 .../src/views/workbranch/ShortcutTable.vue    |   45 +-
 .../src/views/workbranch/index.vue            |   24 +-
 core/core-frontend/transformVue.js            | 4180 +++++++++++++++++
 179 files changed, 6609 insertions(+), 3068 deletions(-)
 delete mode 100644 core/core-frontend/src/components/dashboard/DbComponentToolBar.vue
 create mode 100644 core/core-frontend/src/components/icon-group/board-list.ts
 create mode 100644 core/core-frontend/src/components/icon-group/chart-dark-list.ts
 create mode 100644 core/core-frontend/src/components/icon-group/chart-list.ts
 create mode 100644 core/core-frontend/src/components/icon-group/datasource-list.ts
 create mode 100644 core/core-frontend/src/components/icon-group/field-calculated-list.ts
 create mode 100644 core/core-frontend/src/components/icon-group/field-list.ts
 create mode 100644 core/core-frontend/transformVue.js

diff --git a/core/core-frontend/config/dev.ts b/core/core-frontend/config/dev.ts
index ca7bea35d7..b3beee730c 100644
--- a/core/core-frontend/config/dev.ts
+++ b/core/core-frontend/config/dev.ts
@@ -8,7 +8,7 @@ export default {
       },
       // 使用 proxy 实例
       '/api': {
-        target: 'http://localhost:8100',
+        target: 'https://de2.fit2cloud.com',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, 'de2api')
       }
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 1a09ce0b84..7fb754081c 100644
--- a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
+++ b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ref } from 'vue'
 import { COLOR_CASES, COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -99,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>
+          <icon name="icon_admin_outlined"><icon_admin_outlined /></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 a98409bda8..d54f622e0e 100644
--- a/core/core-frontend/src/components/column-list/src/ColumnList.vue
+++ b/core/core-frontend/src/components/column-list/src/ColumnList.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import iconSetting from '@/assets/svg/icon-setting.svg'
 import { reactive, ref, toRaw } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import {
@@ -56,7 +57,7 @@ const handleCheckAllChange = (val: CheckboxValueType) => {
     <el-button secondary>
       <template #icon>
         <el-icon>
-          <Icon name="icon-setting"></Icon>
+          <Icon name="icon-setting"><iconSetting /></Icon>
         </el-icon>
       </template>
       {{ $t('component.columnList') }}
diff --git a/core/core-frontend/src/components/dashboard/DbComponentToolBar.vue b/core/core-frontend/src/components/dashboard/DbComponentToolBar.vue
deleted file mode 100644
index 20fe6baa99..0000000000
--- a/core/core-frontend/src/components/dashboard/DbComponentToolBar.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import ComponentGroup from '../visualization/ComponentGroup.vue'
-import UserViewGroup from '../../custom-component/component-group/UserViewGroup.vue'
-import TextGroup from '@/custom-component/component-group/TextGroup.vue'
-import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
-</script>
-<template>
-  <el-row class="custom-main">
-    <component-group :base-width="300" icon-name="chart_pie" title="图表">
-      <user-view-group></user-view-group>
-    </component-group>
-    <component-group :base-width="148" icon-name="other_text" title="文本">
-      <text-group></text-group>
-    </component-group>
-    <component-group icon-name="other_media" title="媒体">
-      <media-group></media-group>
-    </component-group>
-    <component-group icon-name="other_material" title="素材">
-      <div>this is material test</div>
-    </component-group>
-    <component-group icon-name="other_setting" title="参数">
-      <div>setting</div>
-    </component-group>
-  </el-row>
-</template>
-
-<style lang="less">
-.custom-main {
-  display: flex;
-  width: 100%;
-  height: @component-toolbar-height;
-  background-color: rgba(37, 45, 54, 1);
-  border-bottom: 1px solid rgba(85, 85, 85, 1);
-  color: #fff;
-}
-</style>
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 9c65c4c3c0..cd4df4857d 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -1,4 +1,20 @@
 <script setup lang="ts">
+import dvBatch from '@/assets/svg/dv-batch.svg'
+import dvDashboard from '@/assets/svg/dv-dashboard.svg'
+import dvFilter from '@/assets/svg/dv-filter.svg'
+import dvMedia from '@/assets/svg/dv-media.svg'
+import dvMoreCom from '@/assets/svg/dv-more-com.svg'
+import dvTab from '@/assets/svg/dv-tab.svg'
+import dvText from '@/assets/svg/dv-text.svg'
+import dvView from '@/assets/svg/dv-view.svg'
+import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
+import icon_phone_outlined from '@/assets/svg/icon_phone_outlined.svg'
+import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
+import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
+import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'
+import dvPreviewOuter from '@/assets/svg/dv-preview-outer.svg'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
 import { useEmbedded } from '@/store/modules/embedded'
@@ -443,7 +459,7 @@ 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 class="toolbar-icon" name="icon_left_outlined"><icon_left_outlined /></Icon>
         </el-icon>
         <div class="left-area" v-if="editMode === 'edit' && !batchOptStatus">
           <span id="canvas-name" class="name-area" @dblclick="editCanvasName">
@@ -457,7 +473,7 @@ const initOpenHandler = newWindow => {
                 :disabled="snapshotIndex < 1"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"></Icon>
+                <Icon name="icon_undo_outlined"><icon_undo_outlined /></Icon>
               </el-icon>
             </el-tooltip>
 
@@ -469,7 +485,7 @@ const initOpenHandler = newWindow => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -484,7 +500,7 @@ const initOpenHandler = newWindow => {
             :base-width="410"
             :show-split-line="true"
             is-label
-            :icon-name="'dv-view'"
+            :icon-name="dvView"
             themes="light"
             title="图表"
           >
@@ -495,7 +511,7 @@ const initOpenHandler = newWindow => {
             :show-split-line="true"
             is-label
             themes="light"
-            icon-name="dv-filter"
+            :icon-name="dvFilter"
             title="查询组件"
           >
             <query-group themes="light" :dv-model="dvModel"></query-group>
@@ -504,7 +520,7 @@ const initOpenHandler = newWindow => {
             is-label
             themes="light"
             :base-width="115"
-            icon-name="dv-text"
+            :icon-name="dvText"
             title="富文本"
           >
             <text-group themes="light" :dv-model="dvModel"></text-group>
@@ -514,12 +530,12 @@ const initOpenHandler = newWindow => {
             themes="light"
             placement="bottom"
             :base-width="315"
-            icon-name="dv-media"
+            :icon-name="dvMedia"
             title="媒体"
           >
             <media-group themes="light" :dv-model="dvModel"></media-group>
           </component-group>
-          <component-group themes="light" is-label :base-width="115" icon-name="dv-tab" title="Tab">
+          <component-group themes="light" is-label :base-width="115" :icon-name="dvTab" title="Tab">
             <tabs-group themes="light" :dv-model="dvModel"></tabs-group>
           </component-group>
           <component-group
@@ -527,13 +543,13 @@ const initOpenHandler = newWindow => {
             show-split-line
             is-label
             :base-width="115"
-            icon-name="dv-more-com"
+            :icon-name="dvMoreCom"
             title="更多"
           >
             <db-more-com-group themes="light" :dv-model="dvModel"></db-more-com-group>
           </component-group>
           <component-button-label
-            icon-name="icon_copy_filled"
+            :icon-name="icon_copy_filled"
             title="复用"
             is-label
             @customClick="multiplexingCanvasOpen"
@@ -547,14 +563,14 @@ const initOpenHandler = newWindow => {
             <component-button
               tips="外部参数设置"
               @custom-click="openOuterParamsSet"
-              icon-name="icon_params_setting"
+              :icon-name="icon_params_setting"
             />
           </el-tooltip>
           <el-tooltip effect="dark" content="批量操作" placement="bottom">
             <component-button
               tips="批量操作"
               @custom-click="batchOptStatusChange(true)"
-              icon-name="dv-batch"
+              :icon-name="dvBatch"
             />
           </el-tooltip>
 
@@ -562,7 +578,7 @@ const initOpenHandler = newWindow => {
             <component-button
               tips="仪表板配置"
               @custom-click="openDataBoardSetting"
-              icon-name="dv-dashboard"
+              :icon-name="dvDashboard"
             />
           </el-tooltip>
           <div class="divider"></div>
@@ -570,7 +586,7 @@ const initOpenHandler = newWindow => {
             <component-button
               tips="切换至移动端布局"
               @custom-click="openMobileSetting"
-              icon-name="icon_phone_outlined"
+              :icon-name="icon_phone_outlined"
             />
           </el-tooltip>
         </template>
@@ -583,13 +599,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 name="icon_pc_fullscreen"><icon_pc_fullscreen /></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" />
+                  <Icon name="dv-preview-outer"><dvPreviewOuter /></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 27b417d25e..88d7e937a3 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,7 @@
                   @click="handleHorizontalChange('left')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_left-align_outlined" />
+                  <Icon name="icon_left-align_outlined" ><icon_leftAlign_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -26,7 +26,7 @@
                   @click="handleHorizontalChange('center')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_horizontal-align_outlined" />
+                  <Icon name="icon_horizontal-align_outlined" ><icon_horizontalAlign_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -38,7 +38,7 @@
                   @click="handleHorizontalChange('right')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_right-align_outlined" />
+                  <Icon name="icon_right-align_outlined" ><icon_rightAlign_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-form-item>
@@ -54,7 +54,7 @@
                   @click="handleHorizontalChange('vertical', 'layout')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_title-top-align_outlined" />
+                  <Icon name="icon_title-top-align_outlined" ><icon_titleTopAlign_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip effect="dark" placement="top">
@@ -66,7 +66,7 @@
                   @click="handleHorizontalChange('horizontal', 'layout')"
                   class="hover-icon"
                 >
-                  <Icon name="icon_title-left-align_outlined" />
+                  <Icon name="icon_title-left-align_outlined" ><icon_titleLeftAlign_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-form-item>
@@ -145,6 +145,11 @@
 </template>
 
 <script setup lang="ts">
+import icon_leftAlign_outlined from '@/assets/svg/icon_left-align_outlined.svg'
+import icon_horizontalAlign_outlined from '@/assets/svg/icon_horizontal-align_outlined.svg'
+import icon_rightAlign_outlined from '@/assets/svg/icon_right-align_outlined.svg'
+import icon_titleTopAlign_outlined from '@/assets/svg/icon_title-top-align_outlined.svg'
+import icon_titleLeftAlign_outlined from '@/assets/svg/icon_title-left-align_outlined.svg'
 import { onMounted, reactive, computed } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
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 bae9050821..4d2e0b5347 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 name="icon_info_outlined" ><icon_info_outlined /></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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -184,6 +184,7 @@
 </template>
 
 <script setup lang="ts">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
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 03f3f7d3e4..9c9b9649df 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 name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -57,7 +57,7 @@
             @click="checkItalic"
           >
             <el-icon>
-              <Icon name="icon_italic_outlined" />
+              <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -74,7 +74,7 @@
             @click="setPosition('left')"
           >
             <el-icon>
-              <Icon name="icon_left-alignment_outlined" />
+              <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -88,7 +88,7 @@
             @click="setPosition('center')"
           >
             <el-icon>
-              <Icon name="icon_center-alignment_outlined" />
+              <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -102,7 +102,7 @@
             @click="setPosition('right')"
           >
             <el-icon>
-              <Icon name="icon_right-alignment_outlined" />
+              <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -112,6 +112,11 @@
 </template>
 
 <script lang="ts" setup>
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
 import { computed, reactive, ref } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
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 46bf325675..f96c74c827 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,7 @@
           width="172"
           height="79"
         />
-        <Icon v-else name="dv-no-img" style="width: 172px; height: 79px" />
+        <Icon v-else name="dv-no-img" style="width: 172px; height: 79px" ><dvNoImg /></Icon>
       </div>
       <div class="title-main">
         <div class="title-area">
@@ -44,6 +44,7 @@
 </template>
 
 <script setup lang="ts">
+import dvNoImg from '@/assets/svg/dv-no-img.svg'
 import { computed, onMounted, reactive, toRefs } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index b69c70816c..fb4de1fac9 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
@@ -125,7 +126,7 @@ onMounted(() => {
                   <div>预览时生效</div>
                 </template>
                 <el-icon class="hint-icon--dark">
-                  <Icon name="icon_info_outlined" />
+                  <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-select
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index 86a244e73a..b9fbf4ec6f 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import dvFilter from '@/assets/svg/dv-filter.svg'
+import dvMaterial from '@/assets/svg/dv-material.svg'
+import dvMedia from '@/assets/svg/dv-media.svg'
+import dvMoreCom from '@/assets/svg/dv-more-com.svg'
+import dvTab from '@/assets/svg/dv-tab.svg'
+import dvText from '@/assets/svg/dv-text.svg'
+import dvView from '@/assets/svg/dv-view.svg'
+import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
+import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
+import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
-import { ref, nextTick, computed, toRefs, onMounted } from 'vue'
+import { ref, nextTick, computed, toRefs } from 'vue'
 import { useEmbedded } from '@/store/modules/embedded'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -276,7 +288,7 @@ 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 class="toolbar-icon" name="icon_left_outlined"><icon_left_outlined /></Icon>
         </el-icon>
         <div class="left-area">
           <span id="dv-canvas-name" class="name-area" @dblclick="editCanvasName">
@@ -289,7 +301,7 @@ const fullScreenPreview = () => {
                 :class="{ 'toolbar-icon-disabled': snapshotIndex < 1 }"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"></Icon>
+                <Icon name="icon_undo_outlined"><icon_undo_outlined /></Icon>
               </el-icon>
             </el-tooltip>
             <el-tooltip effect="ndark" :content="$t('commons.reduction')" placement="bottom">
@@ -300,7 +312,7 @@ const fullScreenPreview = () => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -310,7 +322,7 @@ const fullScreenPreview = () => {
             show-split-line
             is-label
             :base-width="410"
-            icon-name="dv-view"
+            :icon-name="dvView"
             title="图表"
           >
             <user-view-group></user-view-group>
@@ -319,40 +331,40 @@ const fullScreenPreview = () => {
             :base-width="115"
             :show-split-line="true"
             is-label
-            icon-name="dv-filter"
+            :icon-name="dvFilter"
             title="查询组件"
           >
             <query-group :dv-model="dvModel"></query-group>
           </component-group>
-          <component-group is-label :base-width="215" icon-name="dv-text" title="文本">
+          <component-group is-label :base-width="215" :icon-name="dvText" title="文本">
             <text-group></text-group>
           </component-group>
           <component-group
             is-label
             placement="bottom"
             :base-width="315"
-            icon-name="dv-media"
+            :icon-name="dvMedia"
             title="媒体"
           >
             <media-group></media-group>
           </component-group>
-          <component-group is-label :base-width="115" icon-name="dv-tab" title="Tab">
+          <component-group is-label :base-width="115" :icon-name="dvTab" title="Tab">
             <tabs-group :dv-model="dvModel"></tabs-group>
           </component-group>
-          <component-group is-label :base-width="215" icon-name="dv-more-com" title="更多">
+          <component-group is-label :base-width="215" :icon-name="dvMoreCom" title="更多">
             <more-com-group></more-com-group>
           </component-group>
           <component-group
             is-label
             :base-width="410"
-            icon-name="dv-material"
+            :icon-name="dvMaterial"
             :show-split-line="true"
             title="素材"
           >
             <common-group></common-group>
           </component-group>
           <component-button-label
-            icon-name="icon_copy_filled"
+            :icon-name="icon_copy_filled"
             title="复用"
             is-label
             @customClick="multiplexingCanvasOpen"
@@ -365,7 +377,7 @@ const fullScreenPreview = () => {
             v-show="editMode === 'edit'"
             tips="外部参数设置"
             @custom-click="openOuterParamsSet"
-            icon-name="icon_params_setting"
+            :icon-name="icon_params_setting"
           />
         </el-tooltip>
         <div v-show="editMode === 'edit'" class="divider"></div>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index aaffd13bca..fe85cef174 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -1,4 +1,64 @@
 <script lang="ts" setup>
+import bar from '@/assets/svg/bar.svg'
+import dbMoreWeb from '@/assets/svg/db-more-web.svg'
+import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
+import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
+import dvTab from '@/assets/svg/dv-tab.svg'
+import iconStream from '@/assets/svg/icon-stream.svg'
+import iconVideo from '@/assets/svg/icon-video.svg'
+import icon_graphical from '@/assets/svg/icon_graphical.svg'
+import icon_search from '@/assets/svg/icon_search.svg'
+import other_material_board from '@/assets/svg/other_material_board.svg'
+import other_material_icon from '@/assets/svg/other_material_icon.svg'
+import scrollText from '@/assets/svg/scroll-text.svg'
+import areaOrigin from '@/assets/svg/area-origin.svg'
+import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'
+import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'
+import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'
+import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'
+import barOrigin from '@/assets/svg/bar-origin.svg'
+import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'
+import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'
+import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'
+import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'
+import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
+import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
+import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
+import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
+import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
+import funnelOrigin from '@/assets/svg/funnel-origin.svg'
+import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
+import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'
+import indicatorOrigin from '@/assets/svg/indicator-origin.svg'
+import lineOrigin from '@/assets/svg/line-origin.svg'
+import liquidOrigin from '@/assets/svg/liquid-origin.svg'
+import mapOrigin from '@/assets/svg/map-origin.svg'
+import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'
+import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'
+import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'
+import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'
+import pieOrigin from '@/assets/svg/pie-origin.svg'
+import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'
+import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'
+import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'
+import radarOrigin from '@/assets/svg/radar-origin.svg'
+import richTextOrigin from '@/assets/svg/rich-text-origin.svg'
+import sankeyOrigin from '@/assets/svg/sankey-origin.svg'
+import scatterOrigin from '@/assets/svg/scatter-origin.svg'
+import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'
+import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'
+import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'
+import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'
+import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'
+import treemapOrigin from '@/assets/svg/treemap-origin.svg'
+import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
+import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
+import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
+import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
+import dvShow from '@/assets/svg/dv-show.svg'
+import dvUnlock from '@/assets/svg/dv-unlock.svg'
+import dvLock from '@/assets/svg/dv-lock.svg'
+import dvMore from '@/assets/svg/dv-more.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
@@ -114,12 +174,69 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
   dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
 }
 
+const iconMap = {
+  bar: bar,
+  'db-more-web': dbMoreWeb,
+  'dv-more-time-clock': dvMoreTimeClock,
+  'dv-picture-real': dvPictureReal,
+  'dv-tab': dvTab,
+  'icon-stream': iconStream,
+  'icon-video': iconVideo,
+  icon_graphical: icon_graphical,
+  icon_search: icon_search,
+  other_material_board: other_material_board,
+  other_material_icon: other_material_icon,
+  'scroll-text': scrollText,
+  'area-origin': areaOrigin,
+  'area-stack-origin': areaStackOrigin,
+  'bar-group-origin': barGroupOrigin,
+  'bar-group-stack-origin': barGroupStackOrigin,
+  'bar-horizontal-origin': barHorizontalOrigin,
+  'bar-origin': barOrigin,
+  'bar-range-origin': barRangeOrigin,
+  'bar-stack-horizontal-origin': barStackHorizontalOrigin,
+  'bar-stack-origin': barStackOrigin,
+  'bidirectional-bar-origin': bidirectionalBarOrigin,
+  'bubble-map-origin': bubbleMapOrigin,
+  'chart-mix-group-origin': chartMixGroupOrigin,
+  'chart-mix-origin': chartMixOrigin,
+  'chart-mix-stack-origin': chartMixStackOrigin,
+  'flow-map-origin': flowMapOrigin,
+  'funnel-origin': funnelOrigin,
+  'gauge-origin': gaugeOrigin,
+  'heat-map-origin': heatMapOrigin,
+  'indicator-origin': indicatorOrigin,
+  'line-origin': lineOrigin,
+  'liquid-origin': liquidOrigin,
+  'map-origin': mapOrigin,
+  'percentage-bar-stack-horizontal-origin': percentageBarStackHorizontalOrigin,
+  'percentage-bar-stack-origin': percentageBarStackOrigin,
+  'pie-donut-origin': pieDonutOrigin,
+  'pie-donut-rose-origin': pieDonutRoseOrigin,
+  'pie-origin': pieOrigin,
+  'pie-rose-origin': pieRoseOrigin,
+  'progress-bar-origin': progressBarOrigin,
+  'quadrant-origin': quadrantOrigin,
+  'radar-origin': radarOrigin,
+  'rich-text-origin': richTextOrigin,
+  'sankey-origin': sankeyOrigin,
+  'scatter-origin': scatterOrigin,
+  'stock-line-origin': stockLineOrigin,
+  'symbolic-map-origin': symbolicMapOrigin,
+  'table-info-origin': tableInfoOrigin,
+  'table-normal-origin': tableNormalOrigin,
+  'table-pivot-origin': tablePivotOrigin,
+  'treemap-origin': treemapOrigin,
+  'waterfall-origin': waterfallOrigin,
+  'word-cloud-origin': wordCloudOrigin,
+  't-heatmap-origin': tHeatmapOrigin
+}
 const getIconName = item => {
   if (item.component === 'UserView') {
     const viewInfo = canvasViewInfo.value[item.id]
-    return `${viewInfo.type}-origin`
+    return iconMap[`${viewInfo.type}-origin`]
   } else {
-    return item.icon
+    return iconMap[item.icon]
   }
 }
 
@@ -183,7 +300,7 @@ const handleContextMenu = e => {
               @click="onClick(transformIndex(index))"
             >
               <el-icon class="component-icon">
-                <Icon :name="getIconName(getComponent(index))"></Icon>
+                <Icon><component :is="getIconName(getComponent(index))"></component></Icon>
               </el-icon>
               <span
                 :id="`component-label-${getComponent(index)?.id}`"
@@ -205,24 +322,24 @@ const handleContextMenu = e => {
                   v-show="!getComponent(index).isShow"
                   @click="showComponent"
                 >
-                  <Icon name="dv-eye-close" class="opt-icon"></Icon>
+                  <Icon name="dv-eye-close" class="opt-icon"><dvEyeClose /></Icon>
                 </el-icon>
                 <el-icon
                   class="component-base"
                   v-show="getComponent(index)?.isShow"
                   @click="hideComponent"
                 >
-                  <Icon name="dv-show" class="opt-icon"></Icon>
+                  <Icon name="dv-show" class="opt-icon"><dvShow /></Icon>
                 </el-icon>
                 <el-icon v-show="!getComponent(index)?.isLock" class="component-base" @click="lock">
-                  <Icon class="opt-icon" name="dv-unlock"></Icon>
+                  <Icon class="opt-icon" name="dv-unlock"><dvUnlock /></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"></Icon>
+                  <Icon name="dv-lock" class="opt-icon"><dvLock /></Icon>
                 </el-icon>
                 <el-dropdown
                   ref="dropdownMore"
@@ -233,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"></Icon>
+                      <Icon name="dv-more" class="opt-icon"><dvMore /></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 2a3dfd4715..598edb8eea 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -1,4 +1,66 @@
 <script lang="ts" setup>
+import bar from '@/assets/svg/bar.svg'
+import dbMoreWeb from '@/assets/svg/db-more-web.svg'
+import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
+import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
+import dvTab from '@/assets/svg/dv-tab.svg'
+import iconStream from '@/assets/svg/icon-stream.svg'
+import iconVideo from '@/assets/svg/icon-video.svg'
+import icon_graphical from '@/assets/svg/icon_graphical.svg'
+import icon_search from '@/assets/svg/icon_search.svg'
+import other_material_board from '@/assets/svg/other_material_board.svg'
+import other_material_icon from '@/assets/svg/other_material_icon.svg'
+import scrollText from '@/assets/svg/scroll-text.svg'
+import areaOrigin from '@/assets/svg/area-origin.svg'
+import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'
+import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'
+import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'
+import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'
+import barOrigin from '@/assets/svg/bar-origin.svg'
+import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'
+import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'
+import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'
+import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'
+import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
+import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
+import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
+import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
+import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
+import funnelOrigin from '@/assets/svg/funnel-origin.svg'
+import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
+import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'
+import indicatorOrigin from '@/assets/svg/indicator-origin.svg'
+import lineOrigin from '@/assets/svg/line-origin.svg'
+import liquidOrigin from '@/assets/svg/liquid-origin.svg'
+import mapOrigin from '@/assets/svg/map-origin.svg'
+import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'
+import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'
+import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'
+import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'
+import pieOrigin from '@/assets/svg/pie-origin.svg'
+import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'
+import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'
+import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'
+import radarOrigin from '@/assets/svg/radar-origin.svg'
+import richTextOrigin from '@/assets/svg/rich-text-origin.svg'
+import sankeyOrigin from '@/assets/svg/sankey-origin.svg'
+import scatterOrigin from '@/assets/svg/scatter-origin.svg'
+import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'
+import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'
+import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'
+import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'
+import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'
+import treemapOrigin from '@/assets/svg/treemap-origin.svg'
+import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
+import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
+import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
+import dvMore from '@/assets/svg/dv-more.svg'
+import dvExpandDown from '@/assets/svg/dv-expand-down.svg'
+import dvExpandRight from '@/assets/svg/dv-expand-right.svg'
+import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
+import dvShow from '@/assets/svg/dv-show.svg'
+import dvUnlock from '@/assets/svg/dv-unlock.svg'
+import dvLock from '@/assets/svg/dv-lock.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
@@ -203,13 +265,69 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
   dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
   snapshotStore.recordSnapshotCache()
 }
-
+const iconMap = {
+  bar: bar,
+  'db-more-web': dbMoreWeb,
+  'dv-more-time-clock': dvMoreTimeClock,
+  'dv-picture-real': dvPictureReal,
+  'dv-tab': dvTab,
+  'icon-stream': iconStream,
+  'icon-video': iconVideo,
+  icon_graphical: icon_graphical,
+  icon_search: icon_search,
+  other_material_board: other_material_board,
+  other_material_icon: other_material_icon,
+  'scroll-text': scrollText,
+  'area-origin': areaOrigin,
+  'area-stack-origin': areaStackOrigin,
+  'bar-group-origin': barGroupOrigin,
+  'bar-group-stack-origin': barGroupStackOrigin,
+  'bar-horizontal-origin': barHorizontalOrigin,
+  'bar-origin': barOrigin,
+  'bar-range-origin': barRangeOrigin,
+  'bar-stack-horizontal-origin': barStackHorizontalOrigin,
+  'bar-stack-origin': barStackOrigin,
+  'bidirectional-bar-origin': bidirectionalBarOrigin,
+  'bubble-map-origin': bubbleMapOrigin,
+  'chart-mix-group-origin': chartMixGroupOrigin,
+  'chart-mix-origin': chartMixOrigin,
+  'chart-mix-stack-origin': chartMixStackOrigin,
+  'flow-map-origin': flowMapOrigin,
+  'funnel-origin': funnelOrigin,
+  'gauge-origin': gaugeOrigin,
+  'heat-map-origin': heatMapOrigin,
+  'indicator-origin': indicatorOrigin,
+  'line-origin': lineOrigin,
+  'liquid-origin': liquidOrigin,
+  'map-origin': mapOrigin,
+  'percentage-bar-stack-horizontal-origin': percentageBarStackHorizontalOrigin,
+  'percentage-bar-stack-origin': percentageBarStackOrigin,
+  'pie-donut-origin': pieDonutOrigin,
+  'pie-donut-rose-origin': pieDonutRoseOrigin,
+  'pie-origin': pieOrigin,
+  'pie-rose-origin': pieRoseOrigin,
+  'progress-bar-origin': progressBarOrigin,
+  'quadrant-origin': quadrantOrigin,
+  'radar-origin': radarOrigin,
+  'rich-text-origin': richTextOrigin,
+  'sankey-origin': sankeyOrigin,
+  'scatter-origin': scatterOrigin,
+  'stock-line-origin': stockLineOrigin,
+  'symbolic-map-origin': symbolicMapOrigin,
+  'table-info-origin': tableInfoOrigin,
+  'table-normal-origin': tableNormalOrigin,
+  'table-pivot-origin': tablePivotOrigin,
+  'treemap-origin': treemapOrigin,
+  'waterfall-origin': waterfallOrigin,
+  'word-cloud-origin': wordCloudOrigin,
+  't-heatmap-origin': tHeatmapOrigin
+}
 const getIconName = item => {
   if (item.component === 'UserView') {
     const viewInfo = canvasViewInfo.value[item.id]
-    return `${viewInfo.type}-origin`
+    return iconMap[`${viewInfo.type}-origin`]
   } else {
-    return item.icon
+    return iconMap[item.icon]
   }
 }
 
@@ -300,7 +418,7 @@ const canvasChange = () => {
               >
                 <div style="width: 22px; padding-left: 3px"></div>
                 <el-icon class="component-icon">
-                  <Icon :name="getIconName(element)"></Icon>
+                  <Icon><component :is="getIconName(element)"></component></Icon>
                 </el-icon>
                 <span
                   :id="`component-label-${element?.id}`"
@@ -328,7 +446,7 @@ const canvasChange = () => {
                       @click="hiddenAreaOnClick($event, element)"
                     >
                       <el-icon class="component-base">
-                        <Icon name="dv-more" class="opt-icon"></Icon>
+                        <Icon name="dv-more" class="opt-icon"><dvMore /></Icon>
                       </el-icon>
                     </span>
                     <template #dropdown>
@@ -388,16 +506,18 @@ const canvasChange = () => {
                       v-show="getComponent(index)?.expand"
                       name="dv-expand-down"
                       class="expand-icon"
-                    ></Icon>
+                      ><dvExpandDown
+                    /></Icon>
                     <Icon
                       v-show="!getComponent(index)?.expand"
                       name="dv-expand-right"
                       class="expand-icon"
-                    ></Icon>
+                      ><dvExpandRight
+                    /></Icon>
                   </el-icon>
                 </div>
                 <el-icon class="component-icon">
-                  <Icon :name="getIconName(getComponent(index))"></Icon>
+                  <Icon><component :is="getIconName(getComponent(index))"></component></Icon>
                 </el-icon>
                 <span
                   :id="`component-label-${getComponent(index)?.id}`"
@@ -420,28 +540,28 @@ const canvasChange = () => {
                     v-show="!getComponent(index).isShow"
                     @click="showComponent"
                   >
-                    <Icon name="dv-eye-close" class="opt-icon"></Icon>
+                    <Icon name="dv-eye-close" class="opt-icon"><dvEyeClose /></Icon>
                   </el-icon>
                   <el-icon
                     class="component-base"
                     v-show="getComponent(index)?.isShow"
                     @click="hideComponent"
                   >
-                    <Icon name="dv-show" class="opt-icon"></Icon>
+                    <Icon name="dv-show" class="opt-icon"><dvShow /></Icon>
                   </el-icon>
                   <el-icon
                     v-show="!getComponent(index)?.isLock"
                     class="component-base"
                     @click="lock"
                   >
-                    <Icon class="opt-icon" name="dv-unlock"></Icon>
+                    <Icon class="opt-icon" name="dv-unlock"><dvUnlock /></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"></Icon>
+                    <Icon name="dv-lock" class="opt-icon"><dvLock /></Icon>
                   </el-icon>
                   <el-dropdown
                     ref="dropdownMore"
@@ -452,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"></Icon>
+                        <Icon name="dv-more" class="opt-icon"><dvMore /></Icon>
                       </el-icon>
                     </span>
                     <template #dropdown>
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 6b6e906c1a..0e2042c77c 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"></Icon>
+        <Icon name="mobile-checkbox"><mobileCheckbox /></Icon>
       </el-icon>
     </div>
     <div
@@ -46,7 +46,7 @@
         @click="selectCurComponent"
         @mousedown="handleInnerMouseDownOnShape"
       >
-        <Icon v-show="shapeLock" class="iconfont icon-suo" name="dv-lock"></Icon>
+        <Icon v-show="shapeLock" class="iconfont icon-suo" name="dv-lock"><dvLock /></Icon>
         <!--边框背景-->
         <Board
           v-if="svgInnerEnable"
@@ -97,6 +97,8 @@
 </template>
 
 <script setup lang="ts">
+import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'
+import dvLock from '@/assets/svg/dv-lock.svg'
 import eventBus from '@/utils/eventBus'
 import calculateComponentPositionAndSize, {
   calculateRadioComponentPositionAndSize
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 56df7839f4..4c764506a9 100644
--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import { nextTick, ref, watch } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { ElButton, ElDivider, ElIcon } from 'element-plus-secondary'
@@ -50,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>
+      <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
     </el-icon>
     <div class="filter-texts-container" ref="container">
       <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
@@ -58,7 +62,7 @@ watch(
           {{ ele }}
         </el-tooltip>
         <el-icon @click="clearFilter(index)">
-          <Icon name="icon_close_outlined"></Icon>
+          <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
         </el-icon>
       </p>
       <el-button
@@ -68,13 +72,13 @@ watch(
         @click="clearFilterAll"
       >
         <template #icon>
-          <Icon name="icon_delete-trash_outlined"></Icon>
+          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
         </template>
         清空条件</el-button
       >
     </div>
     <el-icon @click="scrollNext" class="arrow-right arrow-filter" v-if="showScroll">
-      <Icon name="icon_right_outlined"></Icon>
+      <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
     </el-icon>
     <el-button
       type="text"
@@ -84,7 +88,7 @@ watch(
       @click="clearFilterAll"
     >
       <template #icon>
-        <Icon name="icon_delete-trash_outlined"></Icon>
+        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 d489569563..f2427a4b27 100644
--- a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 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 } from 'vue'
+import { ref, PropType, type Component } from 'vue'
 import ShareHandler from '@/views/share/share/ShareHandler.vue'
+import { object } from 'vue-types'
 export interface Menu {
   svgName?: string
   label?: string
@@ -21,7 +23,10 @@ const props = defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: propTypes.string.def('icon_more_outlined'),
+  iconName: {
+    type: object<Component>,
+    default: icon_more_outlined
+  },
   inTable: propTypes.bool.def(false),
   resourceType: propTypes.string.def('dashboard'),
   node: {
@@ -67,7 +72,7 @@ const emit = defineEmits(['handleCommand'])
     @command="handleCommand"
   >
     <el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
-      <Icon :name="iconName"></Icon>
+      <Icon><component :is="iconName"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu>
@@ -80,7 +85,7 @@ const emit = defineEmits(['handleCommand'])
           :class="{ 'de-hidden-drop-item': ele.hidden }"
         >
           <el-icon class="handle-icon" v-if="ele.svgName">
-            <Icon :name="ele.svgName"></Icon>
+            <Icon><component :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 75cfca0bba..3420c50cae 100644
--- a/core/core-frontend/src/components/handle-more/src/HandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 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 } from 'vue'
+import { PropType, type Component } from 'vue'
+import { object } from 'vue-types'
 
 export interface Menu {
   svgName?: string
@@ -20,7 +22,10 @@ defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: propTypes.string.def('icon_more_outlined'),
+  iconName: {
+    type: object<Component>,
+    default: icon_more_outlined
+  },
   iconSize: propTypes.string.def('16px'),
   inTable: propTypes.bool.def(false)
 })
@@ -40,7 +45,7 @@ const emit = defineEmits(['handleCommand'])
     @command="handleCommand"
   >
     <el-icon class="hover-icon" :class="inTable && 'hover-icon-in-table'" @click.stop>
-      <Icon :name="iconName"></Icon>
+      <Icon><component :is="iconName"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu :persistent="false">
@@ -52,7 +57,7 @@ const emit = defineEmits(['handleCommand'])
           :disabled="ele.disabled"
         >
           <el-icon class="handle-icon" :style="{ fontSize: iconSize }" v-if="ele.svgName">
-            <Icon :name="ele.svgName"></Icon>
+            <Icon><component :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 606c3df97d..4c2790d38f 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -1,1392 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
-
-import _401 from '@/assets/svg/401.svg'
-import icon_link_calculated_outlined from '@/assets/svg/icon_link-calculated_outlined.svg'
-import icon_link_calculated_outlined_1 from '@/assets/svg/icon_link-calculated_outlined-1.svg'
-import icon_text_calculated_outlined from '@/assets/svg/icon_text-calculated_outlined.svg'
-import icon_text_calculated_outlined_1 from '@/assets/svg/icon_text-calculated_outlined-1.svg'
-import icon_number_calculated_outlined from '@/assets/svg/icon_number-calculated_outlined.svg'
-import icon_number_calculated_outlined_1 from '@/assets/svg/icon_number-calculated_outlined-1.svg'
-import icon_local_calculated_outlined from '@/assets/svg/icon_local-calculated_outlined.svg'
-import icon_local_calculated_outlined_1 from '@/assets/svg/icon_local-calculated_outlined-1.svg'
-import icon_calendar_calculated_outlined from '@/assets/svg/icon_calendar-calculated_outlined.svg'
-import icon_calendar_calculated_outlined_1 from '@/assets/svg/icon_calendar-calculated_outlined-1.svg'
-import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_outlined.svg'
-import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'
-import relation_arrow_icon from '@/assets/svg/relation_arrow_icon.svg'
-import icon_data_visualization from '@/assets/svg/icon_data-visualization.svg'
-import icon_notification_filled from '@/assets/svg/icon_notification_filled.svg'
-import calculate from '@/assets/svg/calculate.svg'
-import _403 from '@/assets/svg/403.svg'
-import APIDs from '@/assets/svg/API-ds.svg'
-import Apache_Hive from '@/assets/svg/Apache Hive.svg'
-import Checkbox from '@/assets/svg/Checkbox.svg'
-import clock from '@/assets/svg/clock.svg'
-import DM from '@/assets/svg/DM.svg'
-import DataEase from '@/assets/svg/DataEase.svg'
-import Elasticsearch from '@/assets/svg/Elasticsearch.svg'
-import ExcelDs from '@/assets/svg/Excel-ds.svg'
-import Frame from '@/assets/svg/Frame.svg'
-import KingBase from '@/assets/svg/KingBase.svg'
-import Kylin from '@/assets/svg/Kylin.svg'
-import Maxcompute from '@/assets/svg/Maxcompute.svg'
-import PDF from '@/assets/svg/PDF.svg'
-import Presto from '@/assets/svg/Presto.svg'
-import StarRocksDs from '@/assets/svg/StarRocks-ds.svg'
-import TiDBDs from '@/assets/svg/TiDB-ds.svg'
-import activeBtn_copilot from '@/assets/svg/active-btn_copilot.svg'
-import add from '@/assets/svg/add.svg'
-import allMsg from '@/assets/svg/all-msg.svg'
-import appearance from '@/assets/svg/appearance.svg'
-import areaDark from '@/assets/svg/area-dark.svg'
-import areaOrigin from '@/assets/svg/area-origin.svg'
-import areaStackDark from '@/assets/svg/area-stack-dark.svg'
-import areaStackOrigin from '@/assets/svg/area-stack-origin.svg'
-import areaStack from '@/assets/svg/area-stack.svg'
-import area from '@/assets/svg/area.svg'
-import auth from '@/assets/svg/auth.svg'
-import authentication from '@/assets/svg/authentication.svg'
-import barDark from '@/assets/svg/bar-dark.svg'
-import barGroupDark from '@/assets/svg/bar-group-dark.svg'
-import barGroupOrigin from '@/assets/svg/bar-group-origin.svg'
-import barGroupStackDark from '@/assets/svg/bar-group-stack-dark.svg'
-import barGroupStackOrigin from '@/assets/svg/bar-group-stack-origin.svg'
-import barGroupStack from '@/assets/svg/bar-group-stack.svg'
-import barGroup from '@/assets/svg/bar-group.svg'
-import barHorizontalDark from '@/assets/svg/bar-horizontal-dark.svg'
-import barHorizontalOrigin from '@/assets/svg/bar-horizontal-origin.svg'
-import barHorizontal from '@/assets/svg/bar-horizontal.svg'
-import barOrigin from '@/assets/svg/bar-origin.svg'
-import barRangeDark from '@/assets/svg/bar-range-dark.svg'
-import barRangeOrigin from '@/assets/svg/bar-range-origin.svg'
-import barRange from '@/assets/svg/bar-range.svg'
-import barStackDark from '@/assets/svg/bar-stack-dark.svg'
-import barStackHorizontalDark from '@/assets/svg/bar-stack-horizontal-dark.svg'
-import barStackHorizontalOrigin from '@/assets/svg/bar-stack-horizontal-origin.svg'
-import barStackHorizontal from '@/assets/svg/bar-stack-horizontal.svg'
-import barStackOrigin from '@/assets/svg/bar-stack-origin.svg'
-import barStack from '@/assets/svg/bar-stack.svg'
-import bar from '@/assets/svg/bar.svg'
-import bidirectionalBarDark from '@/assets/svg/bidirectional-bar-dark.svg'
-import bidirectionalBarOrigin from '@/assets/svg/bidirectional-bar-origin.svg'
-import bidirectionalBar from '@/assets/svg/bidirectional-bar.svg'
-import board_1 from '@/assets/svg/board_1.svg'
-import board_2 from '@/assets/svg/board_2.svg'
-import board_3 from '@/assets/svg/board_3.svg'
-import board_4 from '@/assets/svg/board_4.svg'
-import board_5 from '@/assets/svg/board_5.svg'
-import board_6 from '@/assets/svg/board_6.svg'
-import board_7 from '@/assets/svg/board_7.svg'
-import board_8 from '@/assets/svg/board_8.svg'
-import board_9 from '@/assets/svg/board_9.svg'
-import btn_copilot from '@/assets/svg/btn_copilot.svg'
-import btn_oidc from '@/assets/svg/btn_oidc.svg'
-import bubbleMapDark from '@/assets/svg/bubble-map-dark.svg'
-import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
-import bubbleMap from '@/assets/svg/bubble-map.svg'
-import button_right from '@/assets/svg/button_right.svg'
-import cancel_release from '@/assets/svg/cancel_release.svg'
-import chartDownload from '@/assets/svg/chart-download.svg'
-import chartMixDark from '@/assets/svg/chart-mix-dark.svg'
-import chartMixGroupDark from '@/assets/svg/chart-mix-group-dark.svg'
-import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
-import chartMixGroup from '@/assets/svg/chart-mix-group.svg'
-import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
-import chartMixStackDark from '@/assets/svg/chart-mix-stack-dark.svg'
-import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
-import chartMixStack from '@/assets/svg/chart-mix-stack.svg'
-import chartMix from '@/assets/svg/chart-mix.svg'
-import chartTable from '@/assets/svg/chart-table.svg'
-import ckDs from '@/assets/svg/ck-ds.svg'
-import copilot from '@/assets/svg/copilot.svg'
-import custom_sort from '@/assets/svg/custom_sort.svg'
-import dark_1 from '@/assets/svg/dark_1.svg'
-import dashboard from '@/assets/svg/dashboard.svg'
-import dataReference from '@/assets/svg/data-reference.svg'
-import database from '@/assets/svg/database.svg'
-import datasetOutline from '@/assets/svg/dataset-outline.svg'
-import datasetTask from '@/assets/svg/dataset-task.svg'
-import datasource from '@/assets/svg/datasource.svg'
-import dbDe from '@/assets/svg/db-de.svg'
-import dbMoreWeb from '@/assets/svg/db-more-web.svg'
-import db2Ds from '@/assets/svg/db2-ds.svg'
-import deApiNew from '@/assets/svg/de-api-new.svg'
-import deCopy from '@/assets/svg/de-copy.svg'
-import deDbNew from '@/assets/svg/de-db-new.svg'
-import deDelete from '@/assets/svg/de-delete.svg'
-import deDsError from '@/assets/svg/de-ds-error.svg'
-import deDsMove from '@/assets/svg/de-ds-move.svg'
-import deDsRename from '@/assets/svg/de-ds-rename.svg'
-import deDsTrash from '@/assets/svg/de-ds-trash.svg'
-import deDsWarning from '@/assets/svg/de-ds-warning.svg'
-import deExcelNew from '@/assets/svg/de-excel-new.svg'
-import deJson from '@/assets/svg/de-json.svg'
-import deMove from '@/assets/svg/de-move.svg'
-import deSearch from '@/assets/svg/de-search.svg'
-import deSqlNew from '@/assets/svg/de-sql-new.svg'
-import deUnionNew from '@/assets/svg/de-union-new.svg'
-import de_pwd_invisible from '@/assets/svg/de_pwd_invisible.svg'
-import de_pwd_visible from '@/assets/svg/de_pwd_visible.svg'
-import default_avatar from '@/assets/svg/default_avatar.svg'
-import _delete from '@/assets/svg/delete.svg'
-import displaySetting from '@/assets/svg/display-setting.svg'
-import doc from '@/assets/svg/doc.svg'
-import docs from '@/assets/svg/docs.svg'
-import dorisDs from '@/assets/svg/doris-ds.svg'
-import drag from '@/assets/svg/drag.svg'
-import driverDe from '@/assets/svg/driver-de.svg'
-import dsApi from '@/assets/svg/ds-api.svg'
-import dsCustom from '@/assets/svg/ds-custom.svg'
-import dsDb from '@/assets/svg/ds-db.svg'
-import dsExcel from '@/assets/svg/ds-excel.svg'
-import dsSql from '@/assets/svg/ds-sql.svg'
-import dsUnion from '@/assets/svg/ds-union.svg'
-import dvAiWindowMax from '@/assets/svg/dv-ai-window-max.svg'
-import dvAiWindowMin from '@/assets/svg/dv-ai-window-min.svg'
-import dvAi from '@/assets/svg/dv-ai.svg'
-import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'
-import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
-import dvBatch from '@/assets/svg/dv-batch.svg'
-import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'
-import dvCopy from '@/assets/svg/dv-copy.svg'
-import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
-import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
-import dvDashboard from '@/assets/svg/dv-dashboard.svg'
-import dvDelete from '@/assets/svg/dv-delete.svg'
-import dvDetails from '@/assets/svg/dv-details.svg'
-import dvDragTips from '@/assets/svg/dv-drag-tips.svg'
-import dvEdit from '@/assets/svg/dv-edit.svg'
-import dvEmpty from '@/assets/svg/dv-empty.svg'
-import dvExpandDown from '@/assets/svg/dv-expand-down.svg'
-import dvExpandRight from '@/assets/svg/dv-expand-right.svg'
-import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
-import dvFilterShow from '@/assets/svg/dv-filter-show.svg'
-import dvFilter from '@/assets/svg/dv-filter.svg'
-import dvFolder from '@/assets/svg/dv-folder.svg'
-import dvHeadMore from '@/assets/svg/dv-head-more.svg'
-import dvInfo from '@/assets/svg/dv-info.svg'
-import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
-import dvLock from '@/assets/svg/dv-lock.svg'
-import dvMaterial from '@/assets/svg/dv-material.svg'
-import dvMax from '@/assets/svg/dv-max.svg'
-import dvMedia from '@/assets/svg/dv-media.svg'
-import dvMin from '@/assets/svg/dv-min.svg'
-import dvMoreCom from '@/assets/svg/dv-more-com.svg'
-import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
-import dvMore from '@/assets/svg/dv-more.svg'
-import dvMove from '@/assets/svg/dv-move.svg'
-import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
-import dvNew from '@/assets/svg/dv-new.svg'
-import dvNoImg from '@/assets/svg/dv-no-img.svg'
-import dvNothing from '@/assets/svg/dv-nothing.svg'
-import dvParams from '@/assets/svg/dv-params.svg'
-import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
-import dvPictureShow from '@/assets/svg/dv-picture-show.svg'
-import dvPicture from '@/assets/svg/dv-picture.svg'
-import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
-import dvPreviewInner from '@/assets/svg/dv-preview-inner.svg'
-import dvPreviewOuter from '@/assets/svg/dv-preview-outer.svg'
-import dvPreview from '@/assets/svg/dv-preview.svg'
-import dvRename from '@/assets/svg/dv-rename.svg'
-import dvReposition from '@/assets/svg/dv-reposition.svg'
-import dvRichText from '@/assets/svg/dv-richText.svg'
-import dvRuler from '@/assets/svg/dv-ruler.svg'
-import dvScreenNew from '@/assets/svg/dv-screen-new.svg'
-import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'
-import dvScrollText from '@/assets/svg/dv-scroll-text.svg'
-import dvShare from '@/assets/svg/dv-share.svg'
-import dvShow from '@/assets/svg/dv-show.svg'
-import dvSortAsc from '@/assets/svg/dv-sort-asc.svg'
-import dvSortDesc from '@/assets/svg/dv-sort-desc.svg'
-import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
-import dvStyleActiveFontSize from '@/assets/svg/dv-style-activeFontSize.svg'
-import dvStyleBackgroundColor from '@/assets/svg/dv-style-backgroundColor.svg'
-import dvStyleBorderColor from '@/assets/svg/dv-style-borderColor.svg'
-import dvStyleBorderRadius from '@/assets/svg/dv-style-borderRadius.svg'
-import dvStyleBorderSize from '@/assets/svg/dv-style-borderSize.svg'
-import dvStyleBorderStyle from '@/assets/svg/dv-style-borderStyle.svg'
-import dvStyleColor from '@/assets/svg/dv-style-color.svg'
-import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'
-import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
-import dvStyleFontWeight from '@/assets/svg/dv-style-fontWeight.svg'
-import dvStyleHeadBorderActiveColor from '@/assets/svg/dv-style-headBorderActiveColor.svg'
-import dvStyleHeadBorderColor from '@/assets/svg/dv-style-headBorderColor.svg'
-import dvStyleHeadFontActiveColor from '@/assets/svg/dv-style-headFontActiveColor.svg'
-import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'
-import dvStyleHeadHorizontalPosition from '@/assets/svg/dv-style-headHorizontalPosition.svg'
-import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
-import dvStyleLineHeight from '@/assets/svg/dv-style-lineHeight.svg'
-import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
-import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
-import dvStyleTextAlign from '@/assets/svg/dv-style-textAlign.svg'
-import dvTabShow from '@/assets/svg/dv-tab-show.svg'
-import dvTab from '@/assets/svg/dv-tab.svg'
-import dvText from '@/assets/svg/dv-text.svg'
-import dvUnlock from '@/assets/svg/dv-unlock.svg'
-import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
-import dvUseTemplate from '@/assets/svg/dv-use-template.svg'
-import dvVideo from '@/assets/svg/dv-video.svg'
-import dvView from '@/assets/svg/dv-view.svg'
-import dv_mobile_layout from '@/assets/svg/dv_mobile_layout.svg'
-import editDone from '@/assets/svg/edit-done.svg'
-import editIn from '@/assets/svg/edit-in.svg'
-import edit from '@/assets/svg/edit.svg'
-import emailTask from '@/assets/svg/email-task.svg'
-import embedded from '@/assets/svg/embedded.svg'
-import association from '@/assets/svg/association.svg'
-import threshold from '@/assets/svg/threshold.svg'
-import threshold_full from '@/assets/svg/threshold_full.svg'
-import example from '@/assets/svg/example.svg'
-import exclamationmark from '@/assets/svg/exclamationmark.svg'
-import exclamationmark2 from '@/assets/svg/exclamationmark2.svg'
-import exitFullscreen from '@/assets/svg/exit-fullscreen.svg'
-import eyeOpen from '@/assets/svg/eye-open.svg'
-import eye from '@/assets/svg/eye.svg'
-import field_location from '@/assets/svg/field_location.svg'
-import field_text from '@/assets/svg/field_text.svg'
-import field_time from '@/assets/svg/field_time.svg'
-import field_value from '@/assets/svg/field_value.svg'
-import field_url from '@/assets/svg/field_url.svg'
-import filterCenter from '@/assets/svg/filter-center.svg'
-import filterHCenter from '@/assets/svg/filter-h-center.svg'
-import filterHLeft from '@/assets/svg/filter-h-left.svg'
-import filterHRight from '@/assets/svg/filter-h-right.svg'
-import filterTop from '@/assets/svg/filter-top.svg'
-import filter from '@/assets/svg/filter.svg'
-import filterParams from '@/assets/svg/filter-params.svg'
-import flowMapDark from '@/assets/svg/flow-map-dark.svg'
-import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
-import flowMap from '@/assets/svg/flow-map.svg'
-import folder from '@/assets/svg/folder.svg'
-import form from '@/assets/svg/form.svg'
-import fullscreen from '@/assets/svg/fullscreen.svg'
-import funnelDark from '@/assets/svg/funnel-dark.svg'
-import funnelOrigin from '@/assets/svg/funnel-origin.svg'
-import funnel from '@/assets/svg/funnel.svg'
-import gaugeDark from '@/assets/svg/gauge-dark.svg'
-import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
-import gauge from '@/assets/svg/gauge.svg'
-import graphicalCircular from '@/assets/svg/graphical-circular.svg'
-import graphicalRect from '@/assets/svg/graphical-rect.svg'
-import graphicalTriangle from '@/assets/svg/graphical-triangle.svg'
-import group3400 from '@/assets/svg/group-3400.svg'
-import group from '@/assets/svg/group.svg'
-import heatMapDark from '@/assets/svg/heat-map-dark.svg'
-import heatMapOrigin from '@/assets/svg/heat-map-origin.svg'
-import heatMap from '@/assets/svg/heat-map.svg'
-import iconCtrlClose from '@/assets/svg/icon/ctrl/close.svg'
-import iconOutlineNotification from '@/assets/svg/icon/outline/notification.svg'
-import iconAlarmclock from '@/assets/svg/icon-alarmclock.svg'
-import iconContacts from '@/assets/svg/icon-contacts.svg'
-import iconDraft from '@/assets/svg/icon-draft.svg'
-import iconFilter from '@/assets/svg/icon-filter.svg'
-import iconGroup from '@/assets/svg/icon-group.svg'
-import iconImageUpload from '@/assets/svg/icon-image-upload.svg'
-import iconImage from '@/assets/svg/icon-image.svg'
-import iconLaser from '@/assets/svg/icon-laser.svg'
-import iconLock from '@/assets/svg/icon-lock.svg'
-import iconMaybe from '@/assets/svg/icon-maybe.svg'
-import iconMaybe_outlined from '@/assets/svg/icon-maybe_outlined.svg'
-import iconMore from '@/assets/svg/icon-more.svg'
-import iconQuicksetting from '@/assets/svg/icon-quicksetting.svg'
-import iconSetting from '@/assets/svg/icon-setting.svg'
-import iconStream from '@/assets/svg/icon-stream.svg'
-import iconVideo from '@/assets/svg/icon-video.svg'
-import icon_Batch_outlined from '@/assets/svg/icon_Batch_outlined.svg'
-import icon_Invalid_colorful from '@/assets/svg/icon_Invalid_colorful.svg'
-import icon_addDictionary_outlined from '@/assets/svg/icon_add-dictionary_outlined.svg'
-import icon_addEntry_outlined from '@/assets/svg/icon_add-entry_outlined.svg'
-import icon_addFolder_outlined from '@/assets/svg/icon_add-folder_outlined.svg'
-import icon_add_outlined1 from '@/assets/svg/icon_add_outlined-1.svg'
-import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
-import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
-import icon_apiOutlined from '@/assets/svg/icon_api-outlined.svg'
-import icon_api from '@/assets/svg/icon_api.svg'
-import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'
-import icon_arrowRight_outlined from '@/assets/svg/icon_arrow-right_outlined.svg'
-import icon_assigned_outlined from '@/assets/svg/icon_assigned_outlined.svg'
-import icon_attachment_outlined from '@/assets/svg/icon_attachment_outlined.svg'
-import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
-import icon_bottomAlign_outlined from '@/assets/svg/icon_bottom-align_outlined.svg'
-import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'
-import icon_cancel_store from '@/assets/svg/icon_cancel_store.svg'
-import icon_card_outlined from '@/assets/svg/icon_card_outlined.svg'
-import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
-import icon_chartLineC from '@/assets/svg/icon_chart-line-c.svg'
-import icon_chartLine from '@/assets/svg/icon_chart-line.svg'
-import icon_clear_outlined from '@/assets/svg/icon_clear_outlined.svg'
-import icon_close_filled from '@/assets/svg/icon_close_filled.svg'
-import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
-import icon_collect_filled from '@/assets/svg/icon_collect_filled.svg'
-import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'
-import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
-import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
-import icon_customize from '@/assets/svg/icon_customize.svg'
-import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
-import icon_dashboard_outlinedC from '@/assets/svg/icon_dashboard_outlined-c.svg'
-import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
-import icon_databaseAlert_filled from '@/assets/svg/icon_database-alert_filled.svg'
-import icon_databaseFail_filled from '@/assets/svg/icon_database-fail_filled.svg'
-import icon_database from '@/assets/svg/icon_database.svg'
-import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
-import icon_dataset from '@/assets/svg/icon_dataset.svg'
-import icon_dataset_outlined from '@/assets/svg/icon_dataset_outlined.svg'
-import icon_db_filled from '@/assets/svg/icon_db_filled.svg'
-import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
-import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
-import icon_dialpad_outlined from '@/assets/svg/icon_dialpad_outlined.svg'
-import icon_disordeList_outlined from '@/assets/svg/icon_disorde-list_outlined.svg'
-import icon_divider_outlined from '@/assets/svg/icon_divider_outlined.svg'
-import icon_docReplace_outlined from '@/assets/svg/icon_doc-replace_outlined.svg'
-import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
-import icon_downRight_outlined from '@/assets/svg/icon_down-right_outlined.svg'
-import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
-import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
-import icon_download_outlined from '@/assets/svg/icon_download_outlined.svg'
-import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
-import icon_drilling_outlined from '@/assets/svg/icon_drilling_outlined.svg'
-import icon_drive_filled from '@/assets/svg/icon_drive_filled.svg'
-import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_effects_outlined from '@/assets/svg/icon_effects_outlined.svg'
-import icon_excel from '@/assets/svg/icon_excel.svg'
-import icon_excel_outlined from '@/assets/svg/icon_excel_outlined.svg'
-import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
-import icon_expandLeft_filled from '@/assets/svg/icon_expand-left_filled.svg'
-import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
-import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
-import icon_fileExcel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'
-import icon_folder_filled from '@/assets/svg/icon_folder_filled.svg'
-import icon_fontColor_outlined from '@/assets/svg/icon_font-color_outlined.svg'
-import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
-import icon_fullAssociation from '@/assets/svg/icon_full-association.svg'
-import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'
-import icon_graphical from '@/assets/svg/icon_graphical.svg'
-import icon_gridlines_outlined from '@/assets/svg/icon_gridlines_outlined.svg'
-import icon_h1_outlined from '@/assets/svg/icon_h1_outlined.svg'
-import icon_h2_outlined from '@/assets/svg/icon_h2_outlined.svg'
-import icon_h3_outlined from '@/assets/svg/icon_h3_outlined.svg'
-import icon_hn_outlined from '@/assets/svg/icon_hn_outlined.svg'
-import icon_horizontalAlign_outlined from '@/assets/svg/icon_horizontal-align_outlined.svg'
-import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
-import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
-import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
-import icon_intersect from '@/assets/svg/icon_intersect.svg'
-import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
-import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
-import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
-import icon_leftAlign_outlined from '@/assets/svg/icon_left-align_outlined.svg'
-import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
-import icon_leftAssociation from '@/assets/svg/icon_left-association.svg'
-import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
-import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
-import icon_linkRecord from '@/assets/svg/icon_link-record.svg'
-import icon_linkRecord_outlined1 from '@/assets/svg/icon_link-record_outlined-1.svg'
-import icon_linkRecord_outlined from '@/assets/svg/icon_link-record_outlined.svg'
-import icon_loading_outlined from '@/assets/svg/icon_loading_outlined.svg'
-import icon_local from '@/assets/svg/icon_local.svg'
-import icon_local_outlined from '@/assets/svg/icon_local_outlined.svg'
-import icon_logs_outlined1 from '@/assets/svg/icon_logs_outlined-1.svg'
-import icon_logs_outlined from '@/assets/svg/icon_logs_outlined.svg'
-import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
-import icon_memberAdd_outlined from '@/assets/svg/icon_member-add_outlined.svg'
-import icon_member_filled from '@/assets/svg/icon_member_filled.svg'
-import icon_minify_outlined from '@/assets/svg/icon_minify_outlined.svg'
-import icon_momentsCategories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
-import icon_moreVertical_outlined from '@/assets/svg/icon_more-vertical_outlined.svg'
-import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
-import icon_newItem_outlined from '@/assets/svg/icon_new-item_outlined.svg'
-import icon_number_outlined from '@/assets/svg/icon_number_outlined.svg'
-import icon_url_outlined from '@/assets/svg/icon_url_outlined.svg'
-import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
-import icon_ordeList_outlined from '@/assets/svg/icon_orde-list_outlined.svg'
-import icon_organization_outlined from '@/assets/svg/icon_organization_outlined.svg'
-import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
-import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'
-import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
-import icon_pc_outlined_copy from '@/assets/svg/icon_pc_outlined_copy.svg'
-import icon_phone_outlined from '@/assets/svg/icon_phone_outlined.svg'
-import icon_pie_outlinedC from '@/assets/svg/icon_pie_outlined-c.svg'
-import icon_playRound_filled from '@/assets/svg/icon_play-round_filled.svg'
-import icon_playRound_outlined from '@/assets/svg/icon_play-round_outlined.svg'
-import icon_plugin_outlined from '@/assets/svg/icon_plugin_outlined.svg'
-import icon_pullLeft_outlined from '@/assets/svg/icon_pull-left_outlined.svg'
-import icon_pullRight_outlined from '@/assets/svg/icon_pull-right_outlined.svg'
-import icon_qr_outlined from '@/assets/svg/icon_qr_outlined.svg'
-import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
-import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
-import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
-import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
-import icon_reset_outlined from '@/assets/svg/icon_reset_outlined.svg'
-import icon_resetpassword from '@/assets/svg/icon_resetpassword.svg'
-import icon_rightAlign_outlined from '@/assets/svg/icon_right-align_outlined.svg'
-import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
-import icon_rightAssociation from '@/assets/svg/icon_right-association.svg'
-import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
-import icon_scroll_filled from '@/assets/svg/icon_scroll_filled.svg'
-import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
-import icon_search from '@/assets/svg/icon_search.svg'
-import icon_shareLabel_filled from '@/assets/svg/icon_share-label_filled.svg'
-import icon_shareLabel_outlined from '@/assets/svg/icon_share-label_outlined.svg'
-import icon_sideExpand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
-import icon_sideFold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
-import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'
-import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
-import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
-import icon_sql from '@/assets/svg/icon_sql.svg'
-import icon_sql_outlined from '@/assets/svg/icon_sql_outlined.svg'
-import icon_sql_outlined_1 from '@/assets/svg/icon_sql_outlined_1.svg'
-import icon_stretch_outlined from '@/assets/svg/icon_stretch_outlined.svg'
-import icon_styleSet_outlined from '@/assets/svg/icon_style-set_outlined.svg'
-import icon_succeed_colorful from '@/assets/svg/icon_succeed_colorful.svg'
-import icon_succeed_filled from '@/assets/svg/icon_succeed_filled.svg'
-import icon_switch_outlined from '@/assets/svg/icon_switch_outlined.svg'
-import icon_syncPlayRound_filled from '@/assets/svg/icon_sync-play-round_filled.svg'
-import icon_syncPlayRound_outlined from '@/assets/svg/icon_sync-play-round_outlined.svg'
-import icon_sync_close_log_details from '@/assets/svg/icon_sync_close_log_details.svg'
-import icon_sync_datasource from '@/assets/svg/icon_sync_datasource.svg'
-import icon_sync_log_number from '@/assets/svg/icon_sync_log_number.svg'
-import icon_sync_logs_outlined from '@/assets/svg/icon_sync_logs_outlined.svg'
-import icon_sync_progress from '@/assets/svg/icon_sync_progress.svg'
-import icon_sync_target_to_datasource from '@/assets/svg/icon_sync_target_to_datasource.svg'
-import icon_sync_task_number from '@/assets/svg/icon_sync_task_number.svg'
-import icon_takeAction_outlined from '@/assets/svg/icon_take-action_outlined.svg'
-import icon_teamAdd_outlined from '@/assets/svg/icon_team-add_outlined.svg'
-import icon_template from '@/assets/svg/icon_template.svg'
-import icon_template_colorful from '@/assets/svg/icon_template_colorful.svg'
-import icon_template_outlined from '@/assets/svg/icon_template_outlined.svg'
-import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'
-import icon_text_outlined from '@/assets/svg/icon_text_outlined.svg'
-import icon_time_outlined from '@/assets/svg/icon_time_outlined.svg'
-import icon_titleLeftAlign_outlined from '@/assets/svg/icon_title-left-align_outlined.svg'
-import icon_titleTopAlign_outlined from '@/assets/svg/icon_title-top-align_outlined.svg'
-import icon_topAlign_outlined from '@/assets/svg/icon_top-align_outlined.svg'
-import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
-import icon_upLeft_outlined from '@/assets/svg/icon_up-left_outlined.svg'
-import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
-import icon_verticalAlign_outlined from '@/assets/svg/icon_vertical-align_outlined.svg'
-import icon_viewList_outlined from '@/assets/svg/icon_view-list_outlined.svg'
-import icon_viewinchat_outlined from '@/assets/svg/icon_viewinchat_outlined.svg'
-import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
-import icon_warning_colorful from '@/assets/svg/icon_warning_colorful.svg'
-import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
-import icon_yes_outlined from '@/assets/svg/icon_yes_outlined.svg'
-import iconfont from '@/assets/svg/iconfont.svg'
-import impalaDs from '@/assets/svg/impala-ds.svg'
-import indicatorDark from '@/assets/svg/indicator-dark.svg'
-import indicatorOrigin from '@/assets/svg/indicator-origin.svg'
-import indicator from '@/assets/svg/indicator.svg'
-import innerJoin from '@/assets/svg/inner-join.svg'
-import international from '@/assets/svg/international.svg'
-import joinJoin from '@/assets/svg/join-join.svg'
-import label from '@/assets/svg/label.svg'
-import language from '@/assets/svg/language.svg'
-import leftJoin from '@/assets/svg/left-join.svg'
-import lineDark from '@/assets/svg/line-dark.svg'
-import lineOrigin from '@/assets/svg/line-origin.svg'
-import line from '@/assets/svg/line.svg'
-import linkBack from '@/assets/svg/link-back.svg'
-import linkDown from '@/assets/svg/link-down.svg'
-import link from '@/assets/svg/link.svg'
-import liquidDark from '@/assets/svg/liquid-dark.svg'
-import liquidOrigin from '@/assets/svg/liquid-origin.svg'
-import liquid from '@/assets/svg/liquid.svg'
-import lock_closed from '@/assets/svg/lock_closed.svg'
-import lock_closed_switch from '@/assets/svg/lock_closed_switch.svg'
-import lock_open from '@/assets/svg/lock_open.svg'
-import lock_open_back from '@/assets/svg/lock_open_back.svg'
-import lock_other_open from '@/assets/svg/lock_other_open.svg'
-import log from '@/assets/svg/log.svg'
-import logo from '@/assets/svg/logo.svg'
-import logo_cas from '@/assets/svg/logo_cas.svg'
-import logo_ldap from '@/assets/svg/logo_ldap.svg'
-import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
-import logo_lark from '@/assets/svg/logo_lark.svg'
-import logo_oauth from '@/assets/svg/logo_oauth.svg'
-import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
-import mapDark from '@/assets/svg/map-dark.svg'
-import mapOrigin from '@/assets/svg/map-origin.svg'
-import map from '@/assets/svg/map.svg'
-import map_mini from '@/assets/svg/map_mini.svg'
-import map_old from '@/assets/svg/map_old.svg'
-import mariadbDs from '@/assets/svg/mariadb-ds.svg'
-import marketExpand from '@/assets/svg/market-expand.svg'
-import marketRetract from '@/assets/svg/market-retract.svg'
-import menu from '@/assets/svg/menu.svg'
-import mobileIcon_dashboard_filled from '@/assets/svg/mobile/icon_dashboard_filled.svg'
-import mobileIcon_dashboard_outlined from '@/assets/svg/mobile/icon_dashboard_outlined.svg'
-import mobileIcon_home_filled from '@/assets/svg/mobile/icon_home_filled.svg'
-import mobileIcon_home_outlined from '@/assets/svg/mobile/icon_home_outlined.svg'
-import mobileIcon_member_filled from '@/assets/svg/mobile/icon_member_filled.svg'
-import mobileIcon_member_outlined from '@/assets/svg/mobile/icon_member_outlined.svg'
-import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'
-import mongoDs from '@/assets/svg/mongo-ds.svg'
-import more_v from '@/assets/svg/more_v.svg'
-import move from '@/assets/svg/move.svg'
-import msgSetting from '@/assets/svg/msg-setting.svg'
-import mysqlDs from '@/assets/svg/mysql-ds.svg'
-import mysqlFrame from '@/assets/svg/mysql-frame.svg'
-import nested from '@/assets/svg/nested.svg'
-import noJoin from '@/assets/svg/no-join.svg'
-import no_result from '@/assets/svg/no_result.svg'
-import nonExistent from '@/assets/svg/non-existent.svg'
-import none_select from '@/assets/svg/none_select.svg'
-import notification from '@/assets/svg/notification.svg'
-import oracleDs from '@/assets/svg/oracle-ds.svg'
-import org from '@/assets/svg/org.svg'
-import other_material from '@/assets/svg/other_material.svg'
-import other_material_board from '@/assets/svg/other_material_board.svg'
-import other_material_icon from '@/assets/svg/other_material_icon.svg'
-import other_media from '@/assets/svg/other_media.svg'
-import other_setting from '@/assets/svg/other_setting.svg'
-import other_text from '@/assets/svg/other_text.svg'
-import pageLine from '@/assets/svg/page-line.svg'
-import panelMobilePublish from '@/assets/svg/panel-mobile-publish.svg'
-import panelMobileUnpublishedBack from '@/assets/svg/panel-mobile-unpublished-back.svg'
-import panelMobileUnpublished from '@/assets/svg/panel-mobile-unpublished.svg'
-import panelPublish from '@/assets/svg/panel-publish.svg'
-import panelUnpublishedBack from '@/assets/svg/panel-unpublished-back.svg'
-import panelUnpublished from '@/assets/svg/panel-unpublished.svg'
-import panel from '@/assets/svg/panel.svg'
-import people from '@/assets/svg/people.svg'
-import peoples from '@/assets/svg/peoples.svg'
-import percentageBarStackDark from '@/assets/svg/percentage-bar-stack-dark.svg'
-import percentageBarStackHorizontalDark from '@/assets/svg/percentage-bar-stack-horizontal-dark.svg'
-import percentageBarStackHorizontalOrigin from '@/assets/svg/percentage-bar-stack-horizontal-origin.svg'
-import percentageBarStackHorizontal from '@/assets/svg/percentage-bar-stack-horizontal.svg'
-import percentageBarStackOrigin from '@/assets/svg/percentage-bar-stack-origin.svg'
-import percentageBarStack from '@/assets/svg/percentage-bar-stack.svg'
-import pgDs from '@/assets/svg/pg-ds.svg'
-import pieDark from '@/assets/svg/pie-dark.svg'
-import pieDonutDark from '@/assets/svg/pie-donut-dark.svg'
-import pieDonutOrigin from '@/assets/svg/pie-donut-origin.svg'
-import pieDonutRoseDark from '@/assets/svg/pie-donut-rose-dark.svg'
-import pieDonutRoseOrigin from '@/assets/svg/pie-donut-rose-origin.svg'
-import pieDonutRose from '@/assets/svg/pie-donut-rose.svg'
-import pieDonut from '@/assets/svg/pie-donut.svg'
-import pieOrigin from '@/assets/svg/pie-origin.svg'
-import pieRoseDark from '@/assets/svg/pie-rose-dark.svg'
-import pieRoseOrigin from '@/assets/svg/pie-rose-origin.svg'
-import pieRose from '@/assets/svg/pie-rose.svg'
-import pie from '@/assets/svg/pie.svg'
-import platform from '@/assets/svg/platform.svg'
-import plugin3dmap from '@/assets/svg/plugin-3dmap.svg'
-import plugin3dpie from '@/assets/svg/plugin-3dpie.svg'
-import pluginDameng from '@/assets/svg/plugin-dameng.svg'
-import pluginDefault from '@/assets/svg/plugin-default.svg'
-import plugin from '@/assets/svg/plugin.svg'
-import pluginsNew from '@/assets/svg/plugins-new.svg'
-import plugins from '@/assets/svg/plugins.svg'
-import progressBarDark from '@/assets/svg/progress-bar-dark.svg'
-import progressBarOrigin from '@/assets/svg/progress-bar-origin.svg'
-import progressBar from '@/assets/svg/progress-bar.svg'
-import pwd_invisible from '@/assets/svg/pwd_invisible.svg'
-import pwd_visible from '@/assets/svg/pwd_visible.svg'
-import quadrantDark from '@/assets/svg/quadrant-dark.svg'
-import quadrantOrigin from '@/assets/svg/quadrant-origin.svg'
-import quadrant from '@/assets/svg/quadrant.svg'
-import radarDark from '@/assets/svg/radar-dark.svg'
-import radarOrigin from '@/assets/svg/radar-origin.svg'
-import radar from '@/assets/svg/radar.svg'
-import readMsg from '@/assets/svg/read-msg.svg'
-import redshiftDs from '@/assets/svg/redshift-ds.svg'
-import referenceField from '@/assets/svg/reference-field.svg'
-import referencePlay from '@/assets/svg/reference-play.svg'
-import referenceSetting from '@/assets/svg/reference-setting.svg'
-import referenceTable from '@/assets/svg/reference-table.svg'
-import release from '@/assets/svg/release.svg'
-import report from '@/assets/svg/report.svg'
-import richTextDark from '@/assets/svg/rich-text-dark.svg'
-import richTextOrigin from '@/assets/svg/rich-text-origin.svg'
-import richText from '@/assets/svg/rich-text.svg'
-import richTextView from '@/assets/svg/richTextView.svg'
-import rightJoin from '@/assets/svg/right-join.svg'
-import role from '@/assets/svg/role.svg'
-import round_play from '@/assets/svg/round_play.svg'
-import sankeyDark from '@/assets/svg/sankey-dark.svg'
-import sankeyOrigin from '@/assets/svg/sankey-origin.svg'
-import sankey from '@/assets/svg/sankey.svg'
-import scatterDark from '@/assets/svg/scatter-dark.svg'
-import scatterOrigin from '@/assets/svg/scatter-origin.svg'
-import scatter from '@/assets/svg/scatter.svg'
-import scene from '@/assets/svg/scene.svg'
-import scrollText from '@/assets/svg/scroll-text.svg'
-import size from '@/assets/svg/size.svg'
-import sortAsc from '@/assets/svg/sort-asc.svg'
-import sortDesc from '@/assets/svg/sort-desc.svg'
-import sqlServerDs from '@/assets/svg/sqlServer-ds.svg'
-import stockLineDark from '@/assets/svg/stock-line-dark.svg'
-import stockLineOrigin from '@/assets/svg/stock-line-origin.svg'
-import stockLine from '@/assets/svg/stock-line.svg'
-import symbolicMapDark from '@/assets/svg/symbolic-map-dark.svg'
-import symbolicMapOrigin from '@/assets/svg/symbolic-map-origin.svg'
-import symbolicMap from '@/assets/svg/symbolic-map.svg'
-import sync from '@/assets/svg/sync.svg'
-import sysParam from '@/assets/svg/sys-param.svg'
-import sysParameter from '@/assets/svg/sys-parameter.svg'
-import sysRelationship from '@/assets/svg/sys-relationship.svg'
-import sysSetting from '@/assets/svg/sys-setting.svg'
-import sysTools from '@/assets/svg/sys-tools.svg'
-import system from '@/assets/svg/system.svg'
-import tableInfoDark from '@/assets/svg/table-info-dark.svg'
-import tableInfoOrigin from '@/assets/svg/table-info-origin.svg'
-import tableInfo from '@/assets/svg/table-info.svg'
-import tableNormalDark from '@/assets/svg/table-normal-dark.svg'
-import tableNormalOrigin from '@/assets/svg/table-normal-origin.svg'
-import tableNormal from '@/assets/svg/table-normal.svg'
-import tablePivotDark from '@/assets/svg/table-pivot-dark.svg'
-import tablePivotOrigin from '@/assets/svg/table-pivot-origin.svg'
-import tablePivot from '@/assets/svg/table-pivot.svg'
-import table from '@/assets/svg/table.svg'
-import task from '@/assets/svg/task.svg'
-import textDark from '@/assets/svg/text-dark.svg'
-import text from '@/assets/svg/text.svg'
-import titleBold from '@/assets/svg/title-bold.svg'
-import titleCenter from '@/assets/svg/title-center.svg'
-import titleItalic from '@/assets/svg/title-italic.svg'
-import titleLeft from '@/assets/svg/title-left.svg'
-import titleRight from '@/assets/svg/title-right.svg'
-import titleVBottom from '@/assets/svg/title-v-bottom.svg'
-import titleVCenter from '@/assets/svg/title-v-center.svg'
-import titleVTop from '@/assets/svg/title-v-top.svg'
-import toolboxData_fill from '@/assets/svg/toolbox-data_fill.svg'
-import toolboxIcon_template from '@/assets/svg/toolbox-icon_template.svg'
-import toolboxLog from '@/assets/svg/toolbox-log.svg'
-import topDocDefault from '@/assets/svg/top-doc-default.svg'
-import topEnterpriseTrial from '@/assets/svg/top-enterprise-trial.svg'
-import topHelpDoc from '@/assets/svg/top-help-doc.svg'
-import topProductBbs from '@/assets/svg/top-product-bbs.svg'
-import topTechVideo from '@/assets/svg/top-tech-video.svg'
-import topTechnology from '@/assets/svg/top-technology.svg'
-import tree from '@/assets/svg/tree.svg'
-import treemapDark from '@/assets/svg/treemap-dark.svg'
-import treemapOrigin from '@/assets/svg/treemap-origin.svg'
-import treemap from '@/assets/svg/treemap.svg'
-import unlock from '@/assets/svg/unlock.svg'
-import unpublished from '@/assets/svg/unpublished.svg'
-import unreadMsg from '@/assets/svg/unread-msg.svg'
-import userImg from '@/assets/svg/user-img.svg'
-import userReci from '@/assets/svg/user-reci.svg'
-import user from '@/assets/svg/user.svg'
-import variable from '@/assets/svg/variable.svg'
-import visualStar from '@/assets/svg/visual-star.svg'
-import warnTree from '@/assets/svg/warn-tree.svg'
-import waterfallDark from '@/assets/svg/waterfall-dark.svg'
-import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
-import waterfall from '@/assets/svg/waterfall.svg'
-import watermark from '@/assets/svg/watermark.svg'
-import webMsg from '@/assets/svg/web-msg.svg'
-import wizard_enterprise from '@/assets/svg/wizard_enterprise.svg'
-import wizard_help from '@/assets/svg/wizard_help.svg'
-import wizard_main_bg_inner from '@/assets/svg/wizard_main_bg_inner.svg'
-import wizard_quick_start from '@/assets/svg/wizard_quick_start.svg'
-import wordCloudDark from '@/assets/svg/word-cloud-dark.svg'
-import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
-import wordCloud from '@/assets/svg/word-cloud.svg'
-import icon_multi_line_outlined from '@/assets/svg/icon_multi-line_outlined.svg'
-import icon_radio_outlined from '@/assets/svg/icon_radio_outlined.svg'
-import icon_single_line_outlined from '@/assets/svg/icon_single-line_outlined.svg'
-import icon_todo_outlined from '@/assets/svg/icon_todo_outlined.svg'
-import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
-import icon_font from '@/assets/svg/icon_font.svg'
-import tHeatmap from '@/assets/svg/t-heatmap.svg'
-import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'
-import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
-const iconMap = {
-  '401': _401,
-  icon_link_calculated_outlined,
-  icon_link_calculated_outlined_1,
-  icon_text_calculated_outlined,
-  icon_text_calculated_outlined_1,
-  icon_number_calculated_outlined,
-  icon_number_calculated_outlined_1,
-  icon_local_calculated_outlined,
-  icon_local_calculated_outlined_1,
-  icon_calendar_calculated_outlined,
-  icon_calendar_calculated_outlined_1,
-  icon_adjustment_outlined,
-  icon_file_font_colorful,
-  relation_arrow_icon,
-  icon_data_visualization,
-  icon_notification_filled,
-  '403': _403,
-  'API-ds': APIDs,
-  'Apache Hive': Apache_Hive,
-  Checkbox: Checkbox,
-  DM: DM,
-  DataEase: DataEase,
-  Elasticsearch: Elasticsearch,
-  'Excel-ds': ExcelDs,
-  Frame: Frame,
-  KingBase: KingBase,
-  Kylin: Kylin,
-  Maxcompute: Maxcompute,
-  PDF: PDF,
-  Presto: Presto,
-  'StarRocks-ds': StarRocksDs,
-  'TiDB-ds': TiDBDs,
-  'active-btn_copilot': activeBtn_copilot,
-  add: add,
-  'all-msg': allMsg,
-  appearance: appearance,
-  'area-dark': areaDark,
-  'area-origin': areaOrigin,
-  'area-stack-dark': areaStackDark,
-  'area-stack-origin': areaStackOrigin,
-  'area-stack': areaStack,
-  area: area,
-  auth: auth,
-  authentication: authentication,
-  'bar-dark': barDark,
-  'bar-group-dark': barGroupDark,
-  'bar-group-origin': barGroupOrigin,
-  'bar-group-stack-dark': barGroupStackDark,
-  'bar-group-stack-origin': barGroupStackOrigin,
-  'bar-group-stack': barGroupStack,
-  'bar-group': barGroup,
-  'bar-horizontal-dark': barHorizontalDark,
-  'bar-horizontal-origin': barHorizontalOrigin,
-  'bar-horizontal': barHorizontal,
-  'bar-origin': barOrigin,
-  'bar-range-dark': barRangeDark,
-  'bar-range-origin': barRangeOrigin,
-  'bar-range': barRange,
-  'bar-stack-dark': barStackDark,
-  'bar-stack-horizontal-dark': barStackHorizontalDark,
-  'bar-stack-horizontal-origin': barStackHorizontalOrigin,
-  'bar-stack-horizontal': barStackHorizontal,
-  'bar-stack-origin': barStackOrigin,
-  'bar-stack': barStack,
-  bar: bar,
-  'bidirectional-bar-dark': bidirectionalBarDark,
-  'bidirectional-bar-origin': bidirectionalBarOrigin,
-  'bidirectional-bar': bidirectionalBar,
-  board_1: board_1,
-  board_2: board_2,
-  board_3: board_3,
-  board_4: board_4,
-  board_5: board_5,
-  board_6: board_6,
-  board_7: board_7,
-  board_8: board_8,
-  board_9: board_9,
-  btn_copilot: btn_copilot,
-  btn_oidc: btn_oidc,
-  'bubble-map-dark': bubbleMapDark,
-  'bubble-map-origin': bubbleMapOrigin,
-  'bubble-map': bubbleMap,
-  button_right: button_right,
-  cancel_release: cancel_release,
-  'chart-download': chartDownload,
-  'chart-mix-dark': chartMixDark,
-  'chart-mix-group-dark': chartMixGroupDark,
-  'chart-mix-group-origin': chartMixGroupOrigin,
-  'chart-mix-group': chartMixGroup,
-  'chart-mix-origin': chartMixOrigin,
-  'chart-mix-stack-dark': chartMixStackDark,
-  'chart-mix-stack-origin': chartMixStackOrigin,
-  'chart-mix-stack': chartMixStack,
-  'chart-mix': chartMix,
-  'chart-table': chartTable,
-  'ck-ds': ckDs,
-  copilot: copilot,
-  custom_sort: custom_sort,
-  dark_1: dark_1,
-  dashboard: dashboard,
-  'data-reference': dataReference,
-  database: database,
-  'dataset-outline': datasetOutline,
-  'dataset-task': datasetTask,
-  datasource: datasource,
-  'db-de': dbDe,
-  'db-more-web': dbMoreWeb,
-  'db2-ds': db2Ds,
-  'de-api-new': deApiNew,
-  'de-copy': deCopy,
-  'de-db-new': deDbNew,
-  'de-delete': deDelete,
-  'de-ds-error': deDsError,
-  'de-ds-move': deDsMove,
-  'de-ds-rename': deDsRename,
-  'de-ds-trash': deDsTrash,
-  'de-ds-warning': deDsWarning,
-  'de-excel-new': deExcelNew,
-  'de-json': deJson,
-  'de-move': deMove,
-  'de-search': deSearch,
-  'de-sql-new': deSqlNew,
-  'de-union-new': deUnionNew,
-  de_pwd_invisible: de_pwd_invisible,
-  de_pwd_visible: de_pwd_visible,
-  default_avatar: default_avatar,
-  delete: _delete,
-  'display-setting': displaySetting,
-  doc: doc,
-  docs: docs,
-  'doris-ds': dorisDs,
-  drag: drag,
-  'driver-de': driverDe,
-  'ds-api': dsApi,
-  'ds-custom': dsCustom,
-  'ds-db': dsDb,
-  'ds-excel': dsExcel,
-  'ds-sql': dsSql,
-  'ds-union': dsUnion,
-  'dv-ai-window-max': dvAiWindowMax,
-  'dv-ai-window-min': dvAiWindowMin,
-  'dv-ai': dvAi,
-  'dv-bar-enlarge': dvBarEnlarge,
-  'dv-bar-unLinkage': dvBarUnLinkage,
-  'dv-batch': dvBatch,
-  'dv-copy-dark': dvCopyDark,
-  'dv-copy': dvCopy,
-  'dv-dashboard-spine-mobile': dvDashboardSpineMobile,
-  'dv-dashboard-spine': dvDashboardSpine,
-  'dv-dashboard': dvDashboard,
-  'dv-delete': dvDelete,
-  'dv-details': dvDetails,
-  'dv-drag-tips': dvDragTips,
-  'dv-edit': dvEdit,
-  'dv-empty': dvEmpty,
-  'dv-expand-down': dvExpandDown,
-  'dv-expand-right': dvExpandRight,
-  'dv-eye-close': dvEyeClose,
-  'dv-filter-show': dvFilterShow,
-  'dv-filter': dvFilter,
-  'dv-folder': dvFolder,
-  'dv-head-more': dvHeadMore,
-  'dv-info': dvInfo,
-  'dv-link-target': dvLinkTarget,
-  'dv-lock': dvLock,
-  'dv-material': dvMaterial,
-  'dv-max': dvMax,
-  'dv-media': dvMedia,
-  'dv-min': dvMin,
-  'dv-more-com': dvMoreCom,
-  'dv-more-time-clock': dvMoreTimeClock,
-  'dv-more': dvMore,
-  'dv-move': dvMove,
-  'dv-new-folder': dvNewFolder,
-  'dv-new': dvNew,
-  'dv-no-img': dvNoImg,
-  'dv-nothing': dvNothing,
-  'dv-params': dvParams,
-  'dv-picture-real': dvPictureReal,
-  'dv-picture-show': dvPictureShow,
-  'dv-picture': dvPicture,
-  'dv-preview-download': dvPreviewDownload,
-  'dv-preview-inner': dvPreviewInner,
-  'dv-preview-outer': dvPreviewOuter,
-  'dv-preview': dvPreview,
-  'dv-rename': dvRename,
-  'dv-reposition': dvReposition,
-  'dv-richText': dvRichText,
-  'dv-ruler': dvRuler,
-  'dv-screen-new': dvScreenNew,
-  'dv-screen-spine': dvScreenSpine,
-  'dv-scroll-text': dvScrollText,
-  'dv-share': dvShare,
-  'dv-show': dvShow,
-  'dv-sort-asc': dvSortAsc,
-  'dv-sort-desc': dvSortDesc,
-  'dv-style-activeFont': dvStyleActiveFont,
-  'dv-style-activeFontSize': dvStyleActiveFontSize,
-  'dv-style-backgroundColor': dvStyleBackgroundColor,
-  'dv-style-borderColor': dvStyleBorderColor,
-  'dv-style-borderRadius': dvStyleBorderRadius,
-  'dv-style-borderSize': dvStyleBorderSize,
-  'dv-style-borderStyle': dvStyleBorderStyle,
-  'dv-style-color': dvStyleColor,
-  'dv-style-fontFamily': dvStyleFontFamily,
-  'dv-style-fontSize': dvStyleFontSize,
-  'dv-style-fontWeight': dvStyleFontWeight,
-  'dv-style-headBorderActiveColor': dvStyleHeadBorderActiveColor,
-  'dv-style-headBorderColor': dvStyleHeadBorderColor,
-  'dv-style-headFontActiveColor': dvStyleHeadFontActiveColor,
-  'dv-style-headFontColor': dvStyleHeadFontColor,
-  'dv-style-headHorizontalPosition': dvStyleHeadHorizontalPosition,
-  'dv-style-letterSpacing': dvStyleLetterSpacing,
-  'dv-style-lineHeight': dvStyleLineHeight,
-  'dv-style-opacity': dvStyleOpacity,
-  'dv-style-scroll-speed': dvStyleScrollSpeed,
-  'dv-style-textAlign': dvStyleTextAlign,
-  'dv-tab-show': dvTabShow,
-  'dv-tab': dvTab,
-  'dv-text': dvText,
-  'dv-unlock': dvUnlock,
-  'dv-up-arrow': dvUpArrow,
-  'dv-use-template': dvUseTemplate,
-  'dv-video': dvVideo,
-  'dv-view': dvView,
-  dv_mobile_layout: dv_mobile_layout,
-  'edit-done': editDone,
-  'edit-in': editIn,
-  edit: edit,
-  'email-task': emailTask,
-  embedded: embedded,
-  association: association,
-  threshold: threshold,
-  threshold_full,
-  example: example,
-  exclamationmark: exclamationmark,
-  exclamationmark2: exclamationmark2,
-  'exit-fullscreen': exitFullscreen,
-  'eye-open': eyeOpen,
-  eye: eye,
-  field_location: field_location,
-  field_text: field_text,
-  field_time: field_time,
-  field_value: field_value,
-  field_url: field_url,
-  'filter-center': filterCenter,
-  'filter-h-center': filterHCenter,
-  'filter-h-left': filterHLeft,
-  'filter-h-right': filterHRight,
-  'filter-top': filterTop,
-  'filter-params': filterParams,
-  filter: filter,
-  'flow-map-dark': flowMapDark,
-  'flow-map-origin': flowMapOrigin,
-  'flow-map': flowMap,
-  folder: folder,
-  form: form,
-  fullscreen: fullscreen,
-  'funnel-dark': funnelDark,
-  'funnel-origin': funnelOrigin,
-  funnel: funnel,
-  'gauge-dark': gaugeDark,
-  'gauge-origin': gaugeOrigin,
-  gauge: gauge,
-  'graphical-circular': graphicalCircular,
-  'graphical-rect': graphicalRect,
-  'graphical-triangle': graphicalTriangle,
-  'group-3400': group3400,
-  group: group,
-  'heat-map-dark': heatMapDark,
-  'heat-map-origin': heatMapOrigin,
-  'heat-map': heatMap,
-  'icon-ctrl-close': iconCtrlClose,
-  'icon-outline-notification': iconOutlineNotification,
-  'icon-alarmclock': iconAlarmclock,
-  'icon-contacts': iconContacts,
-  'icon-draft': iconDraft,
-  'icon-filter': iconFilter,
-  'icon-group': iconGroup,
-  'icon-image-upload': iconImageUpload,
-  'icon-image': iconImage,
-  'icon-laser': iconLaser,
-  'icon-lock': iconLock,
-  'icon-maybe': iconMaybe,
-  'icon-maybe_outlined': iconMaybe_outlined,
-  'icon-more': iconMore,
-  'icon-quicksetting': iconQuicksetting,
-  'icon-setting': iconSetting,
-  'icon-stream': iconStream,
-  'icon-video': iconVideo,
-  icon_Batch_outlined: icon_Batch_outlined,
-  icon_Invalid_colorful: icon_Invalid_colorful,
-  'icon_add-dictionary_outlined': icon_addDictionary_outlined,
-  'icon_add-entry_outlined': icon_addEntry_outlined,
-  'icon_add-folder_outlined': icon_addFolder_outlined,
-  'icon_add_outlined-1': icon_add_outlined1,
-  icon_add_outlined: icon_add_outlined,
-  icon_admin_outlined: icon_admin_outlined,
-  'icon_api-outlined': icon_apiOutlined,
-  icon_api: icon_api,
-  icon_app_outlined: icon_app_outlined,
-  'icon_arrow-right_outlined': icon_arrowRight_outlined,
-  icon_assigned_outlined: icon_assigned_outlined,
-  icon_attachment_outlined: icon_attachment_outlined,
-  icon_bold_outlined: icon_bold_outlined,
-  'icon_bottom-align_outlined': icon_bottomAlign_outlined,
-  icon_calendar_outlined: icon_calendar_outlined,
-  icon_cancel_store: icon_cancel_store,
-  icon_card_outlined: icon_card_outlined,
-  'icon_center-alignment_outlined': icon_centerAlignment_outlined,
-  'icon_chart-line-c': icon_chartLineC,
-  'icon_chart-line': icon_chartLine,
-  icon_clear_outlined: icon_clear_outlined,
-  icon_close_filled: icon_close_filled,
-  icon_close_outlined: icon_close_outlined,
-  icon_collect_filled: icon_collect_filled,
-  icon_collection_outlined: icon_collection_outlined,
-  icon_copy_filled: icon_copy_filled,
-  icon_copy_outlined: icon_copy_outlined,
-  icon_customize: icon_customize,
-  icon_dashboard: icon_dashboard,
-  'icon_dashboard_outlined-c': icon_dashboard_outlinedC,
-  icon_dashboard_outlined: icon_dashboard_outlined,
-  'icon_database-alert_filled': icon_databaseAlert_filled,
-  'icon_database-fail_filled': icon_databaseFail_filled,
-  icon_database: icon_database,
-  icon_database_outlined: icon_database_outlined,
-  icon_dataset: icon_dataset,
-  icon_dataset_outlined: icon_dataset_outlined,
-  icon_db_filled: icon_db_filled,
-  'icon_delete-trash_outlined': icon_deleteTrash_outlined,
-  icon_describe_outlined: icon_describe_outlined,
-  icon_dialpad_outlined: icon_dialpad_outlined,
-  'icon_disorde-list_outlined': icon_disordeList_outlined,
-  icon_divider_outlined: icon_divider_outlined,
-  'icon_doc-replace_outlined': icon_docReplace_outlined,
-  icon_done_outlined: icon_done_outlined,
-  'icon_down-right_outlined': icon_downRight_outlined,
-  'icon_down_outlined-1': icon_down_outlined1,
-  icon_down_outlined: icon_down_outlined,
-  icon_download_outlined: icon_download_outlined,
-  icon_drag_outlined: icon_drag_outlined,
-  icon_drilling_outlined: icon_drilling_outlined,
-  icon_drive_filled: icon_drive_filled,
-  icon_edit_outlined: icon_edit_outlined,
-  icon_effects_outlined: icon_effects_outlined,
-  icon_excel: icon_excel,
-  icon_excel_outlined: icon_excel_outlined,
-  'icon_expand-down_filled': icon_expandDown_filled,
-  'icon_expand-left_filled': icon_expandLeft_filled,
-  'icon_expand-right_filled': icon_expandRight_filled,
-  'icon_file-add_outlined': icon_fileAdd_outlined,
-  'icon_file-excel_colorful': icon_fileExcel_colorful,
-  icon_folder_filled: icon_folder_filled,
-  'icon_font-color_outlined': icon_fontColor_outlined,
-  icon_form_outlined: icon_form_outlined,
-  'icon_full-association': icon_fullAssociation,
-  icon_functions_outlined: icon_functions_outlined,
-  icon_graphical: icon_graphical,
-  icon_gridlines_outlined: icon_gridlines_outlined,
-  icon_h1_outlined: icon_h1_outlined,
-  icon_h2_outlined: icon_h2_outlined,
-  icon_h3_outlined: icon_h3_outlined,
-  icon_hn_outlined: icon_hn_outlined,
-  'icon_horizontal-align_outlined': icon_horizontalAlign_outlined,
-  icon_info_colorful: icon_info_colorful,
-  icon_info_filled: icon_info_filled,
-  icon_info_outlined: icon_info_outlined,
-  icon_intersect: icon_intersect,
-  'icon_into-item_outlined': icon_intoItem_outlined,
-  icon_invisible_outlined: icon_invisible_outlined,
-  icon_italic_outlined: icon_italic_outlined,
-  'icon_left-align_outlined': icon_leftAlign_outlined,
-  'icon_left-alignment_outlined': icon_leftAlignment_outlined,
-  'icon_left-association': icon_leftAssociation,
-  icon_left_outlined: icon_left_outlined,
-  'icon_letter-spacing_outlined': icon_letterSpacing_outlined,
-  'icon_link-record': icon_linkRecord,
-  'icon_link-record_outlined-1': icon_linkRecord_outlined1,
-  'icon_link-record_outlined': icon_linkRecord_outlined,
-  icon_loading_outlined: icon_loading_outlined,
-  icon_local: icon_local,
-  icon_local_outlined: icon_local_outlined,
-  'icon_logs_outlined-1': icon_logs_outlined1,
-  icon_logs_outlined: icon_logs_outlined,
-  icon_magnify_outlined: icon_magnify_outlined,
-  'icon_member-add_outlined': icon_memberAdd_outlined,
-  icon_member_filled: icon_member_filled,
-  icon_minify_outlined: icon_minify_outlined,
-  'icon_moments-categories_outlined': icon_momentsCategories_outlined,
-  'icon_more-vertical_outlined': icon_moreVertical_outlined,
-  icon_more_outlined: icon_more_outlined,
-  'icon_new-item_outlined': icon_newItem_outlined,
-  icon_number_outlined: icon_number_outlined,
-  icon_url_outlined: icon_url_outlined,
-  'icon_operation-analysis_outlined': icon_operationAnalysis_outlined,
-  'icon_orde-list_outlined': icon_ordeList_outlined,
-  icon_organization_outlined: icon_organization_outlined,
-  icon_params_setting: icon_params_setting,
-  icon_pc_fullscreen: icon_pc_fullscreen,
-  icon_pc_outlined: icon_pc_outlined,
-  icon_pc_outlined_copy: icon_pc_outlined_copy,
-  icon_phone_outlined: icon_phone_outlined,
-  'icon_pie_outlined-c': icon_pie_outlinedC,
-  'icon_play-round_filled': icon_playRound_filled,
-  'icon_play-round_outlined': icon_playRound_outlined,
-  icon_plugin_outlined: icon_plugin_outlined,
-  'icon_pull-left_outlined': icon_pullLeft_outlined,
-  'icon_pull-right_outlined': icon_pullRight_outlined,
-  icon_qr_outlined: icon_qr_outlined,
-  icon_redo_outlined: icon_redo_outlined,
-  icon_refresh_outlined: icon_refresh_outlined,
-  icon_rename_outlined: icon_rename_outlined,
-  icon_replace_outlined: icon_replace_outlined,
-  icon_reset_outlined: icon_reset_outlined,
-  icon_resetpassword: icon_resetpassword,
-  'icon_right-align_outlined': icon_rightAlign_outlined,
-  'icon_right-alignment_outlined': icon_rightAlignment_outlined,
-  'icon_right-association': icon_rightAssociation,
-  icon_right_outlined: icon_right_outlined,
-  icon_scroll_filled: icon_scroll_filled,
-  icon_radio_outlined: icon_radio_outlined,
-  icon_todo_outlined: icon_todo_outlined,
-  'icon_single-line_outlined': icon_single_line_outlined,
-  'icon_multi-line_outlined': icon_multi_line_outlined,
-  'icon_search-outline_outlined': icon_searchOutline_outlined,
-  icon_search: icon_search,
-  'icon_share-label_filled': icon_shareLabel_filled,
-  'icon_share-label_outlined': icon_shareLabel_outlined,
-  'icon_side-expand_outlined': icon_sideExpand_outlined,
-  'icon_side-fold_outlined': icon_sideFold_outlined,
-  'icon_sort-a-to-z_outlined': icon_sortAToZ_outlined,
-  'icon_sort-z-to-a_outlined': icon_sortZToA_outlined,
-  icon_sort_outlined: icon_sort_outlined,
-  icon_sql: icon_sql,
-  icon_sql_outlined: icon_sql_outlined,
-  icon_sql_outlined_1: icon_sql_outlined_1,
-  icon_stretch_outlined: icon_stretch_outlined,
-  'icon_style-set_outlined': icon_styleSet_outlined,
-  icon_succeed_colorful: icon_succeed_colorful,
-  icon_succeed_filled: icon_succeed_filled,
-  icon_switch_outlined: icon_switch_outlined,
-  'icon_sync-play-round_filled': icon_syncPlayRound_filled,
-  'icon_sync-play-round_outlined': icon_syncPlayRound_outlined,
-  icon_sync_close_log_details: icon_sync_close_log_details,
-  icon_sync_datasource: icon_sync_datasource,
-  icon_sync_log_number: icon_sync_log_number,
-  icon_sync_logs_outlined: icon_sync_logs_outlined,
-  icon_sync_progress: icon_sync_progress,
-  icon_sync_target_to_datasource: icon_sync_target_to_datasource,
-  icon_sync_task_number: icon_sync_task_number,
-  'icon_take-action_outlined': icon_takeAction_outlined,
-  'icon_team-add_outlined': icon_teamAdd_outlined,
-  icon_template: icon_template,
-  icon_template_colorful: icon_template_colorful,
-  icon_template_outlined: icon_template_outlined,
-  'icon_text-box_outlined': icon_textBox_outlined,
-  icon_text_outlined: icon_text_outlined,
-  icon_time_outlined: icon_time_outlined,
-  'icon_title-left-align_outlined': icon_titleLeftAlign_outlined,
-  'icon_title-top-align_outlined': icon_titleTopAlign_outlined,
-  'icon_top-align_outlined': icon_topAlign_outlined,
-  icon_undo_outlined: icon_undo_outlined,
-  'icon_up-left_outlined': icon_upLeft_outlined,
-  icon_upload_outlined: icon_upload_outlined,
-  'icon_vertical-align_outlined': icon_verticalAlign_outlined,
-  'icon_view-list_outlined': icon_viewList_outlined,
-  icon_viewinchat_outlined: icon_viewinchat_outlined,
-  icon_visible_outlined: icon_visible_outlined,
-  icon_warning_colorful: icon_warning_colorful,
-  icon_warning_filled: icon_warning_filled,
-  icon_yes_outlined: icon_yes_outlined,
-  iconfont: iconfont,
-  'impala-ds': impalaDs,
-  'indicator-dark': indicatorDark,
-  'indicator-origin': indicatorOrigin,
-  indicator: indicator,
-  'inner-join': innerJoin,
-  international: international,
-  'join-join': joinJoin,
-  label: label,
-  language: language,
-  'left-join': leftJoin,
-  'line-dark': lineDark,
-  'line-origin': lineOrigin,
-  line: line,
-  'link-back': linkBack,
-  'link-down': linkDown,
-  link: link,
-  'liquid-dark': liquidDark,
-  'liquid-origin': liquidOrigin,
-  liquid: liquid,
-  lock_closed: lock_closed,
-  lock_closed_switch: lock_closed_switch,
-  lock_open: lock_open,
-  lock_open_back: lock_open_back,
-  lock_other_open: lock_other_open,
-  log: log,
-  logo: logo,
-  logo_cas: logo_cas,
-  logo_ldap: logo_ldap,
-  logo_dingtalk: logo_dingtalk,
-  logo_lark: logo_lark,
-  logo_oauth: logo_oauth,
-  'logo_wechat-work': logo_wechatWork,
-  'map-dark': mapDark,
-  'map-origin': mapOrigin,
-  map: map,
-  map_mini: map_mini,
-  map_old: map_old,
-  'mariadb-ds': mariadbDs,
-  'market-expand': marketExpand,
-  'market-retract': marketRetract,
-  menu: menu,
-  'mobile-icon_dashboard_filled': mobileIcon_dashboard_filled,
-  'mobile-icon_dashboard_outlined': mobileIcon_dashboard_outlined,
-  'mobile-icon_home_filled': mobileIcon_home_filled,
-  'mobile-icon_home_outlined': mobileIcon_home_outlined,
-  'mobile-icon_member_filled': mobileIcon_member_filled,
-  'mobile-icon_member_outlined': mobileIcon_member_outlined,
-  'mobile-checkbox': mobileCheckbox,
-  'mongo-ds': mongoDs,
-  more_v: more_v,
-  move: move,
-  'msg-setting': msgSetting,
-  'mysql-ds': mysqlDs,
-  'mysql-frame': mysqlFrame,
-  nested: nested,
-  'no-join': noJoin,
-  no_result: no_result,
-  'non-existent': nonExistent,
-  none_select: none_select,
-  notification: notification,
-  'oracle-ds': oracleDs,
-  org: org,
-  other_material: other_material,
-  other_material_board: other_material_board,
-  other_material_icon: other_material_icon,
-  other_media: other_media,
-  other_setting: other_setting,
-  other_text: other_text,
-  'page-line': pageLine,
-  'panel-mobile-publish': panelMobilePublish,
-  'panel-mobile-unpublished-back': panelMobileUnpublishedBack,
-  'panel-mobile-unpublished': panelMobileUnpublished,
-  'panel-publish': panelPublish,
-  'panel-unpublished-back': panelUnpublishedBack,
-  'panel-unpublished': panelUnpublished,
-  panel: panel,
-  people: people,
-  peoples: peoples,
-  'percentage-bar-stack-dark': percentageBarStackDark,
-  'percentage-bar-stack-horizontal-dark': percentageBarStackHorizontalDark,
-  'percentage-bar-stack-horizontal-origin': percentageBarStackHorizontalOrigin,
-  'percentage-bar-stack-horizontal': percentageBarStackHorizontal,
-  'percentage-bar-stack-origin': percentageBarStackOrigin,
-  'percentage-bar-stack': percentageBarStack,
-  'pg-ds': pgDs,
-  'pie-dark': pieDark,
-  'pie-donut-dark': pieDonutDark,
-  'pie-donut-origin': pieDonutOrigin,
-  'pie-donut-rose-dark': pieDonutRoseDark,
-  'pie-donut-rose-origin': pieDonutRoseOrigin,
-  'pie-donut-rose': pieDonutRose,
-  'pie-donut': pieDonut,
-  'pie-origin': pieOrigin,
-  'pie-rose-dark': pieRoseDark,
-  'pie-rose-origin': pieRoseOrigin,
-  'pie-rose': pieRose,
-  pie: pie,
-  platform: platform,
-  'plugin-3dmap': plugin3dmap,
-  'plugin-3dpie': plugin3dpie,
-  'plugin-dameng': pluginDameng,
-  'plugin-default': pluginDefault,
-  plugin: plugin,
-  'plugins-new': pluginsNew,
-  plugins: plugins,
-  'progress-bar-dark': progressBarDark,
-  'progress-bar-origin': progressBarOrigin,
-  'progress-bar': progressBar,
-  pwd_invisible: pwd_invisible,
-  pwd_visible: pwd_visible,
-  'quadrant-dark': quadrantDark,
-  'quadrant-origin': quadrantOrigin,
-  quadrant: quadrant,
-  'radar-dark': radarDark,
-  'radar-origin': radarOrigin,
-  radar: radar,
-  'read-msg': readMsg,
-  'redshift-ds': redshiftDs,
-  'reference-field': referenceField,
-  'reference-play': referencePlay,
-  'reference-setting': referenceSetting,
-  'reference-table': referenceTable,
-  release: release,
-  report: report,
-  'rich-text-dark': richTextDark,
-  'rich-text-origin': richTextOrigin,
-  'rich-text': richText,
-  richTextView: richTextView,
-  'right-join': rightJoin,
-  role: role,
-  round_play: round_play,
-  'sankey-dark': sankeyDark,
-  'sankey-origin': sankeyOrigin,
-  sankey: sankey,
-  'scatter-dark': scatterDark,
-  'scatter-origin': scatterOrigin,
-  scatter: scatter,
-  scene: scene,
-  'scroll-text': scrollText,
-  size: size,
-  'sort-asc': sortAsc,
-  'sort-desc': sortDesc,
-  'sqlServer-ds': sqlServerDs,
-  'stock-line-dark': stockLineDark,
-  'stock-line-origin': stockLineOrigin,
-  'stock-line': stockLine,
-  'symbolic-map-dark': symbolicMapDark,
-  'symbolic-map-origin': symbolicMapOrigin,
-  'symbolic-map': symbolicMap,
-  sync: sync,
-  'sys-param': sysParam,
-  'sys-parameter': sysParameter,
-  'sys-relationship': sysRelationship,
-  'sys-setting': sysSetting,
-  'sys-tools': sysTools,
-  system: system,
-  'table-info-dark': tableInfoDark,
-  'table-info-origin': tableInfoOrigin,
-  'table-info': tableInfo,
-  'table-normal-dark': tableNormalDark,
-  'table-normal-origin': tableNormalOrigin,
-  'table-normal': tableNormal,
-  'table-pivot-dark': tablePivotDark,
-  'table-pivot-origin': tablePivotOrigin,
-  'table-pivot': tablePivot,
-  table: table,
-  task: task,
-  'text-dark': textDark,
-  text: text,
-  'title-bold': titleBold,
-  'title-center': titleCenter,
-  'title-italic': titleItalic,
-  'title-left': titleLeft,
-  'title-right': titleRight,
-  'title-v-bottom': titleVBottom,
-  'title-v-center': titleVCenter,
-  'title-v-top': titleVTop,
-  'toolbox-data_fill': toolboxData_fill,
-  'toolbox-icon_template': toolboxIcon_template,
-  'toolbox-log': toolboxLog,
-  'top-doc-default': topDocDefault,
-  'top-enterprise-trial': topEnterpriseTrial,
-  'top-help-doc': topHelpDoc,
-  'top-product-bbs': topProductBbs,
-  'top-tech-video': topTechVideo,
-  'top-technology': topTechnology,
-  tree: tree,
-  'treemap-dark': treemapDark,
-  'treemap-origin': treemapOrigin,
-  treemap: treemap,
-  unlock: unlock,
-  unpublished: unpublished,
-  'unread-msg': unreadMsg,
-  'user-img': userImg,
-  'user-reci': userReci,
-  user: user,
-  variable: variable,
-  'visual-star': visualStar,
-  'warn-tree': warnTree,
-  'waterfall-dark': waterfallDark,
-  'waterfall-origin': waterfallOrigin,
-  waterfall: waterfall,
-  watermark: watermark,
-  'web-msg': webMsg,
-  wizard_enterprise: wizard_enterprise,
-  wizard_help: wizard_help,
-  wizard_main_bg_inner: wizard_main_bg_inner,
-  wizard_quick_start: wizard_quick_start,
-  'word-cloud-dark': wordCloudDark,
-  'word-cloud-origin': wordCloudOrigin,
-  'word-cloud': wordCloud,
-  calculate,
-  'icon_file-doc_colorful': icon_file_doc_colorful,
-  icon_font,
-  clock,
-  't-heatmap': tHeatmap,
-  't-heatmap-dark': tHeatmapDark,
-  't-heatmap-origin': tHeatmapOrigin
-}
-
 const props = defineProps({
   prefix: propTypes.string.def('icon'),
   name: propTypes.string,
@@ -1409,7 +23,7 @@ const svgClass = computed(() => {
     :class="svgClass"
     aria-hidden="true"
   ></div>
-  <component v-else :class="svgClass" :is="iconMap[name]"></component>
+  <slot v-else :class="svgClass" />
 </template>
 <style lang="less" scope>
 .svg-icon {
diff --git a/core/core-frontend/src/components/icon-group/board-list.ts b/core/core-frontend/src/components/icon-group/board-list.ts
new file mode 100644
index 0000000000..29a6032bfd
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/board-list.ts
@@ -0,0 +1,22 @@
+import board_1 from '@/assets/svg/board_1.svg'
+import board_2 from '@/assets/svg/board_2.svg'
+import board_3 from '@/assets/svg/board_3.svg'
+import board_4 from '@/assets/svg/board_4.svg'
+import board_5 from '@/assets/svg/board_5.svg'
+import board_6 from '@/assets/svg/board_6.svg'
+import board_7 from '@/assets/svg/board_7.svg'
+import board_8 from '@/assets/svg/board_8.svg'
+import board_9 from '@/assets/svg/board_9.svg'
+
+const iconBoardMap = {
+  board_1: board_1,
+  board_2: board_2,
+  board_3: board_3,
+  board_4: board_4,
+  board_5: board_5,
+  board_6: board_6,
+  board_7: board_7,
+  board_8: board_8,
+  board_9: board_9
+}
+export { iconBoardMap }
diff --git a/core/core-frontend/src/components/icon-group/chart-dark-list.ts b/core/core-frontend/src/components/icon-group/chart-dark-list.ts
new file mode 100644
index 0000000000..21d8b090d0
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/chart-dark-list.ts
@@ -0,0 +1,91 @@
+import areaDark from '@/assets/svg/area-dark.svg'
+import areaStackDark from '@/assets/svg/area-stack-dark.svg'
+import barDark from '@/assets/svg/bar-dark.svg'
+import barGroupDark from '@/assets/svg/bar-group-dark.svg'
+import barGroupStackDark from '@/assets/svg/bar-group-stack-dark.svg'
+import barHorizontalDark from '@/assets/svg/bar-horizontal-dark.svg'
+import barRangeDark from '@/assets/svg/bar-range-dark.svg'
+import barStackDark from '@/assets/svg/bar-stack-dark.svg'
+import barStackHorizontalDark from '@/assets/svg/bar-stack-horizontal-dark.svg'
+import bidirectionalBarDark from '@/assets/svg/bidirectional-bar-dark.svg'
+import bubbleMapDark from '@/assets/svg/bubble-map-dark.svg'
+import chartMixDark from '@/assets/svg/chart-mix-dark.svg'
+import chartMixGroupDark from '@/assets/svg/chart-mix-group-dark.svg'
+import chartMixStackDark from '@/assets/svg/chart-mix-stack-dark.svg'
+import flowMapDark from '@/assets/svg/flow-map-dark.svg'
+import funnelDark from '@/assets/svg/funnel-dark.svg'
+import gaugeDark from '@/assets/svg/gauge-dark.svg'
+import heatMapDark from '@/assets/svg/heat-map-dark.svg'
+import indicatorDark from '@/assets/svg/indicator-dark.svg'
+import lineDark from '@/assets/svg/line-dark.svg'
+import liquidDark from '@/assets/svg/liquid-dark.svg'
+import mapDark from '@/assets/svg/map-dark.svg'
+import percentageBarStackDark from '@/assets/svg/percentage-bar-stack-dark.svg'
+import percentageBarStackHorizontalDark from '@/assets/svg/percentage-bar-stack-horizontal-dark.svg'
+import pieDark from '@/assets/svg/pie-dark.svg'
+import pieDonutDark from '@/assets/svg/pie-donut-dark.svg'
+import pieDonutRoseDark from '@/assets/svg/pie-donut-rose-dark.svg'
+import pieRoseDark from '@/assets/svg/pie-rose-dark.svg'
+import progressBarDark from '@/assets/svg/progress-bar-dark.svg'
+import quadrantDark from '@/assets/svg/quadrant-dark.svg'
+import radarDark from '@/assets/svg/radar-dark.svg'
+import richTextDark from '@/assets/svg/rich-text-dark.svg'
+import sankeyDark from '@/assets/svg/sankey-dark.svg'
+import scatterDark from '@/assets/svg/scatter-dark.svg'
+import stockLineDark from '@/assets/svg/stock-line-dark.svg'
+import symbolicMapDark from '@/assets/svg/symbolic-map-dark.svg'
+import tableInfoDark from '@/assets/svg/table-info-dark.svg'
+import tableNormalDark from '@/assets/svg/table-normal-dark.svg'
+import tablePivotDark from '@/assets/svg/table-pivot-dark.svg'
+import treemapDark from '@/assets/svg/treemap-dark.svg'
+import waterfallDark from '@/assets/svg/waterfall-dark.svg'
+import wordCloudDark from '@/assets/svg/word-cloud-dark.svg'
+import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'
+
+const iconChartDarkMap = {
+  'area-dark': areaDark,
+  'area-stack-dark': areaStackDark,
+  'bar-dark': barDark,
+  'bar-group-dark': barGroupDark,
+  'bar-group-stack-dark': barGroupStackDark,
+  'bar-horizontal-dark': barHorizontalDark,
+  'bar-range-dark': barRangeDark,
+  'bar-stack-dark': barStackDark,
+  'bar-stack-horizontal-dark': barStackHorizontalDark,
+  'bidirectional-bar-dark': bidirectionalBarDark,
+  'bubble-map-dark': bubbleMapDark,
+  'chart-mix-dark': chartMixDark,
+  'chart-mix-group-dark': chartMixGroupDark,
+  'chart-mix-stack-dark': chartMixStackDark,
+  'flow-map-dark': flowMapDark,
+  'funnel-dark': funnelDark,
+  'gauge-dark': gaugeDark,
+  'heat-map-dark': heatMapDark,
+  'indicator-dark': indicatorDark,
+  'line-dark': lineDark,
+  'liquid-dark': liquidDark,
+  'map-dark': mapDark,
+  'percentage-bar-stack-dark': percentageBarStackDark,
+  'percentage-bar-stack-horizontal-dark': percentageBarStackHorizontalDark,
+  'pie-dark': pieDark,
+  'pie-donut-dark': pieDonutDark,
+  'pie-donut-rose-dark': pieDonutRoseDark,
+  'pie-rose-dark': pieRoseDark,
+  'progress-bar-dark': progressBarDark,
+  'quadrant-dark': quadrantDark,
+  'radar-dark': radarDark,
+  'rich-text-dark': richTextDark,
+  'sankey-dark': sankeyDark,
+  'scatter-dark': scatterDark,
+  'stock-line-dark': stockLineDark,
+  'symbolic-map-dark': symbolicMapDark,
+  'table-info-dark': tableInfoDark,
+  'table-normal-dark': tableNormalDark,
+  'table-pivot-dark': tablePivotDark,
+  'treemap-dark': treemapDark,
+  'waterfall-dark': waterfallDark,
+  'word-cloud-dark': wordCloudDark,
+  't-heatmap-dark': tHeatmapDark
+}
+
+export { iconChartDarkMap }
diff --git a/core/core-frontend/src/components/icon-group/chart-list.ts b/core/core-frontend/src/components/icon-group/chart-list.ts
new file mode 100644
index 0000000000..259e70e714
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/chart-list.ts
@@ -0,0 +1,91 @@
+import areaStack from '@/assets/svg/area-stack.svg'
+import area from '@/assets/svg/area.svg'
+import barGroupStack from '@/assets/svg/bar-group-stack.svg'
+import barGroup from '@/assets/svg/bar-group.svg'
+import barHorizontal from '@/assets/svg/bar-horizontal.svg'
+import barRange from '@/assets/svg/bar-range.svg'
+import barStackHorizontal from '@/assets/svg/bar-stack-horizontal.svg'
+import barStack from '@/assets/svg/bar-stack.svg'
+import bar from '@/assets/svg/bar.svg'
+import bidirectionalBar from '@/assets/svg/bidirectional-bar.svg'
+import bubbleMap from '@/assets/svg/bubble-map.svg'
+import chartMixGroup from '@/assets/svg/chart-mix-group.svg'
+import chartMixStack from '@/assets/svg/chart-mix-stack.svg'
+import chartMix from '@/assets/svg/chart-mix.svg'
+import flowMap from '@/assets/svg/flow-map.svg'
+import funnel from '@/assets/svg/funnel.svg'
+import gauge from '@/assets/svg/gauge.svg'
+import heatMap from '@/assets/svg/heat-map.svg'
+import indicator from '@/assets/svg/indicator.svg'
+import line from '@/assets/svg/line.svg'
+import liquid from '@/assets/svg/liquid.svg'
+import map from '@/assets/svg/map.svg'
+import percentageBarStackHorizontal from '@/assets/svg/percentage-bar-stack-horizontal.svg'
+import percentageBarStack from '@/assets/svg/percentage-bar-stack.svg'
+import pieDonutRose from '@/assets/svg/pie-donut-rose.svg'
+import pieDonut from '@/assets/svg/pie-donut.svg'
+import pieRose from '@/assets/svg/pie-rose.svg'
+import pie from '@/assets/svg/pie.svg'
+import progressBar from '@/assets/svg/progress-bar.svg'
+import quadrant from '@/assets/svg/quadrant.svg'
+import radar from '@/assets/svg/radar.svg'
+import richText from '@/assets/svg/rich-text.svg'
+import sankey from '@/assets/svg/sankey.svg'
+import scatter from '@/assets/svg/scatter.svg'
+import stockLine from '@/assets/svg/stock-line.svg'
+import symbolicMap from '@/assets/svg/symbolic-map.svg'
+import tableInfo from '@/assets/svg/table-info.svg'
+import tableNormal from '@/assets/svg/table-normal.svg'
+import tablePivot from '@/assets/svg/table-pivot.svg'
+import treemap from '@/assets/svg/treemap.svg'
+import waterfall from '@/assets/svg/waterfall.svg'
+import wordCloud from '@/assets/svg/word-cloud.svg'
+import tHeatmap from '@/assets/svg/t-heatmap.svg'
+
+const iconChartMap = {
+  'area-stack': areaStack,
+  area: area,
+  'bar-group-stack': barGroupStack,
+  'bar-group': barGroup,
+  'bar-horizontal': barHorizontal,
+  'bar-range': barRange,
+  'bar-stack-horizontal': barStackHorizontal,
+  'bar-stack': barStack,
+  bar: bar,
+  'bidirectional-bar': bidirectionalBar,
+  'bubble-map': bubbleMap,
+  'chart-mix-group': chartMixGroup,
+  'chart-mix-stack': chartMixStack,
+  'chart-mix': chartMix,
+  'flow-map': flowMap,
+  funnel: funnel,
+  gauge: gauge,
+  'heat-map': heatMap,
+  indicator: indicator,
+  line: line,
+  liquid: liquid,
+  map: map,
+  'percentage-bar-stack-horizontal': percentageBarStackHorizontal,
+  'percentage-bar-stack': percentageBarStack,
+  'pie-donut-rose': pieDonutRose,
+  'pie-donut': pieDonut,
+  'pie-rose': pieRose,
+  pie: pie,
+  'progress-bar': progressBar,
+  quadrant: quadrant,
+  radar: radar,
+  'rich-text': richText,
+  sankey: sankey,
+  scatter: scatter,
+  'stock-line': stockLine,
+  'symbolic-map': symbolicMap,
+  'table-info': tableInfo,
+  'table-normal': tableNormal,
+  'table-pivot': tablePivot,
+  treemap: treemap,
+  waterfall: waterfall,
+  'word-cloud': wordCloud,
+  't-heatmap': tHeatmap
+}
+
+export { iconChartMap }
diff --git a/core/core-frontend/src/components/icon-group/datasource-list.ts b/core/core-frontend/src/components/icon-group/datasource-list.ts
new file mode 100644
index 0000000000..44167b92e7
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/datasource-list.ts
@@ -0,0 +1,34 @@
+import mysqlDs from '@/assets/svg/mysql-ds.svg'
+import oracleDs from '@/assets/svg/oracle-ds.svg'
+import sqlServerDs from '@/assets/svg/sqlServer-ds.svg'
+import TiDBDs from '@/assets/svg/TiDB-ds.svg'
+import impalaDs from '@/assets/svg/impala-ds.svg'
+import mariadbDs from '@/assets/svg/mariadb-ds.svg'
+import StarRocksDs from '@/assets/svg/StarRocks-ds.svg'
+import pgDs from '@/assets/svg/pg-ds.svg'
+import mongoDs from '@/assets/svg/mongo-ds.svg'
+import ckDs from '@/assets/svg/ck-ds.svg'
+import db2Ds from '@/assets/svg/db2-ds.svg'
+import redshiftDs from '@/assets/svg/redshift-ds.svg'
+import APIDs from '@/assets/svg/API-ds.svg'
+import ExcelDs from '@/assets/svg/Excel-ds.svg'
+import dorisDs from '@/assets/svg/doris-ds.svg'
+const iconDatasourceMap = {
+  mysql: mysqlDs,
+  oracle: oracleDs,
+  sqlServer: sqlServerDs,
+  TiDB: TiDBDs,
+  impala: impalaDs,
+  mariadb: mariadbDs,
+  StarRocks: StarRocksDs,
+  pg: pgDs,
+  mongo: mongoDs,
+  ck: ckDs,
+  db2: db2Ds,
+  redshift: redshiftDs,
+  API: APIDs,
+  Excel: ExcelDs,
+  doris: dorisDs
+}
+
+export { iconDatasourceMap }
diff --git a/core/core-frontend/src/components/icon-group/field-calculated-list.ts b/core/core-frontend/src/components/icon-group/field-calculated-list.ts
new file mode 100644
index 0000000000..583cd832ba
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/field-calculated-list.ts
@@ -0,0 +1,33 @@
+import icon_link_calculated_outlined from '@/assets/svg/icon_link-calculated_outlined.svg'
+import icon_link_calculated_outlined_1 from '@/assets/svg/icon_link-calculated_outlined-1.svg'
+import icon_text_calculated_outlined from '@/assets/svg/icon_text-calculated_outlined.svg'
+import icon_text_calculated_outlined_1 from '@/assets/svg/icon_text-calculated_outlined-1.svg'
+import icon_number_calculated_outlined from '@/assets/svg/icon_number-calculated_outlined.svg'
+import icon_number_calculated_outlined_1 from '@/assets/svg/icon_number-calculated_outlined-1.svg'
+import icon_local_calculated_outlined from '@/assets/svg/icon_local-calculated_outlined.svg'
+import icon_local_calculated_outlined_1 from '@/assets/svg/icon_local-calculated_outlined-1.svg'
+import icon_calendar_calculated_outlined from '@/assets/svg/icon_calendar-calculated_outlined.svg'
+import icon_calendar_calculated_outlined_1 from '@/assets/svg/icon_calendar-calculated_outlined-1.svg'
+const iconFieldCalculatedMap = [
+  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
+]
+
+const iconFieldCalculatedQMap = [
+  icon_text_calculated_outlined_1,
+  icon_calendar_calculated_outlined_1,
+  icon_number_calculated_outlined_1,
+  icon_number_calculated_outlined_1,
+  icon_number_calculated_outlined_1,
+  icon_local_calculated_outlined_1,
+  'binary',
+  icon_link_calculated_outlined_1
+]
+
+export { iconFieldCalculatedMap, iconFieldCalculatedQMap }
diff --git a/core/core-frontend/src/components/icon-group/field-list.ts b/core/core-frontend/src/components/icon-group/field-list.ts
new file mode 100644
index 0000000000..784ae359fd
--- /dev/null
+++ b/core/core-frontend/src/components/icon-group/field-list.ts
@@ -0,0 +1,14 @@
+import field_text from '@/assets/svg/field_text.svg'
+import field_time from '@/assets/svg/field_time.svg'
+import field_value from '@/assets/svg/field_value.svg'
+import field_location from '@/assets/svg/field_location.svg'
+import field_url from '@/assets/svg/field_url.svg'
+const iconFieldMap = {
+  text: field_text,
+  value: field_value,
+  location: field_location,
+  time: field_time,
+  url: field_url
+}
+
+export { iconFieldMap }
diff --git a/core/core-frontend/src/components/plugin/src/index.vue b/core/core-frontend/src/components/plugin/src/index.vue
index 3f0aeaae0d..663eb2771a 100644
--- a/core/core-frontend/src/components/plugin/src/index.vue
+++ b/core/core-frontend/src/components/plugin/src/index.vue
@@ -102,38 +102,7 @@ const invokeMethod = param => {
 }
 
 onMounted(async () => {
-  const key = 'xpack-model-distributed'
-  let distributed = false
-  if (wsCache.get(key) === null) {
-    const res = await xpackModelApi()
-    wsCache.set('xpack-model-distributed', res.data)
-    distributed = res.data
-  } else {
-    distributed = wsCache.get(key)
-  }
-  if (distributed) {
-    if (window['DEXPack']) {
-      const xpack = await window['DEXPack'].mapping[attrs.jsname]
-      plugin.value = xpack.default
-    } else if (!window._de_xpack_not_loaded) {
-      window._de_xpack_not_loaded = true
-      window['VueDe'] = Vue
-      window['AxiosDe'] = axios
-      window['PiniaDe'] = Pinia
-      window['vueRouterDe'] = router
-      window['MittAllDe'] = useEmitt().emitter.all
-      window['I18nDe'] = i18n
-      if (!window.tinymce) {
-        window.tinymce = tinymce
-      }
-      loadDistributed().then(async res => {
-        new Function(res.data)()
-        useEmitt().emitter.emit('load-xpack')
-      })
-    }
-  } else {
-    loadComponent()
-  }
+  loadComponent()
 })
 
 const emits = defineEmits(['loadFail'])
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 056360254c..b0643d2a3c 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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index e85cefaea3..4217739247 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -9,7 +9,7 @@
   >
     <el-row style="height: 20px">
       <el-col :span="3">
-        <Icon name="warn-tree" style="width: 20px; height: 20px; float: right" />
+        <Icon name="warn-tree" style="width: 20px; height: 20px; float: right" ><warnTree /></Icon>
       </el-col>
       <el-col :span="21">
         <span style="font-size: 13px; margin-left: 10px; font-weight: bold; line-height: 20px">
@@ -27,6 +27,7 @@
 </template>
 
 <script setup lang="ts">
+import warnTree from '@/assets/svg/warn-tree.svg'
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
diff --git a/core/core-frontend/src/components/visualization/CanvasOptBar.vue b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
index a8c68c2bca..ab04dbd909 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
@@ -6,13 +6,14 @@
     @mousedown="handOptBarMousedown"
   >
     <el-button size="mini" type="warning" @click="clearAllLinkage"
-      ><el-icon class="bar-base-icon"> <Icon name="dv-bar-unLinkage"></Icon></el-icon
+      ><el-icon class="bar-base-icon"> <Icon name="dv-bar-unLinkage"><dvBarUnLinkage /></Icon></el-icon
       >{{ $t('visualization.remove_all_linkage') }}</el-button
     >
   </div>
 </template>
 
 <script lang="ts" setup>
+import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { computed } from 'vue'
 import { isMainCanvas } from '@/utils/canvasUtils'
diff --git a/core/core-frontend/src/components/visualization/ComponentButton.vue b/core/core-frontend/src/components/visualization/ComponentButton.vue
index 730d944f3e..b487307cf2 100644
--- a/core/core-frontend/src/components/visualization/ComponentButton.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButton.vue
@@ -25,7 +25,7 @@ const emits = defineEmits(['customClick'])
   >
     <el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
       <el-icon class="toolbar-icon">
-        <Icon :name="iconName" />
+        <Icon><component :is="iconName"></component></Icon>
       </el-icon>
       <span>{{ title }}</span>
     </el-col>
diff --git a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
index bbbb92a36c..7a1db2488d 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" :name="iconName" />
+        <Icon class="toolbar-icon"><component :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 db33522bb5..317ecb5017 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@@ -40,7 +40,7 @@
     >
       <span>
         <el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'enlarge')">
-          <Icon name="dv-bar-enlarge" />
+          <Icon name="dv-bar-enlarge" ><dvBarEnlarge /></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" />
+          <Icon name="dv-details" ><dvDetails /></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>
+          <Icon name="icon_params_setting"><icon_params_setting /></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" />
+        <Icon name="dv-bar-unLinkage" ><dvBarUnLinkage /></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 name="icon_more_outlined" ><icon_more_outlined /></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" />
+          <icon name="dv-preview-download" ><dvPreviewDownload /></icon>
         </el-tooltip>
       </el-icon>
       <template #dropdown>
@@ -184,7 +184,7 @@
     </el-dropdown>
     <el-popover v-if="selectFieldShow" width="200" trigger="click" @mousedown="fieldsAreaDown">
       <template #reference>
-        <el-icon class="bar-base-icon"> <Icon name="database"></Icon></el-icon>
+        <el-icon class="bar-base-icon"> <Icon name="database"><database /></Icon></el-icon>
       </template>
       <fields-list :fields="state.curFields" :element="element" />
     </el-popover>
@@ -193,6 +193,13 @@
 </template>
 
 <script lang="ts" setup>
+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'
+import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
+import database from '@/assets/svg/database.svg'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
+import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
 import { computed, h, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
diff --git a/core/core-frontend/src/components/visualization/EditMenu.vue b/core/core-frontend/src/components/visualization/EditMenu.vue
index 80eb04c7cc..9aa68b1c78 100644
--- a/core/core-frontend/src/components/visualization/EditMenu.vue
+++ b/core/core-frontend/src/components/visualization/EditMenu.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import language from '@/assets/svg/language.svg'
 import { ref, onMounted } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -17,7 +18,7 @@ onMounted(() => {
     @command="handleSetLanguage"
   >
     <el-icon>
-      <Icon name="language" />
+      <Icon name="language" ><language /></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 777952fb42..15603ea913 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -14,16 +14,16 @@
         <div class="top-area">
           <span class="top-area-text">已选图表：</span>
           <span class="top-area-value">
-            <Icon class-name="view-type-icon" :name="state.curJumpViewInfo.type" />
+            <Icon class-name="view-type-icon"
+              ><component :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"
-            />
+            <Icon style="vertical-align: -0.2em" class-name="view-type-icon" name="dataset-outline"
+              ><datasetOutline
+            /></Icon>
             {{ state.curDatasetInfo.name }}</span
           >
         </div>
@@ -66,7 +66,8 @@
                         <Icon
                           :name="`field_${fieldType[data.sourceDeType]}`"
                           :className="`field-icon-${fieldType[data.sourceDeType]}`"
-                        />
+                          ><component :is="iconFieldMap[fieldType[data.sourceDeType]]"></component
+                        ></Icon>
                       </el-icon>
                       {{ data.sourceFieldName }}
                     </span>
@@ -135,7 +136,9 @@
                           </el-form-item>
                         </div>
                         <div class="icon-center">
-                          <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                          <Icon style="width: 20px; height: 20px" name="dv-link-target"
+                            ><dvLinkTarget
+                          /></Icon>
                         </div>
                         <div style="flex: 1">
                           <el-form-item>
@@ -156,10 +159,10 @@
                                     style="display: inline-block"
                                     v-if="data.leaf"
                                   >
-                                    <Icon name="dv-dashboard-spine"></Icon>
+                                    <Icon name="dv-dashboard-spine"><dvDashboardSpine /></Icon>
                                   </el-icon>
                                   <el-icon size="18px" style="display: inline-block" v-else>
-                                    <Icon name="dv-folder"></Icon>
+                                    <Icon name="dv-folder"><dvFolder /></Icon>
                                   </el-icon>
                                   <span
                                     style="margin-left: 8px; font-size: 14px"
@@ -204,9 +207,11 @@
                                   <span class="custom-option">
                                     <Icon
                                       style="width: 14px; height: 14px"
-                                      :name="`field_${fieldType[curViewField.deType]}`"
                                       :className="`field-icon-${fieldType[curViewField.deType]}`"
-                                    />
+                                      ><component
+                                        :is="iconFieldMap[fieldType[curViewField.deType]]"
+                                      ></component
+                                    ></Icon>
                                     <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                       curViewField.name
                                     }}</span>
@@ -215,7 +220,9 @@
                               </el-select>
                             </div>
                             <div class="icon-center">
-                              <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                              <Icon style="width: 20px; height: 20px" name="dv-link-target"
+                                ><dvLinkTarget
+                              /></Icon>
                             </div>
                             <div style="flex: 1">
                               <el-select
@@ -233,10 +240,10 @@
                                 >
                                   <span class="custom-option">
                                     <Icon
-                                      :name="item.type"
                                       class-name="view-type-icon"
                                       style="width: 14px; height: 14px"
-                                    />
+                                      ><component :is="iconChartMap[item.type]"></component
+                                    ></Icon>
                                     <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                       item.title
                                     }}</span>
@@ -262,9 +269,11 @@
                                   <span class="custom-option">
                                     <Icon
                                       style="width: 14px; height: 14px"
-                                      :name="`field_${fieldType[viewField.deType]}`"
                                       :className="`field-icon-${fieldType[viewField.deType]}`"
-                                    />
+                                      ><component
+                                        :is="iconFieldMap[fieldType[viewField.deType]]"
+                                      ></component
+                                    ></Icon>
                                     <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                       viewField.name
                                     }}</span>
@@ -279,7 +288,9 @@
                               @click="deleteLinkJumpField(index)"
                             >
                               <el-icon size="20px">
-                                <Icon name="icon_delete-trash_outlined" />
+                                <Icon name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined
+                                /></Icon>
                               </el-icon>
                             </el-button>
                           </div>
@@ -308,7 +319,7 @@
                               {{ $t('visualization.target_url_tips') }}
                             </template>
                             <el-icon size="16px" class="hint-icon">
-                              <Icon name="icon_info_outlined" />
+                              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -328,7 +339,7 @@
                               <span v-html="$t('chart.reference_field_tip')"></span>
                             </template>
                             <el-icon size="16px" class="hint-icon">
-                              <Icon name="icon_info_outlined" />
+                              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -352,10 +363,11 @@
                               @click="insertFieldToCodeMirror('[' + item.sourceFieldName + ']')"
                             >
                               <el-icon>
-                                <Icon
-                                  :name="`field_${fieldType[item.sourceDeType]}`"
-                                  :className="`field-icon-${fieldType[item.sourceDeType]}`"
-                                />
+                                <Icon :className="`field-icon-${fieldType[item.sourceDeType]}`"
+                                  ><component
+                                    :is="iconFieldMap[fieldType[item.sourceDeType]]"
+                                  ></component
+                                ></Icon>
                               </el-icon>
                               {{ item.sourceFieldName }}
                             </span>
@@ -387,6 +399,14 @@
 </template>
 
 <script lang="ts" setup>
+import { iconFieldMap } from '@/components/icon-group/field-list'
+import { iconChartMap } from '@/components/icon-group/chart-list'
+import datasetOutline from '@/assets/svg/dataset-outline.svg'
+import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
+import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import {
   queryVisualizationJumpInfo,
   queryWithViewId,
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index cae2f9c8b9..992605f60c 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -17,16 +17,16 @@
         <div class="top-area">
           <span class="top-area-text" style="margin-left: 0">已选图表：</span>
           <span class="top-area-value">
-            <Icon class-name="view-type-icon" :name="state.curLinkageViewInfo.type" />
+            <Icon class-name="view-type-icon"
+              ><component :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"
-            />
+            <Icon style="vertical-align: -0.2em" class-name="view-type-icon" name="dataset-outline"
+              ><datasetOutline
+            /></Icon>
             {{ state.curDatasetInfo.name }}</span
           >
         </div>
@@ -82,11 +82,9 @@
                   </span>
                   <span>
                     <span class="tree-select-field">
-                      <Icon
-                        class-name="view-type-icon"
-                        style="margin-right: 4px"
-                        :name="data.targetViewType"
-                      />
+                      <Icon class-name="view-type-icon" style="margin-right: 4px"
+                        ><component :is="iconChartMap[data.targetViewType]"></component
+                      ></Icon>
                       {{ data.targetViewName }}
                     </span>
                   </span>
@@ -133,7 +131,8 @@
                         class-name="view-type-icon"
                         style="margin-right: 4px"
                         :name="data.targetViewType"
-                      />
+                        ><component :is="iconChartMap[data.targetViewType]"></component
+                      ></Icon>
                       {{ data.targetViewName }}
                     </span>
                   </span>
@@ -175,9 +174,9 @@
                             <span class="custom-option">
                               <Icon
                                 style="width: 14px; height: 14px"
-                                :name="`field_${fieldType[item.deType]}`"
                                 :className="`field-icon-${fieldType[item.deType]}`"
-                              />
+                                ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                              ></Icon>
                               <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                 item.name
                               }}</span>
@@ -187,7 +186,9 @@
                       </div>
                     </div>
                     <el-icon class="link-icon-join">
-                      <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                      <Icon style="width: 20px; height: 20px" name="dv-link-target"
+                        ><dvLinkTarget
+                      /></Icon>
                     </el-icon>
                     <div style="flex: 1">
                       <div class="select-filed">
@@ -207,7 +208,8 @@
                                 style="width: 14px; height: 14px"
                                 :name="`field_${fieldType[item.deType]}`"
                                 :className="`field-icon-${fieldType[item.deType]}`"
-                              />
+                                ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                              ></Icon>
                               <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                 item.name
                               }}</span>
@@ -219,7 +221,7 @@
 
                     <el-button class="m-del-icon-btn" text @click="deleteLinkageField(index)">
                       <el-icon size="20px">
-                        <Icon name="icon_delete-trash_outlined" />
+                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -232,7 +234,7 @@
               </el-row>
             </el-row>
             <el-row v-else style="height: 100%" class="custom-position">
-              <Icon style="width: 125px; height: 125px" name="dv-empty" />
+              <Icon style="width: 125px; height: 125px" name="dv-empty"><dvEmpty /></Icon>
               <span style="margin-top: 8px; font-size: 14px">请先勾选需要联动的图表</span>
             </el-row>
           </el-col>
@@ -249,6 +251,12 @@
 </template>
 
 <script lang="ts" setup>
+import { iconFieldMap } from '@/components/icon-group/field-list'
+import { iconChartMap } from '@/components/icon-group/chart-list'
+import datasetOutline from '@/assets/svg/dataset-outline.svg'
+import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import dvEmpty from '@/assets/svg/dv-empty.svg'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { reactive, ref, nextTick, watch, computed } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSet.vue b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
index 4192c716b0..d61eefed6d 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSet.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
@@ -94,11 +94,9 @@
                   >
                     <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"
-                      />
+                      <Icon style="margin-top: 4px" class-name="view-type-icon" name="filter-params"
+                        ><filterParams
+                      /></Icon>
                       <span>{{ findFilterName(baseFilter.id) }}</span>
                     </div>
                     <div style="flex: 1">
@@ -157,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 name="icon_dataset"><icon_dataset /></Icon>
                           </el-icon>
                         </div>
                         <span>{{ baseDatasetInfo.name }}</span>
@@ -190,9 +188,9 @@
                           >
                             <Icon
                               style="width: 14px; height: 14px"
-                              :name="`field_${fieldType[item.deType]}`"
                               :className="`field-icon-${fieldType[item.deType]}`"
-                            />
+                              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                            ></Icon>
                             <span style="font-size: 12px">{{ item.name }}</span>
                           </el-option>
                         </el-select>
@@ -232,7 +230,8 @@
                               class-name="view-type-icon"
                               style="margin: 0 4px"
                               :name="viewInfo.chartType"
-                            />
+                              ><component :is="iconChartMap[viewInfo.chartType]"></component
+                            ></Icon>
                           </div>
                           <span style="font-size: 12px"> {{ viewInfo.chartName }}</span>
                         </div>
@@ -284,6 +283,8 @@
 </template>
 
 <script setup lang="ts">
+import filterParams from '@/assets/svg/filter-params.svg'
+import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import { ref, reactive, computed, nextTick } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -297,6 +298,8 @@ import HandleMore from '@/components/handle-more/src/HandleMore.vue'
 import { fieldType } from '@/utils/attr'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { iconChartMap } from '../icon-group/chart-list'
+import { iconFieldMap } from '../icon-group/field-list'
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, componentData } = storeToRefs(dvMainStore)
 const outerParamsInfoTree = ref(null)
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue b/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
index e85425a549..cf11a9d3b3 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
@@ -103,18 +103,18 @@
                             :label="item.title"
                             :value="item.id"
                           >
-                            <Icon
-                              class-name="view-type-icon"
-                              style="margin-right: 4px"
-                              :name="item.type"
-                            />
+                            <Icon class-name="view-type-icon" style="margin-right: 4px"
+                              ><component :is="iconChartMap[item.type]"></component
+                            ></Icon>
                             <span style="font-size: 12px"> {{ item.title }}</span>
                           </el-option>
                         </el-select>
                       </div>
                     </div>
                     <el-icon class="link-icon-join">
-                      <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                      <Icon style="width: 20px; height: 20px" name="dv-link-target"
+                        ><dvLinkTarget
+                      /></Icon>
                     </el-icon>
                     <div style="flex: 1">
                       <div class="select-filed">
@@ -134,9 +134,11 @@
                           >
                             <Icon
                               style="width: 14px; height: 14px"
-                              :name="`field_${fieldType[viewField.deType]}`"
                               :className="`field-icon-${fieldType[viewField.deType]}`"
-                            />
+                              ><component
+                                :is="iconFieldMap[fieldType[viewField.deType]]"
+                              ></component
+                            ></Icon>
                             <span style="font-size: 12px">{{ viewField.name }}</span>
                           </el-option>
                         </el-select>
@@ -144,7 +146,7 @@
                     </div>
                     <el-button class="m-del-icon-btn" text @click="deleteOuterParamsField(index)">
                       <el-icon size="20px">
-                        <Icon name="icon_delete-trash_outlined" />
+                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -174,6 +176,8 @@
 </template>
 
 <script setup lang="ts">
+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'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -188,6 +192,8 @@ import HandleMore from '@/components/handle-more/src/HandleMore.vue'
 import { fieldType } from '@/utils/attr'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { iconChartMap } from '../icon-group/chart-list'
+import { iconFieldMap } from '../icon-group/field-list'
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, componentData } = storeToRefs(dvMainStore)
 const outerParamsInfoTree = ref(null)
diff --git a/core/core-frontend/src/components/visualization/common/DragInfo.vue b/core/core-frontend/src/components/visualization/common/DragInfo.vue
index 0601e3ad8e..4ce74a4e38 100644
--- a/core/core-frontend/src/components/visualization/common/DragInfo.vue
+++ b/core/core-frontend/src/components/visualization/common/DragInfo.vue
@@ -2,7 +2,7 @@
   <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"></Icon>
+        <Icon style="width: 125px; height: 125px" name="dv-drag-tips"><dvDragTips /></Icon>
       </el-row>
       <el-row class="tips-info"> {{ tips }} </el-row>
     </template>
@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts" setup>
+import dvDragTips from '@/assets/svg/dv-drag-tips.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 
diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
index a294ab407e..037149c4c8 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
@@ -13,8 +13,8 @@
       <Icon
         :style="{ color: curComponent.commonBackground.innerImageColor }"
         class-name="svg-background"
-        :name="mainIconClass"
-      />
+        ><component :is="iconBoardMap[mainIconClass]"></component
+      ></Icon>
     </div>
     <span class="demonstration">{{ template.name }}</span>
   </div>
@@ -28,6 +28,7 @@ import { computed, toRefs } from 'vue'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent } = storeToRefs(dvMainStore)
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { iconBoardMap } from '@/components/icon-group/board-list'
 
 const props = defineProps({
   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 e6fa8f57a7..2430c25e47 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundItemOverall.vue
@@ -10,11 +10,9 @@
       :style="itemStyle"
       @click.stop="setBoard"
     >
-      <Icon
-        :style="{ color: commonBackground.innerImageColor }"
-        class-name="svg-background"
-        :name="mainIconClass"
-      />
+      <Icon :style="{ color: commonBackground.innerImageColor }" class-name="svg-background"
+        ><component :is="iconBoardMap[mainIconClass]"></component
+      ></Icon>
     </div>
     <span class="demonstration">{{ template.name }}</span>
   </div>
@@ -24,6 +22,7 @@
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { computed, toRefs } from 'vue'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
+import { iconBoardMap } from '@/components/icon-group/board-list'
 
 const props = defineProps({
   template: {
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 ff0f5d7e7c..79caa33bfc 100644
--- a/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
@@ -4,17 +4,16 @@
       class="icon-area"
       :class="{ 'selected-active': active, 'icon-area-dark': themes === 'dark' }"
     >
-      <Icon
-        :style="{ color: innerImageColor }"
-        class-name="svg-background"
-        :name="mainIconClass(item)"
-      />
+      <Icon :style="{ color: innerImageColor }" class-name="svg-background"
+        ><component :is="iconBoardMap[mainIconClass(item)]"></component
+      ></Icon>
     </div>
     <span>{{ item.name }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
+import { iconBoardMap } from '@/components/icon-group/board-list'
 import { toRefs } from 'vue'
 
 const props = withDefaults(
diff --git a/core/core-frontend/src/components/visualization/linkJump.vue b/core/core-frontend/src/components/visualization/linkJump.vue
index 31dbde8f46..f5c621d074 100644
--- a/core/core-frontend/src/components/visualization/linkJump.vue
+++ b/core/core-frontend/src/components/visualization/linkJump.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import joinJoin from '@/assets/svg/join-join.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive } from 'vue'
 import type { FormInstance } from 'element-plus-secondary'
@@ -98,7 +102,7 @@ defineExpose({
         <span class="label">已选择图表:</span>
         <span class="name">
           <el-icon class="main-color">
-            <Icon class="toolbar-icon" name="icon_left_outlined" />
+            <Icon class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
           </el-icon>
           折线图1
         </span>
@@ -107,7 +111,7 @@ defineExpose({
         <span class="label">所用数据集:</span>
         <span class="name">
           <el-icon class="main-color">
-            <Icon class="toolbar-icon" name="icon_left_outlined" />
+            <Icon class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
           </el-icon>
           佩尔数据集
         </span>
@@ -172,7 +176,7 @@ defineExpose({
                 </el-select>
               </el-form-item>
               <el-icon class="join">
-                <Icon name="join-join"></Icon>
+                <Icon name="join-join"><joinJoin /></Icon>
               </el-icon>
               <el-form-item label="目标仪表板">
                 <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
@@ -206,7 +210,7 @@ defineExpose({
                   </el-select>
                 </el-form-item>
                 <el-icon class="join">
-                  <Icon name="join-join"></Icon>
+                  <Icon name="join-join"><joinJoin /></Icon>
                 </el-icon>
                 <el-form-item
                   label="目标字段"
@@ -238,7 +242,7 @@ 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>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </template>
                 </el-button>
               </template>
@@ -246,7 +250,7 @@ defineExpose({
           </div>
           <el-button class="add-field" text @click="addField">
             <template #icon>
-              <Icon name="icon_add_outlined"></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined /></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 5adf46cb06..3a1b45272d 100644
--- a/core/core-frontend/src/custom-component/canvas-icon/Component.vue
+++ b/core/core-frontend/src/custom-component/canvas-icon/Component.vue
@@ -1,14 +1,13 @@
 <template>
-  <Icon
-    v-if="element.innerType.includes('board')"
-    class-name="de-svg-main"
-    :name="element.innerType"
-  />
+  <Icon v-if="element.innerType.includes('board')" class-name="de-svg-main"
+    ><component :is="iconBoardMap[element.innerType]"></component
+  ></Icon>
   <component v-else :is="element.innerType"></component>
 </template>
 
 <script setup lang="ts">
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { iconBoardMap } from '@/components/icon-group/board-list'
 import { toRefs } from 'vue'
 const props = defineProps({
   propValue: {
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
index 13f34ff14e..7d3ff0ae1a 100644
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, toRefs } from 'vue'
 import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -52,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 name="icon_info_outlined" ><icon_info_outlined /></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 5b90eae187..9ebc78f4fe 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -22,7 +22,7 @@
               >
                 <template #prefix>
                   <el-icon :class="{ 'dark-icon': themes === 'dark' }">
-                    <Icon :name="styleOptionKey.icon" />
+                    <Icon><component :is="styleOptionKey.icon"></component></Icon>
                   </el-icon>
                 </template>
                 <el-option
@@ -89,7 +89,7 @@
               >
                 <template #prefix>
                   <el-icon :class="{ 'dark-icon': themes === 'dark' }">
-                    <Icon :name="styleOptionMountedKey.icon" />
+                    <Icon><component :is="styleOptionMountedKey.icon"></component></Icon>
                   </el-icon>
                 </template>
                 <el-option
@@ -122,7 +122,7 @@
               >
                 <template #prefix>
                   <el-icon :class="{ 'dark-icon': themes === 'dark' }">
-                    <Icon :name="styleOptionKey.icon" />
+                    <Icon><component :is="styleOptionKey.icon"></component></Icon>
                   </el-icon>
                 </template>
                 <el-option
@@ -146,7 +146,7 @@
             @click="checkBold"
           >
             <el-icon>
-              <Icon name="icon_bold_outlined" />
+              <Icon name="icon_bold_outlined"><icon_bold_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -161,7 +161,7 @@
             @click="checkItalic"
           >
             <el-icon>
-              <Icon name="icon_italic_outlined" />
+              <Icon name="icon_italic_outlined"><icon_italic_outlined /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -178,7 +178,7 @@
                 @click="setPosition('textAlign', 'left')"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
+                  <Icon name="icon_left-alignment_outlined"><icon_leftAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -192,7 +192,9 @@
                 @click="setPosition('textAlign', 'center')"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -206,7 +208,7 @@
                 @click="setPosition('textAlign', 'right')"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <Icon name="icon_right-alignment_outlined"><icon_rightAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -227,7 +229,7 @@
               @click="setPosition('headHorizontalPosition', 'left')"
             >
               <el-icon>
-                <Icon name="icon_left-alignment_outlined" />
+                <Icon name="icon_left-alignment_outlined"><icon_leftAlignment_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -244,7 +246,7 @@
               @click="setPosition('headHorizontalPosition', 'center')"
             >
               <el-icon>
-                <Icon name="icon_center-alignment_outlined" />
+                <Icon name="icon_center-alignment_outlined"><icon_centerAlignment_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -261,7 +263,7 @@
               @click="setPosition('headHorizontalPosition', 'right')"
             >
               <el-icon>
-                <Icon name="icon_right-alignment_outlined" />
+                <Icon name="icon_right-alignment_outlined"><icon_rightAlignment_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -272,6 +274,17 @@
 </template>
 
 <script lang="tsx" setup>
+import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
+import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
+import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
+import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
+import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
+import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
 import { computed, h, reactive, ref, toRefs, watch } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -390,14 +403,13 @@ const fontSizeList = computed(() => {
   }
   return arr
 })
-
 const styleOptionKeyArrayPre = [
   {
     value: 'fontFamily',
     label: '字体',
     customOption: fontFamilyList,
     width: '188px',
-    icon: 'dv-style-fontFamily'
+    icon: dvStyleFontFamily
   }
 ]
 
@@ -408,21 +420,21 @@ const styleOptionMountedKeyArray = [
     label: '字间距',
     customOption: letterSpacingList.value,
     width: '90px',
-    icon: 'dv-style-letterSpacing'
+    icon: dvStyleLetterSpacing
   },
   {
     value: 'fontSize',
     label: '字体大小',
     customOption: fontSizeList.value,
     width: '90px',
-    icon: 'dv-style-fontSize'
+    icon: dvStyleFontSize
   },
   {
     value: 'activeFontSize',
     label: '激活字体大小',
     customOption: fontSizeList.value,
     width: '90px',
-    icon: 'dv-style-activeFont'
+    icon: dvStyleActiveFont
   }
 ]
 
@@ -433,14 +445,14 @@ const styleOptionKeyArray = [
     label: '滚动速度',
     customOption: scrollSpeedList,
     width: '90px',
-    icon: 'dv-style-scroll-speed'
+    icon: dvStyleScrollSpeed
   },
   {
     value: 'opacity',
     label: '不透明度',
     customOption: opacitySizeList,
     width: '90px',
-    icon: 'dv-style-opacity'
+    icon: dvStyleOpacity
   }
 ]
 
diff --git a/core/core-frontend/src/custom-component/common/ComponentConfig.ts b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
index e33896835e..4de0c716d7 100644
--- a/core/core-frontend/src/custom-component/common/ComponentConfig.ts
+++ b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
@@ -1,63 +1,30 @@
+import board_1 from '@/assets/svg/board_1.svg'
+import board_2 from '@/assets/svg/board_2.svg'
+import board_3 from '@/assets/svg/board_3.svg'
+import board_4 from '@/assets/svg/board_4.svg'
+import board_5 from '@/assets/svg/board_5.svg'
+import board_6 from '@/assets/svg/board_6.svg'
+import board_7 from '@/assets/svg/board_7.svg'
+import board_8 from '@/assets/svg/board_8.svg'
+import board_9 from '@/assets/svg/board_9.svg'
+import graphicalCircular from '@/assets/svg/graphical-circular.svg'
+import graphicalRect from '@/assets/svg/graphical-rect.svg'
+import graphicalTriangle from '@/assets/svg/graphical-triangle.svg'
 export 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'
-      }
+      { 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 }
     ]
   },
   {
@@ -65,24 +32,9 @@ export const CANVAS_MATERIAL = [
     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'
-      }
+      { value: 'RectShape', type: 'graphical', title: '矩形', icon: graphicalRect },
+      { value: 'SvgTriangle', type: 'graphical', title: '三角形', icon: graphicalTriangle },
+      { value: 'CircleShape', type: 'graphical', title: '圆形', icon: graphicalCircular }
     ]
   },
   {
@@ -90,516 +42,108 @@ export const CANVAS_MATERIAL = [
     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'
-      }
+      { 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' }
     ]
   }
 ]
diff --git a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
index f4d9a8c3ea..3f02c509d5 100644
--- a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
+++ b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, toRefs } from 'vue'
 import { ElFormItem, ElIcon, ElInputNumber } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -63,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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
 
diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
index b26ed41c73..d23aad8ae3 100644
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -88,8 +88,8 @@ const groupActiveChange = category => {
             <Icon
               v-if="['outer_svg', 'graphical'].includes(chartInfo.type)"
               class-name="item-top-icon"
-              :name="chartInfo.icon"
-            />
+              ><component :is="chartInfo.icon"></component
+            ></Icon>
             <component v-else style="color: #a6a6a6" :is="chartInfo.icon"></component>
           </div>
           <div v-if="chartInfo.title" class="item-bottom">
diff --git a/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue b/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
index 5b89d42787..a9a9e2d95f 100644
--- a/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dbMoreWeb from '@/assets/svg/db-more-web.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -38,7 +39,7 @@ const handleDragEnd = e => {
   >
     <drag-component
       :themes="themes"
-      icon="db-more-web"
+      :icon="dbMoreWeb"
       label="网页"
       drag-info="DeFrame&DeFrame"
     ></drag-component>
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 5dba4c2cf9..ecabce873f 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,7 @@ 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" :name="icon" />
+      <Icon v-if="icon" class="drag-icon"><component :is="icon"></component></Icon>
     </div>
     <div class="label-content">
       <span>{{ label }}</span>
diff --git a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
index 59caa4970d..047d631321 100644
--- a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import iconVideo from '@/assets/svg/icon-video.svg'
+import dvPictureShow from '@/assets/svg/dv-picture-show.svg'
+import iconStream from '@/assets/svg/icon-stream.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -45,21 +48,21 @@ const handleDragEnd = e => {
   <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
     <drag-component
       :themes="themes"
-      icon="dv-picture-show"
+      :icon="dvPictureShow"
       label="图片"
       drag-info="Picture&Picture"
       v-on:click="newComponent('Picture')"
     ></drag-component>
     <drag-component
       :themes="themes"
-      icon="icon-video"
+      :icon="iconVideo"
       label="视频"
       drag-info="DeVideo&DeVideo"
       v-on:click="newComponent('DeVideo')"
     ></drag-component>
     <drag-component
       :themes="themes"
-      icon="icon-stream"
+      :icon="iconStream"
       label="流媒体"
       drag-info="DeStreamMedia&DeStreamMedia"
       v-on:click="newComponent('DeStreamMedia')"
diff --git a/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue b/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
index 39cbaa2cdc..b137ac6381 100644
--- a/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dbMoreWeb from '@/assets/svg/db-more-web.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -52,7 +53,7 @@ const handleDragEnd = e => {
     ></drag-component>
     <drag-component
       :themes="themes"
-      icon="db-more-web"
+      :icon="dbMoreWeb"
       label="网页"
       drag-info="DeFrame&DeFrame"
       v-on:click="newComponent('DeFrame')"
diff --git a/core/core-frontend/src/custom-component/component-group/QueryGroup.vue b/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
index 62fd5955dd..7deedae929 100644
--- a/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dvFilterShow from '@/assets/svg/dv-filter-show.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -51,7 +52,7 @@ const newComponent = componentName => {
   >
     <drag-component
       :themes="themes"
-      icon="dv-filter-show"
+      :icon="dvFilterShow"
       label="查询组件"
       drag-info="VQuery&VQuery"
     ></drag-component>
diff --git a/core/core-frontend/src/custom-component/component-group/TabsGroup.vue b/core/core-frontend/src/custom-component/component-group/TabsGroup.vue
index 4b97de9e9b..e82992d48d 100644
--- a/core/core-frontend/src/custom-component/component-group/TabsGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/TabsGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dvTabShow from '@/assets/svg/dv-tab-show.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -50,7 +51,7 @@ const handleDragEnd = e => {
   >
     <drag-component
       :themes="themes"
-      icon="dv-tab-show"
+      :icon="dvTabShow"
       label="Tab"
       drag-info="DeTabs&DeTabs"
     ></drag-component>
diff --git a/core/core-frontend/src/custom-component/component-group/TextGroup.vue b/core/core-frontend/src/custom-component/component-group/TextGroup.vue
index 04b099d5de..3c35f3fe4d 100644
--- a/core/core-frontend/src/custom-component/component-group/TextGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/TextGroup.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import dvRichText from '@/assets/svg/dv-richText.svg'
+import dvScrollText from '@/assets/svg/dv-scroll-text.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -46,7 +48,7 @@ const newComponent = (componentName, innerType) => {
   <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
     <drag-component
       :themes="themes"
-      icon="dv-richText"
+      :icon="dvRichText"
       label="富文本"
       drag-info="UserView&rich-text"
       v-on:click="newComponent('UserView', 'rich-text')"
@@ -54,7 +56,7 @@ const newComponent = (componentName, innerType) => {
     <drag-component
       v-if="dvModel === 'dataV'"
       :themes="themes"
-      icon="dv-scroll-text"
+      :icon="dvScrollText"
       label="跑马灯"
       drag-info="ScrollText&ScrollText"
       v-on:click="newComponent('ScrollText', 'ScrollText')"
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 fe0624c6b2..053590b0e7 100644
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+import { iconChartMap } from '@/components/icon-group/chart-list'
 import { reactive, ref, toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
@@ -6,6 +7,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
 import { ElScrollbar } from 'element-plus-secondary'
 import { XpackComponent } from '@/components/plugin'
+import { iconChartDarkMap } from '@/components/icon-group/chart-dark-list'
 
 const props = defineProps({
   propValue: {
@@ -142,11 +144,15 @@ const loadPluginCategory = data => {
                 v-if="chartInfo['isPlugin']"
                 :static-content="chartInfo.icon"
               />
-              <Icon
-                v-else
-                class-name="item-top-icon"
-                :name="chartInfo.icon + (props.themes === 'dark' ? '-dark' : '')"
-              />
+              <Icon v-else class-name="item-top-icon"
+                ><component
+                  :is="
+                    props.themes === 'dark'
+                      ? iconChartDarkMap[`${chartInfo.icon}-dark`]
+                      : iconChartMap[chartInfo.icon]
+                  "
+                ></component
+              ></Icon>
             </div>
             <div class="item-bottom">
               <span>{{ chartInfo.title }}</span>
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 9b997dfdcb..6c8837d434 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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { reactive, ref, toRefs, watch, computed } from 'vue'
 import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia/dist/pinia'
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 1c690e2eaa..2da8aea954 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" />
+              <Icon name="drag" ><drag /></Icon>
             </el-icon>
             <span class="item-span">
               {{ element.title }}
@@ -32,6 +32,7 @@
 </template>
 
 <script setup lang="ts">
+import drag from '@/assets/svg/drag.svg'
 import draggable from 'vuedraggable'
 import { onMounted, ref, toRefs } from 'vue'
 import { deepCopy } from '@/utils/utils'
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 bf9fe3bb08..72b7ab4434 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import eventBus from '@/utils/eventBus'
 import { ElMessage } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -595,12 +597,12 @@ const autoStyle = computed(() => {
               >
                 <el-tooltip effect="dark" content="设置过滤条件" placement="top">
                   <el-icon @click="editeQueryConfig(ele.id)">
-                    <Icon name="icon_edit_outlined"></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></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>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 da6f318544..f643929d08 100644
--- a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ElSelect } from 'element-plus-secondary'
 import { computed, ref, toRefs } from 'vue'
 import RangeFilterTime from '@/custom-component/v-query/RangeFilterTime.vue'
@@ -388,7 +389,7 @@ defineExpose({
             style="margin-left: -4px"
           >
             <template #icon>
-              <Icon name="icon_admin_outlined"></Icon>
+              <Icon name="icon_admin_outlined"><icon_admin_outlined /></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 319ce3b0d3..dce5397e07 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import joinJoin from '@/assets/svg/join-join.svg'
 import { ref, shallowRef } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElMessage } from 'element-plus-secondary'
@@ -202,14 +206,14 @@ defineExpose({
     </template>
     <div class="content">
       <el-icon style="font-size: 16px">
-        <Icon name="icon_info_colorful"></Icon>
+        <Icon name="icon_info_colorful"><icon_info_colorful /></Icon>
       </el-icon>
       基于当前查询组件的查询条件，如果需要进行级联配置，需要满足以下条件：<br />
       1. 展示类型：文本下拉组件和数字下拉组件；2. 选项值来源：选择数据集<br />
     </div>
     <el-button text @click="addCascadeBlock">
       <template #icon>
-        <Icon name="icon_add_outlined"></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
       </template>
       添加级联配置
     </el-button>
@@ -217,13 +221,13 @@ 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>
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </template>
           添加级联条件
         </el-button>
         <el-button @click="deleteCascadeBlock(index)" class="cascade-delete-block" text>
           <template #icon>
-            <Icon name="icon_delete-trash_outlined"></Icon>
+            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
           </template>
         </el-button>
       </div>
@@ -257,7 +261,7 @@ defineExpose({
         </div>
         <div class="cascade-icon">
           <el-icon>
-            <Icon name="join-join"></Icon>
+            <Icon name="join-join"><joinJoin /></Icon>
           </el-icon>
         </div>
         <div class="item-field">
@@ -277,7 +281,7 @@ 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>
+            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 e410833713..afff879804 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -1,5 +1,16 @@
 getLastStart
 <script lang="ts" setup>
+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'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import {
   ref,
   reactive,
@@ -31,6 +42,8 @@ import draggable from 'vuedraggable'
 import type { ManipulateType } from 'dayjs'
 import dayjs from 'dayjs'
 import ConditionDefaultConfiguration from '@/custom-component/v-query/ConditionDefaultConfiguration.vue'
+import { iconChartMap } from '@/components/icon-group/chart-list'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
@@ -1455,7 +1468,7 @@ defineExpose({
         <div class="title">
           查询条件
           <el-icon @click="addQueryCriteria">
-            <Icon name="icon_add_outlined"></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </el-icon>
         </div>
         <draggable tag="div" :list="conditions" handle=".handle">
@@ -1468,14 +1481,14 @@ defineExpose({
               :class="element.id === activeCondition && 'active'"
             >
               <el-icon class="handle">
-                <Icon name="icon_drag_outlined"></Icon>
+                <Icon name="icon_drag_outlined"><icon_drag_outlined /></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>
+                  <icon name="icon_warning_filled"><icon_warning_filled /></icon>
                 </el-icon>
                 {{ element.name }}
               </div>
@@ -1491,10 +1504,10 @@ defineExpose({
                   @click.stop="element.visible = !element.visible"
                   v-if="element.visible"
                 >
-                  <Icon name="icon_visible_outlined"></Icon>
+                  <Icon name="icon_visible_outlined"><icon_visible_outlined /></Icon>
                 </el-icon>
                 <el-icon class="hover-icon" @click.stop="element.visible = !element.visible" v-else>
-                  <Icon name="de_pwd_invisible"></Icon>
+                  <Icon name="de_pwd_invisible"><de_pwd_invisible /></Icon>
                 </el-icon>
               </div>
               <div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
@@ -1525,7 +1538,7 @@ defineExpose({
                     </div>
                   </template>
                   <el-icon style="margin-left: 4px; color: #646a73">
-                    <icon name="icon_info_outlined"></icon>
+                    <icon name="icon_info_outlined"><icon_info_outlined /></icon>
                   </el-icon>
                 </el-tooltip>
               </div>
@@ -1549,7 +1562,11 @@ defineExpose({
             <div v-for="field in fields" :key="field.componentId" class="list-item_field_de">
               <el-checkbox :label="field.componentId"
                 ><el-icon class="component-type">
-                  <Icon :name="canvasViewInfo[field.componentId].type"></Icon> </el-icon
+                  <Icon
+                    ><component
+                      :is="iconChartMap[canvasViewInfo[field.componentId].type]"
+                    ></component
+                  ></Icon> </el-icon
                 ><span
                   :title="canvasViewInfo[field.componentId].title"
                   class="checkbox-name ellipsis"
@@ -1569,14 +1586,6 @@ defineExpose({
                 <template v-if="curComponent.checkedFieldsMap[field.componentId]" #prefix>
                   <el-icon>
                     <Icon
-                      :name="`field_${
-                        fieldType[
-                          getDetype(
-                            curComponent.checkedFieldsMap[field.componentId],
-                            Object.values(field.fields)
-                          )
-                        ]
-                      }`"
                       :className="`field-icon-${
                         fieldType[
                           getDetype(
@@ -1585,6 +1594,18 @@ defineExpose({
                           )
                         ]
                       }`"
+                      ><component
+                        :is="
+                          iconFieldMap[
+                            fieldType[
+                              getDetype(
+                                curComponent.checkedFieldsMap[field.componentId],
+                                Object.values(field.fields)
+                              )
+                            ]
+                          ]
+                        "
+                      ></component
                     ></Icon>
                   </el-icon>
                 </template>
@@ -1618,9 +1639,8 @@ defineExpose({
                     :title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
                   >
                     <el-icon>
-                      <Icon
-                        :name="`field_${fieldType[ele.deType]}`"
-                        :className="`field-icon-${fieldType[ele.deType]}`"
+                      <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                        ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
                       ></Icon>
                     </el-icon>
                     <span :title="ele.name || ele.variableName" class="ellipsis">
@@ -1717,7 +1737,7 @@ defineExpose({
                 @click="startTreeDesign"
               >
                 <template #icon>
-                  <icon name="icon_edit_outlined"></icon>
+                  <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
                 </template>
               </el-button>
             </div>
@@ -1731,9 +1751,8 @@ defineExpose({
                   <span class="level-index">层级{{ indexCascade[index + 1] }}</span>
                   <span class="field-type"
                     ><el-icon>
-                      <Icon
-                        :name="`field_${fieldType[ele.deType]}`"
-                        :className="`field-icon-${fieldType[ele.deType]}`"
+                      <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                        ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
                       ></Icon> </el-icon
                   ></span>
                   <span class="field-tree_name">{{ ele.name }}</span>
@@ -1741,7 +1760,7 @@ defineExpose({
               </template>
               <el-button @click="startTreeDesign" v-else text>
                 <template #icon>
-                  <Icon name="icon_add_outlined"></Icon>
+                  <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
                 </template>
                 点击进行树结构设计
               </el-button>
@@ -1816,10 +1835,10 @@ defineExpose({
                     <template #default="{ node, data }">
                       <div class="content">
                         <el-icon size="18px" v-if="!data.leaf">
-                          <Icon name="dv-folder"></Icon>
+                          <Icon name="dv-folder"><dvFolder /></Icon>
                         </el-icon>
                         <el-icon size="18px" v-if="data.leaf">
-                          <Icon name="icon_dataset"></Icon>
+                          <Icon name="icon_dataset"><icon_dataset /></Icon>
                         </el-icon>
                         <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
                           node.label
@@ -1839,12 +1858,18 @@ defineExpose({
                     <template v-if="curComponent.field.id" #prefix>
                       <el-icon>
                         <Icon
-                          :name="`field_${
-                            fieldType[getDetype(curComponent.field.id, curComponent.dataset.fields)]
-                          }`"
                           :className="`field-icon-${
                             fieldType[getDetype(curComponent.field.id, curComponent.dataset.fields)]
                           }`"
+                          ><component
+                            :is="
+                              iconFieldMap[
+                                fieldType[
+                                  getDetype(curComponent.field.id, curComponent.dataset.fields)
+                                ]
+                              ]
+                            "
+                          ></component
                         ></Icon>
                       </el-icon>
                     </template>
@@ -1865,9 +1890,8 @@ defineExpose({
                         :title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
                       >
                         <el-icon>
-                          <Icon
-                            :name="`field_${fieldType[ele.deType]}`"
-                            :className="`field-icon-${fieldType[ele.deType]}`"
+                          <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1887,16 +1911,20 @@ defineExpose({
                     <template v-if="curComponent.displayId" #prefix>
                       <el-icon>
                         <Icon
-                          :name="`field_${
-                            fieldType[
-                              getDetype(curComponent.displayId, curComponent.dataset.fields)
-                            ]
-                          }`"
                           :className="`field-icon-${
                             fieldType[
                               getDetype(curComponent.displayId, curComponent.dataset.fields)
                             ]
                           }`"
+                          ><component
+                            :is="
+                              iconFieldMap[
+                                fieldType[
+                                  getDetype(curComponent.displayId, curComponent.dataset.fields)
+                                ]
+                              ]
+                            "
+                          ></component
                         ></Icon>
                       </el-icon>
                     </template>
@@ -1917,9 +1945,8 @@ defineExpose({
                         :title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
                       >
                         <el-icon>
-                          <Icon
-                            :name="`field_${fieldType[ele.deType]}`"
-                            :className="`field-icon-${fieldType[ele.deType]}`"
+                          <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1941,12 +1968,18 @@ defineExpose({
                     <template v-if="curComponent.sortId" #prefix>
                       <el-icon>
                         <Icon
-                          :name="`field_${
-                            fieldType[getDetype(curComponent.sortId, curComponent.dataset.fields)]
-                          }`"
                           :className="`field-icon-${
                             fieldType[getDetype(curComponent.sortId, curComponent.dataset.fields)]
                           }`"
+                          ><component
+                            :is="
+                              iconFieldMap[
+                                fieldType[
+                                  getDetype(curComponent.sortId, curComponent.dataset.fields)
+                                ]
+                              ]
+                            "
+                          ></component
                         ></Icon>
                       </el-icon>
                     </template>
@@ -1962,9 +1995,8 @@ defineExpose({
                         :title="ele.desensitized ? '脱敏字段，不能被设置为查询条件' : ''"
                       >
                         <el-icon>
-                          <Icon
-                            :name="`field_${fieldType[ele.deType]}`"
-                            :className="`field-icon-${fieldType[ele.deType]}`"
+                          <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                            ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1994,7 +2026,7 @@ defineExpose({
                   <template #reference>
                     <el-button text>
                       <template #icon>
-                        <Icon name="icon_edit_outlined"></Icon>
+                        <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                       </template>
                       {{ t('common.edit') }}
                     </el-button>
@@ -2023,7 +2055,9 @@ defineExpose({
                           text
                         >
                           <template #icon>
-                            <Icon name="icon_delete-trash_outlined"></Icon>
+                            <Icon name="icon_delete-trash_outlined"
+                              ><icon_deleteTrash_outlined
+                            /></Icon>
                           </template>
                         </el-button>
                       </div>
@@ -2031,7 +2065,7 @@ defineExpose({
                     <div class="add-btn">
                       <el-button @click="valueSource.push('')" text>
                         <template #icon>
-                          <Icon name="icon_add_outlined"></Icon>
+                          <Icon name="icon_add_outlined"><icon_add_outlined /></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 40df314e09..c652d3d1e8 100644
--- a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
+++ b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { guid } from '@/views/visualized/data/dataset/form/util.js'
 import { ElMessage } from 'element-plus-secondary'
 import { ref, shallowRef, computed } from 'vue'
@@ -79,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>
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </template>
           添加层级
         </el-button>
@@ -108,7 +110,7 @@ defineExpose({
         </div>
         <el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
           <template #icon>
-            <Icon name="icon_delete-trash_outlined"></Icon>
+            <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 bb0095fd38..e3ef4220a6 100644
--- a/core/core-frontend/src/layout/components/AccountOperator.vue
+++ b/core/core-frontend/src/layout/components/AccountOperator.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import userImg from '@/assets/svg/user-img.svg'
+import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
 import { computed, ref, unref } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -111,11 +113,11 @@ if (uid.value === '1') {
     v-click-outside="openPopover"
   >
     <el-icon class="main-color">
-      <Icon name="user-img" />
+      <Icon name="user-img" ><userImg /></Icon>
     </el-icon>
     <span class="uname-span">{{ name }}</span>
     <el-icon class="el-icon-animate">
-      <Icon name="icon_expand-down_filled" />
+      <Icon name="icon_expand-down_filled" ><icon_expandDown_filled /></Icon>
     </el-icon>
   </div>
   <el-popover
diff --git a/core/core-frontend/src/layout/components/AiTips.vue b/core/core-frontend/src/layout/components/AiTips.vue
index 156b272eb2..f7e59878a1 100644
--- a/core/core-frontend/src/layout/components/AiTips.vue
+++ b/core/core-frontend/src/layout/components/AiTips.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import dvAi from '@/assets/svg/dv-ai.svg'
 import { onMounted, ref } from 'vue'
 const visible = ref(true)
 const emits = defineEmits(['confirm'])
@@ -31,7 +32,7 @@ onMounted(() => {
     <template #reference>
       <div class="ai-popper-tips-icon">
         <el-icon style="margin: 2px" class="ai-icon">
-          <Icon name="dv-ai" />
+          <Icon name="dv-ai" ><dvAi /></Icon>
         </el-icon>
       </div>
     </template>
diff --git a/core/core-frontend/src/layout/components/CollapseBar.vue b/core/core-frontend/src/layout/components/CollapseBar.vue
index c51fbb8b0f..f0dae5ed95 100644
--- a/core/core-frontend/src/layout/components/CollapseBar.vue
+++ b/core/core-frontend/src/layout/components/CollapseBar.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_sideFold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
+import icon_sideExpand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
 const props = defineProps({
   isCollapse: Boolean
 })
@@ -11,7 +13,11 @@ const setCollapse = () => {
 <template>
   <div class="de-collapse-bar" @click="setCollapse">
     <el-icon style="color: #646a73">
-      <Icon :name="!isCollapse ? 'icon_side-fold_outlined' : 'icon_side-expand_outlined'"></Icon>
+      <Icon
+        ><component
+          :is="!isCollapse ? icon_sideFold_outlined : icon_sideExpand_outlined"
+        ></component
+      ></Icon>
     </el-icon>
     {{ !isCollapse ? '收起导航' : '' }}
   </div>
diff --git a/core/core-frontend/src/layout/components/Copilot.vue b/core/core-frontend/src/layout/components/Copilot.vue
index 34afd50341..a50033cb8c 100644
--- a/core/core-frontend/src/layout/components/Copilot.vue
+++ b/core/core-frontend/src/layout/components/Copilot.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import copilot from '@/assets/svg/copilot.svg'
 import { onMounted, ref } from 'vue'
 const visible = ref(true)
 const emits = defineEmits(['confirm'])
@@ -32,7 +33,7 @@ onMounted(() => {
     <template #reference>
       <div class="copilot-popper-tips-icon">
         <el-icon style="margin: 2px" class="ai-icon">
-          <Icon name="copilot" />
+          <Icon name="copilot" ><copilot /></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 2e15746d92..7f0457082b 100644
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import logo from '@/assets/svg/logo.svg'
+import copilot from '@/assets/svg/copilot.svg'
+import dvAi from '@/assets/svg/dv-ai.svg'
+import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
 import { computed, onMounted, ref } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 import { isExternal } from '@/utils/validate'
@@ -126,7 +130,7 @@ onMounted(() => {
       @click="handleIconClick"
       className="logo"
       name="logo"
-    ></Icon>
+    ><logo /></Icon>
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
@@ -143,7 +147,7 @@ onMounted(() => {
         class="ai-icon copilot-icon"
         v-if="!showOverlayCopilot && appearanceStore.getShowCopilot"
       >
-        <Icon name="copilot" @click="handleCopilotClick" />
+        <Icon name="copilot" @click="handleCopilotClick" ><copilot /></Icon>
       </el-icon>
       <Copilot
         @confirm="copilotConfirm"
@@ -156,14 +160,14 @@ onMounted(() => {
         class="ai-icon"
         v-if="aiBaseUrl && !showOverlay && appearanceStore.getShowAi"
       >
-        <Icon name="dv-ai" @click="handleAiClick" />
+        <Icon name="dv-ai" @click="handleAiClick" ><dvAi /></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" />
+          <Icon name="dv-preview-download" @click="downloadClick" ><dvPreviewDownload /></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 b9cddde96c..b5d009e719 100644
--- a/core/core-frontend/src/layout/components/HeaderSystem.vue
+++ b/core/core-frontend/src/layout/components/HeaderSystem.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import logo from '@/assets/svg/logo.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
 import { computed } from 'vue'
 import { ElHeader } from 'element-plus-secondary'
 import { useRouter } from 'vue-router'
@@ -23,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"></Icon>
+    <Icon class="de-logo" v-else className="logo" name="logo"><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>
+          <Icon name="icon_left_outlined"><icon_left_outlined /></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 cc7baaf520..564812c740 100644
--- a/core/core-frontend/src/layout/components/LangSelector.vue
+++ b/core/core-frontend/src/layout/components/LangSelector.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import { ref, onMounted } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -38,7 +39,7 @@ onMounted(() => {
     >
       <span>{{ item.name }}</span>
       <el-icon v-if="language === item.value">
-        <Icon name="icon_done_outlined"></Icon>
+        <Icon name="icon_done_outlined"><icon_done_outlined /></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 189bd99f0b..9b9597f639 100644
--- a/core/core-frontend/src/layout/components/SystemCfg.vue
+++ b/core/core-frontend/src/layout/components/SystemCfg.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import iconSetting from '@/assets/svg/icon-setting.svg'
 import { useRouter } from 'vue-router'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { computed } from 'vue'
@@ -24,7 +25,7 @@ const redirectUser = () => {
       }"
     >
       <el-icon @click="redirectUser">
-        <Icon class="icon-setting" name="icon-setting" />
+        <Icon class="icon-setting" name="icon-setting" ><iconSetting /></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 9d5b528a71..a9738063f5 100644
--- a/core/core-frontend/src/layout/components/ToolboxCfg.vue
+++ b/core/core-frontend/src/layout/components/ToolboxCfg.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import toolboxData_fill from '@/assets/svg/toolbox-data_fill.svg'
+import toolboxIcon_template from '@/assets/svg/toolbox-icon_template.svg'
+import toolboxLog from '@/assets/svg/toolbox-log.svg'
+import sysTools from '@/assets/svg/sys-tools.svg'
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import TopDocCard from '@/layout/components/TopDocCard.vue'
@@ -10,7 +14,11 @@ const { push, resolve } = useRouter()
 const showToolbox = ref(true)
 
 const cardInfoList = ref([] as unknown[])
-
+const iconMap = {
+  'toolbox-data_fill': toolboxData_fill,
+  'toolbox-icon_template': toolboxIcon_template,
+  'toolbox-log': toolboxLog
+}
 const loadInfoList = () => {
   const toolboxMenu = resolve('/toolbox')
   if (!toolboxMenu) {
@@ -22,12 +30,13 @@ const loadInfoList = () => {
     showToolbox.value = false
     return
   }
+
   children.forEach(item => {
     const temp = {
       name: item.meta.title,
       rName: item.name,
       path: item.path,
-      icon: 'toolbox-' + item.meta.icon
+      icon: iconMap['toolbox-' + item.meta.icon]
     }
     cardInfoList.value.push(temp)
   })
@@ -65,7 +74,7 @@ onMounted(() => {
         }"
       >
         <el-icon>
-          <Icon name="sys-tools" />
+          <Icon name="sys-tools"><sysTools /></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 eea39fd3a7..34d96c9d5d 100644
--- a/core/core-frontend/src/layout/components/TopDoc.vue
+++ b/core/core-frontend/src/layout/components/TopDoc.vue
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import topEnterpriseTrial from '@/assets/svg/top-enterprise-trial.svg'
+import topHelpDoc from '@/assets/svg/top-help-doc.svg'
+import topProductBbs from '@/assets/svg/top-product-bbs.svg'
+import topTechnology from '@/assets/svg/top-technology.svg'
+import docs from '@/assets/svg/docs.svg'
 import { computed } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import TopDocCard from '@/layout/components/TopDocCard.vue'
@@ -8,14 +13,14 @@ const navigateBg = computed(() => appearanceStore.getNavigateBg)
 const help = computed(() => appearanceStore.getHelp)
 
 const cardInfoList = [
-  { name: '帮助文档', url: help.value || 'https://dataease.io/docs/v2/', icon: 'top-help-doc' },
-  { name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: 'top-product-bbs' },
+  { name: '帮助文档', url: help.value || 'https://dataease.io/docs/v2/', icon: topHelpDoc },
+  { name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: topProductBbs },
   {
     name: '技术博客',
     url: 'https://blog.fit2cloud.com/categories/dataease',
-    icon: 'top-technology'
+    icon: topTechnology
   },
-  { name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: 'top-enterprise-trial' }
+  { name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: topEnterpriseTrial }
 ]
 </script>
 
@@ -41,7 +46,7 @@ const cardInfoList = [
         :class="{ 'is-light-setting': navigateBg && navigateBg === 'light' }"
       >
         <el-icon>
-          <Icon name="docs" />
+          <Icon name="docs"><docs /></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 7b176eb66d..fbc30abcf7 100644
--- a/core/core-frontend/src/layout/components/TopDocCard.vue
+++ b/core/core-frontend/src/layout/components/TopDocCard.vue
@@ -25,7 +25,7 @@ const openBlank = () => {
 <template>
   <div class="doc-card" @click="openBlank">
     <el-row class="base-show">
-      <Icon class-name="item-top-icon" :name="cardInfo.icon" />
+      <Icon class-name="item-top-icon"><component :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 f41c3bf2a4..631a5ccd37 100644
--- a/core/core-frontend/src/views/401/index.vue
+++ b/core/core-frontend/src/views/401/index.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="page-not-found">
-    <Icon className="login-logo-icon" name="401"></Icon>
+    <Icon className="login-logo-icon" name="401"><_401 /></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 { 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 c87c2f8993..c08fa4294f 100644
--- a/core/core-frontend/src/views/404/index.vue
+++ b/core/core-frontend/src/views/404/index.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="page-not-found">
-    <Icon className="login-logo-icon" name="403"></Icon>
+    <Icon className="login-logo-icon" name="403"><_403 /></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 { 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 1adb0368f5..8c9daaad62 100644
--- a/core/core-frontend/src/views/about/index.vue
+++ b/core/core-frontend/src/views/about/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import logo from '@/assets/svg/logo.svg'
 import aboutBg from '@/assets/img/about-bg.png'
 import { ref, reactive, onMounted, h } from 'vue'
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -196,7 +197,7 @@ const syncFree = () => {
     <img width="792" height="180" :src="aboutBg" />
     <div class="color-overlay"></div>
     <el-icon class="logo">
-      <icon name="logo"></icon>
+      <icon name="logo"><logo /></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 62bb077b39..25886d09c0 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
@@ -3,6 +3,8 @@ import { reactive, ref, toRefs } from 'vue'
 import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { ElScrollbar } from 'element-plus-secondary'
+import { iconChartDarkMap } from '@/components/icon-group/chart-dark-list'
+import { iconChartMap } from '@/components/icon-group/chart-list'
 
 const props = defineProps({
   propValue: {
@@ -99,11 +101,15 @@ const groupActiveChange = category => {
                 v-if="chartInfo['isPlugin']"
                 :static-content="chartInfo.icon"
               />
-              <Icon
-                v-else
-                class-name="item-top-icon"
-                :name="chartInfo.icon + (props.themes === 'dark' ? '-dark' : '')"
-              />
+              <Icon v-else class-name="item-top-icon"
+                ><component
+                  :is="
+                    props.themes === 'dark'
+                      ? iconChartDarkMap[`${chartInfo.icon}-dark`]
+                      : iconChartMap[chartInfo.icon]
+                  "
+                ></component
+              ></Icon>
             </div>
             <div class="item-bottom">
               <span>{{ chartInfo.title }}</span>
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 20180198e1..d946c448b3 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,8 +1,9 @@
-<script lang="tsx" setup></script>
+<script lang="tsx" setup>
+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" />
+    <Icon class-name="item-icon" name="dv-up-arrow" ><dvUpArrow /></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 d594293d2a..d29d49746e 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
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_dataset from '@/assets/svg/icon_dataset.svg'
+import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import { Tree } from '../../../../visualized/data/dataset/form/CreatDsGroup.vue'
 import { computed, ref, watch, onMounted } from 'vue'
 import { Plus, Search } from '@element-plus/icons-vue'
@@ -324,16 +327,16 @@ onMounted(() => {
                   >
                     <div class="m-icon">
                       <el-icon v-if="!data.leaf">
-                        <Icon name="dv-folder" />
+                        <Icon name="dv-folder" ><dvFolder /></Icon>
                       </el-icon>
                       <el-icon v-if="data.leaf">
-                        <Icon name="icon_dataset" />
+                        <Icon name="icon_dataset" ><icon_dataset /></Icon>
                       </el-icon>
                     </div>
                     {{ node.label }}
 
                     <el-icon class="checked-item" v-if="_modelValue === data.id">
-                      <Icon name="icon_done_outlined" />
+                      <Icon name="icon_done_outlined" ><icon_done_outlined /></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 02a939d037..24ff544d80 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
@@ -1,8 +1,18 @@
 <script lang="tsx" setup>
+import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'
+import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
+import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+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'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -198,19 +208,18 @@ 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 name="icon_sort-a-to-z_outlined"><icon_sortAToZ_outlined /></Icon>
           </el-icon>
           <el-icon v-if="'desc' === item.sort">
-            <Icon name="icon_sort-z-to-a_outlined" />
+            <Icon name="icon_sort-z-to-a_outlined"><icon_sortZToA_outlined /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined" />
+            <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
           </el-icon>
           <el-icon>
-            <Icon
-              :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
-              :name="`field_${fieldType[item.deType]}`"
-            />
+            <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+            ></Icon>
           </el-icon>
         </span>
         <span v-if="type === 'extColor'" style="display: flex; color: #646a73">
@@ -218,7 +227,8 @@ 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
+            ></Icon>
           </el-icon>
         </span>
         <el-tooltip
@@ -236,11 +246,13 @@ onMounted(() => {
             <span>{{ t('chart.delete') }}</span>
           </template>
           <el-icon class="child remove-icon">
-            <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem" />
+            <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
+              ><icon_deleteTrash_outlined
+            /></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 name="icon_down_outlined-1"><icon_down_outlined1 /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -260,13 +272,13 @@ onMounted(() => {
               <span class="inner-dropdown-menu menu-item-padding">
                 <span class="menu-item-content">
                   <el-icon>
-                    <Icon name="icon_sort_outlined" />
+                    <Icon name="icon_sort_outlined"><icon_sort_outlined /></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 name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -282,7 +294,9 @@ onMounted(() => {
                     >
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'none' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'none' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -293,7 +307,9 @@ onMounted(() => {
                     >
                       {{ t('chart.asc') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'asc' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'asc' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -304,7 +320,9 @@ onMounted(() => {
                     >
                       {{ t('chart.desc') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'desc' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'desc' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -319,7 +337,9 @@ 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 name="icon_done_outlined" v-if="'custom_sort' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -351,7 +371,7 @@ onMounted(() => {
                   <span class="summary-span-item">({{ t('chart.' + item.dateStyle) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined" />
+                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -367,7 +387,9 @@ onMounted(() => {
                     >
                       {{ t('chart.y') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'y' === item.dateStyle" />
+                        <Icon name="icon_done_outlined" v-if="'y' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -382,7 +404,9 @@ onMounted(() => {
                     >
                       {{ t('chart.y_Q') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'y_Q' === item.dateStyle" />
+                        <Icon name="icon_done_outlined" v-if="'y_Q' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -393,7 +417,9 @@ onMounted(() => {
                     >
                       {{ t('chart.y_M') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'y_M' === item.dateStyle" />
+                        <Icon name="icon_done_outlined" v-if="'y_M' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -408,7 +434,9 @@ onMounted(() => {
                     >
                       {{ t('chart.y_W') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'y_W' === item.dateStyle" />
+                        <Icon name="icon_done_outlined" v-if="'y_W' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -419,7 +447,9 @@ 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 name="icon_done_outlined" v-if="'y_M_d' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -435,7 +465,9 @@ 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 name="icon_done_outlined" v-if="'H_m_s' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -450,7 +482,9 @@ 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 name="icon_done_outlined" v-if="'y_M_d_H_m' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -464,7 +498,9 @@ 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 name="icon_done_outlined" v-if="'y_M_d_H_m_s' === item.dateStyle"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -487,7 +523,7 @@ onMounted(() => {
                   <span class="summary-span-item">({{ t('chart.' + item.datePattern) }})</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined" />
+                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -506,7 +542,9 @@ 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 name="icon_done_outlined" v-if="'date_sub' === item.datePattern"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -520,7 +558,9 @@ 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 name="icon_done_outlined" v-if="'date_split' === item.datePattern"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -538,7 +578,7 @@ onMounted(() => {
             :command="beforeClickItem('rename')"
           >
             <el-icon>
-              <icon name="icon_edit_outlined"></icon>
+              <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
             </el-icon>
             <span>{{ t('chart.show_name_set') }}</span>
           </el-dropdown-item>
@@ -553,7 +593,7 @@ onMounted(() => {
           </el-dropdown-item>
           <el-dropdown-item class="menu-item-padding" divided :command="beforeClickItem('remove')">
             <el-icon>
-              <icon name="icon_delete-trash_outlined"></icon>
+              <icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 d28d220da6..7bed3e5f53 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
@@ -1,9 +1,12 @@
 <script lang="tsx" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { onMounted, ref, toRefs, watch } from 'vue'
 import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
 import { Delete } from '@element-plus/icons-vue'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -91,21 +94,22 @@ onMounted(() => {
       >
         <span style="display: flex">
           <el-icon>
-            <Icon
-              :className="`field-icon-${fieldType[item.deType]}`"
-              :name="`field_${fieldType[item.deType]}`"
+            <Icon :className="`field-icon-${fieldType[item.deType]}`"
+              ><component :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 name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
+            ><icon_deleteTrash_outlined
+          /></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 name="icon_down_outlined-1"><icon_down_outlined1 /></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 5d8a26abc4..19ab066d63 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
@@ -1,9 +1,12 @@
 <script lang="tsx" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import { onMounted, reactive, toRefs, watch } from 'vue'
 import { formatterItem } from '@/views/chart/components/js/formatter'
 import { getItemType } from './utils'
 import { Delete, Filter } from '@element-plus/icons-vue'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const state = reactive({
   formatterItem: formatterItem,
@@ -100,25 +103,24 @@ onMounted(() => {
       >
         <span style="display: flex">
           <el-icon>
-            <Icon
-              :className="`field-icon-${fieldType[item.deType]}`"
-              :name="`field_${fieldType[item.deType]}`"
+            <Icon :className="`field-icon-${fieldType[item.deType]}`"
+              ><component :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>
+          <Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
+            ><icon_deleteTrash_outlined
+          /></Icon>
         </el-icon>
         <el-icon
           class="child"
           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>
+          <Icon name="icon_down_outlined-1" class="el-icon-arrow-down el-icon-delete"
+            ><icon_down_outlined1
+          /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
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 487d0c676a..13908d51dd 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
@@ -1,4 +1,16 @@
 <script lang="tsx" setup>
+import icon_sortAToZ_outlined from '@/assets/svg/icon_sort-a-to-z_outlined.svg'
+import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
+import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
+import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.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_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'
@@ -7,6 +19,7 @@ import { Filter } from '@element-plus/icons-vue'
 import { quotaViews } from '@/views/chart/components/js/util'
 import { SUPPORT_Y_M } from '@/views/chart/components/editor/util/chart'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -287,19 +300,18 @@ onMounted(() => {
       >
         <span style="display: flex; color: #646a73">
           <el-icon v-if="'asc' === item.sort">
-            <Icon name="icon_sort-a-to-z_outlined" />
+            <Icon name="icon_sort-a-to-z_outlined"><icon_sortAToZ_outlined /></Icon>
           </el-icon>
           <el-icon v-if="'desc' === item.sort">
-            <Icon name="icon_sort-z-to-a_outlined" />
+            <Icon name="icon_sort-z-to-a_outlined"><icon_sortZToA_outlined /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined" />
+            <Icon name="icon_sort_outlined"><icon_sort_outlined /></Icon>
           </el-icon>
           <el-icon>
-            <Icon
-              :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
-              :name="`field_${fieldType[item.deType]}`"
-            />
+            <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+            ></Icon>
           </el-icon>
         </span>
         <el-tooltip
@@ -335,12 +347,14 @@ onMounted(() => {
             <span>{{ t('chart.delete') }}</span>
           </template>
           <el-icon class="child remove-icon">
-            <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem" />
+            <Icon class-name="inner-class" name="icon_delete-trash_outlined" @click="removeItem"
+              ><icon_deleteTrash_outlined
+            /></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 name="icon_down_outlined-1"><icon_down_outlined1 /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -360,12 +374,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 name="icon_dashboard_outlined" ><icon_dashboard_outlined /></Icon>
                   </el-icon>
                   <span>{{ t('chart.chart_type') }}</span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined"></Icon>
+                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -381,7 +395,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 name="icon_done_outlined" v-if="'bar' === item.chartType" ><icon_done_outlined /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -392,7 +406,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 name="icon_done_outlined" v-if="'line' === item.chartType" ><icon_done_outlined /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -414,13 +428,13 @@ 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 name="icon_functions_outlined"><icon_functions_outlined /></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>
+                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -440,7 +454,9 @@ onMounted(() => {
                     >
                       {{ t('chart.sum') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'sum' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'sum' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -455,7 +471,9 @@ onMounted(() => {
                     >
                       {{ t('chart.avg') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'avg' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'avg' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -470,7 +488,9 @@ onMounted(() => {
                     >
                       {{ t('chart.max') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'max' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'max' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -485,7 +505,9 @@ onMounted(() => {
                     >
                       {{ t('chart.min') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'min' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'min' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -500,7 +522,9 @@ onMounted(() => {
                     >
                       {{ t('chart.stddev_pop') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'stddev_pop' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'stddev_pop' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -515,7 +539,9 @@ onMounted(() => {
                     >
                       {{ t('chart.var_pop') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'var_pop' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'var_pop' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -526,7 +552,9 @@ onMounted(() => {
                     >
                       {{ t('chart.count') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'count' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'count' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -541,7 +569,9 @@ onMounted(() => {
                     >
                       {{ t('chart.count_distinct') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'count_distinct' === item.summary" />
+                        <Icon name="icon_done_outlined" v-if="'count_distinct' === item.summary"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -565,7 +595,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 name="icon_describe_outlined" ><icon_describe_outlined /></Icon>-->
                   </el-icon>
                   <span>{{ t('chart.quick_calc') }}</span>
                   <span class="summary-span-item">
@@ -575,7 +605,7 @@ onMounted(() => {
                   </span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined" />
+                  <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -591,7 +621,9 @@ onMounted(() => {
                     >
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'none' === item.compareCalc.type" />
+                        <Icon name="icon_done_outlined" v-if="'none' === item.compareCalc.type"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -606,10 +638,9 @@ 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 name="icon_done_outlined" v-if="'yoy_label' === item.compareCalc.type"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -624,10 +655,9 @@ onMounted(() => {
                     >
                       {{ t('chart.percent') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon
-                          name="icon_done_outlined"
-                          v-if="'percent' === item.compareCalc.type"
-                        />
+                        <Icon name="icon_done_outlined" v-if="'percent' === item.compareCalc.type"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -656,13 +686,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 name="icon_sort_outlined"><icon_sort_outlined /></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 name="icon_right_outlined"><icon_right_outlined /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -678,7 +708,9 @@ onMounted(() => {
                     >
                       {{ t('chart.none') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'none' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'none' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -689,7 +721,9 @@ onMounted(() => {
                     >
                       {{ t('chart.asc') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'asc' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'asc' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -700,7 +734,9 @@ onMounted(() => {
                     >
                       {{ t('chart.desc') }}
                       <el-icon class="sub-menu-content--icon">
-                        <Icon name="icon_done_outlined" v-if="'desc' === item.sort" />
+                        <Icon name="icon_done_outlined" v-if="'desc' === item.sort"
+                          ><icon_done_outlined
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -733,13 +769,13 @@ onMounted(() => {
 
           <el-dropdown-item class="menu-item-padding" :command="beforeClickItem('rename')">
             <el-icon>
-              <icon name="icon_edit_outlined"></icon>
+              <icon name="icon_edit_outlined"><icon_edit_outlined /></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>
+              <icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 eb666a424b..f7c5687a7d 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
 import draggable from 'vuedraggable'
 import { getFieldData } from '@/api/chart'
 import { reactive, watch, ref } from 'vue'
@@ -88,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 name="icon_drag_outlined" ><icon_drag_outlined /></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 3124831095..75fe9441a1 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import FunctionCfg from '@/views/chart/components/editor/editor-senior/components/FunctionCfg.vue'
 import ScrollCfg from '@/views/chart/components/editor/editor-senior/components/ScrollCfg.vue'
@@ -341,7 +343,7 @@ const removeJumpSenior = () => {
                     @click="removeLinkageSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" />
+                      <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -353,7 +355,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.linkageActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" />
+                    <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
                   </el-icon>
                 </button>
               </span>
@@ -382,7 +384,7 @@ const removeJumpSenior = () => {
                     @click="removeJumpSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" />
+                      <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -394,7 +396,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.jumpActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" />
+                    <Icon name="icon_edit_outlined" ><icon_edit_outlined /></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 815235f7fb..2569ea5aec 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { onMounted, reactive, watch, computed, PropType } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
@@ -164,7 +166,7 @@ onMounted(() => {
           @click="editLine"
         >
           <el-icon>
-            <Icon name="icon_edit_outlined" />
+            <Icon name="icon_edit_outlined" ><icon_edit_outlined /></Icon>
           </el-icon>
         </button>
       </span>
@@ -220,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 name="icon_info_outlined" ><icon_info_outlined /></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 4ca45bee0a..bfe4675e18 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
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
@@ -8,6 +9,7 @@ import TextLabelThresholdEdit from '@/views/chart/components/editor/editor-senio
 import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue'
 import { fieldType } from '@/utils/attr'
 import { defaultsDeep } from 'lodash-es'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -320,7 +322,7 @@ init()
         >
           <template #icon>
             <el-icon size="14px">
-              <Icon name="icon_edit_outlined" />
+              <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
             </el-icon>
           </template>
         </el-button>
@@ -396,7 +398,7 @@ init()
             >
               <template #icon>
                 <el-icon size="14px">
-                  <Icon name="icon_edit_outlined" />
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                 </el-icon>
               </template>
             </el-button>
@@ -494,7 +496,7 @@ init()
             >
               <template #icon>
                 <el-icon size="14px">
-                  <Icon name="icon_edit_outlined" />
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                 </el-icon>
               </template>
             </el-button>
@@ -514,10 +516,9 @@ init()
             <div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
               <span>
                 <el-icon>
-                  <Icon
-                    :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
-                    :name="`field_${fieldType[fieldItem.field.deType]}`"
-                  />
+                  <Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[fieldItem.field.deType]]"></component
+                  ></Icon>
                 </el-icon>
               </span>
               <span :title="fieldItem.field.name" class="field-text">{{
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 7e0a101243..8ae0dec950 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
@@ -1,9 +1,12 @@
 <script lang="tsx" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { computed, onMounted, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { fieldType } from '@/utils/attr'
 import { find } from 'lodash-es'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -230,10 +233,9 @@ onMounted(() => {
             >
               <span style="float: left">
                 <el-icon>
-                  <Icon
-                    :className="`field-icon-${fieldType[item.deType]}`"
-                    :name="`field_${fieldType[item.deType]}`"
-                  />
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                  ></Icon>
                 </el-icon>
               </span>
               <span :style="{ float: 'left', color: '#8492a6', fontSize: '12px' }">
@@ -298,7 +300,7 @@ onMounted(() => {
               class="hover-icon"
               @click="removeLine(index)"
             >
-              <Icon name="icon_delete-trash_outlined"></Icon>
+              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
             </el-icon>
           </div>
         </el-col>
@@ -306,7 +308,7 @@ onMounted(() => {
     </div>
     <el-button class="circle-button" text style="margin-left: 5px" @click="addLine">
       <template #icon>
-        <Icon name="icon_add_outlined"></Icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined /></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 402474f774..0f000a9c9b 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
@@ -1,8 +1,12 @@
 <script lang="tsx" setup>
+import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { PropType, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '../../../util/chart'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -248,7 +252,7 @@ init()
 <template>
   <el-col>
     <div class="tip">
-      <Icon name="icon_info_filled" class="icon-style"></Icon>
+      <Icon name="icon_info_filled" class="icon-style"><icon_info_filled /></Icon>
       <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
     </div>
 
@@ -274,8 +278,8 @@ init()
                     :className="`field-icon-${
                       fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
                     }`"
-                    :name="`field_${fieldType[fieldOption.deType]}`"
-                  />
+                    ><component :is="iconFieldMap[fieldType[fieldOption.deType]]"></component
+                  ></Icon>
                 </el-icon>
                 {{ fieldOption.name }}
               </el-option>
@@ -289,7 +293,7 @@ init()
             @click="removeThreshold(fieldIndex)"
           >
             <el-icon size="20px" style="color: #646a73">
-              <Icon name="icon_delete-trash_outlined" />
+              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
             </el-icon>
           </el-button>
         </el-row>
@@ -422,7 +426,7 @@ init()
                 @click="removeCondition(fieldItem, index)"
               >
                 <el-icon size="20px" style="color: #646a73">
-                  <Icon name="icon_delete-trash_outlined" />
+                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                 </el-icon>
               </el-button>
             </div>
@@ -437,7 +441,7 @@ init()
           @click="addConditions(fieldItem)"
         >
           <template #icon>
-            <Icon name="icon_add_outlined" />
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </template>
           {{ t('chart.add_style') }}
         </el-button>
@@ -452,7 +456,7 @@ init()
       @click="addThreshold"
     >
       <template #icon>
-        <Icon name="icon_add_outlined" />
+        <Icon name="icon_add_outlined"><icon_add_outlined /></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 7aec022118..661f4cf97c 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '../../../util/chart'
@@ -90,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>
+        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -136,7 +138,7 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_outlined"></Icon>
+              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 101f8b1b2b..88e8d8f652 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '../../../util/chart'
@@ -103,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>
+        <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -197,7 +199,7 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_outlined"></Icon>
+              <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 bdf7044e0f..aac353a96c 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
@@ -1,4 +1,7 @@
 <script lang="tsx" setup>
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { PropType, toRefs, computed } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
@@ -295,7 +298,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkBold('fontWeight')"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" />
+                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -313,7 +316,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkItalic('fontStyle')"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" />
+                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -351,7 +354,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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </el-checkbox>
@@ -413,7 +416,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkBold('fontWeightBtn')"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" />
+                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -431,7 +434,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                   @click="checkItalic('fontStyleBtn')"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" />
+                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></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 96aff50989..1c52393e41 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
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ElColorPicker, ElPopover } from 'element-plus-secondary'
 import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -389,7 +390,7 @@ const colorItemBorderColor = (index, state) => {
           @click="customColorExtendSettingOpened = !customColorExtendSettingOpened"
         >
           <el-icon style="font-size: 12px">
-            <Icon name="icon_admin_outlined" />
+            <Icon name="icon_admin_outlined" ><icon_admin_outlined /></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 c859c97e7e..c00cd2420b 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
@@ -197,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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -253,7 +254,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" />
+                <Icon name="icon_info_outlined" ><icon_info_outlined /></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 9e42ffcd50..3bf26abfa4 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
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
 import { PropType, computed, onMounted, reactive, watch, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
@@ -179,7 +182,7 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -209,7 +212,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorNameForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" />
+                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -232,7 +235,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorNameForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" />
+                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></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 333123e92f..d5978efdaa 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
@@ -1,4 +1,13 @@
 <script lang="ts" setup>
+import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
+import icon_topAlign_outlined from '@/assets/svg/icon_top-align_outlined.svg'
+import icon_verticalAlign_outlined from '@/assets/svg/icon_vertical-align_outlined.svg'
+import icon_bottomAlign_outlined from '@/assets/svg/icon_bottom-align_outlined.svg'
 import { PropType, computed, onMounted, reactive, watch, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
@@ -183,7 +192,7 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -213,7 +222,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorValueForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" />
+                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -236,7 +245,7 @@ defineExpose({ getFormData })
                 :class="{ dark: themes === 'dark', active: state.indicatorValueForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" />
+                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -265,7 +274,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_left-alignment_outlined" />
+                    <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -283,7 +292,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" />
+                    <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -301,7 +310,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" />
+                    <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -330,7 +339,7 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_top-align_outlined" />
+                  <Icon name="icon_top-align_outlined" ><icon_topAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -348,7 +357,7 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" />
+                  <Icon name="icon_vertical-align_outlined" ><icon_verticalAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -366,7 +375,7 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" />
+                  <Icon name="icon_bottom-align_outlined" ><icon_bottomAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -472,7 +481,7 @@ defineExpose({ getFormData })
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_letter-spacing_outlined" />
+                  <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
                 </el-icon>
               </template>
               <el-option
@@ -506,7 +515,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" />
+                    <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -533,7 +542,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" />
+                    <Icon name="icon_italic_outlined" ><icon_italic_outlined /></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 366e500ab0..812090e49a 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
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, PropType, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
@@ -10,6 +11,7 @@ import { fieldType } from '@/utils/attr'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import Icon from '../../../../../../components/icon-custom/src/Icon.vue'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -476,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 name="icon_info_outlined"><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -548,7 +550,7 @@ const conversionPrecision = [
           </template>
           <span style="vertical-align: middle">
             <el-icon style="cursor: pointer">
-              <Icon name="icon_info_outlined" />
+              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
             </el-icon>
           </span>
         </el-tooltip>
@@ -1007,19 +1009,17 @@ const conversionPrecision = [
         >
           <template #prefix>
             <el-icon v-if="curSeriesFormatter[computedIdKey]" style="font-size: 14px">
-              <Icon
-                :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
-                :name="`field_${fieldType[curSeriesFormatter.deType]}`"
-              />
+              <Icon :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                ><component :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"></component
+              ></Icon>
             </el-icon>
           </template>
           <template v-for="item in state.labelForm.seriesLabelFormatter" :key="item[computedIdKey]">
             <el-option class="series-select-option" :value="item" :label="item.optionLabel">
               <el-icon style="margin-right: 8px">
-                <Icon
-                  :className="`field-icon-${fieldType[item.deType]}`"
-                  :name="`field_${fieldType[item.deType]}`"
-                />
+                <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                ></Icon>
               </el-icon>
               {{ item.optionShowName }}
             </el-option>
@@ -1272,7 +1272,7 @@ const conversionPrecision = [
               </template>
               <span style="vertical-align: middle">
                 <el-icon style="cursor: pointer">
-                  <Icon name="icon_info_outlined" />
+                  <Icon name="icon_info_outlined"><icon_info_outlined /></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 349761ab66..0448050ac3 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
@@ -1,4 +1,10 @@
 <script lang="tsx" setup>
+import icon_leftAlign_outlined from '@/assets/svg/icon_left-align_outlined.svg'
+import icon_horizontalAlign_outlined from '@/assets/svg/icon_horizontal-align_outlined.svg'
+import icon_rightAlign_outlined from '@/assets/svg/icon_right-align_outlined.svg'
+import icon_topAlign_outlined from '@/assets/svg/icon_top-align_outlined.svg'
+import icon_verticalAlign_outlined from '@/assets/svg/icon_vertical-align_outlined.svg'
+import icon_bottomAlign_outlined from '@/assets/svg/icon_bottom-align_outlined.svg'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
@@ -296,7 +302,7 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.hPosition === 'left' }"
               >
                 <el-icon>
-                  <Icon name="icon_left-align_outlined" />
+                  <Icon name="icon_left-align_outlined" ><icon_leftAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -314,7 +320,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_horizontal-align_outlined" />
+                  <Icon name="icon_horizontal-align_outlined" ><icon_horizontalAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -329,7 +335,7 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.hPosition === 'right' }"
               >
                 <el-icon>
-                  <Icon name="icon_right-align_outlined" />
+                  <Icon name="icon_right-align_outlined" ><icon_rightAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -364,7 +370,7 @@ onMounted(() => {
                 :class="{ dark: themes === 'dark', active: state.legendForm.vPosition === 'top' }"
               >
                 <el-icon>
-                  <Icon name="icon_top-align_outlined" />
+                  <Icon name="icon_top-align_outlined" ><icon_topAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -382,7 +388,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" />
+                  <Icon name="icon_vertical-align_outlined" ><icon_verticalAlign_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -400,7 +406,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" />
+                  <Icon name="icon_bottom-align_outlined" ><icon_bottomAlign_outlined /></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 39cd43aa29..403b410239 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
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
@@ -6,6 +7,7 @@ import { ElMessage, ElRow } from 'element-plus-secondary'
 import { fieldType } from '@/utils/attr'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -281,10 +283,9 @@ onMounted(() => {
               :value="item.id"
             >
               <el-icon style="margin-right: 8px">
-                <Icon
-                  :className="`field-icon-${fieldType[item.deType]}`"
-                  :name="`field_${fieldType[item.deType]}`"
-                />
+                <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -376,10 +377,9 @@ onMounted(() => {
               :value="item.id"
             >
               <el-icon style="margin-right: 8px">
-                <Icon
-                  :className="`field-icon-${fieldType[item.deType]}`"
-                  :name="`field_${fieldType[item.deType]}`"
-                />
+                <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -524,8 +524,7 @@ onMounted(() => {
               <el-icon style="margin-right: 8px">
                 <Icon
                   :className="`field-icon-${fieldType[item.deType]}`"
-                  :name="`field_${fieldType[item.deType]}`"
-                />
+                ><component :is="iconFieldMap[fieldType[item.deType]]"></component></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -578,7 +577,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 name="icon_info_outlined"><icon_info_outlined /></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 46aa2f49d2..f4d16dd7a5 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
@@ -1,4 +1,11 @@
 <script lang="ts" setup>
+import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -198,7 +205,7 @@ watch(
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined" ><icon_letterSpacing_outlined /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -228,7 +235,7 @@ watch(
                 :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
               >
                 <el-icon>
-                  <Icon name="icon_bold_outlined" />
+                  <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -251,7 +258,7 @@ watch(
                 :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
               >
                 <el-icon>
-                  <Icon name="icon_italic_outlined" />
+                  <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -277,7 +284,7 @@ watch(
                   :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
                 >
                   <el-icon>
-                    <Icon name="icon_left-alignment_outlined" />
+                    <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -295,7 +302,7 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" />
+                    <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -313,7 +320,7 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" />
+                    <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -349,7 +356,7 @@ watch(
         </label>
         <el-button text @click="openEditRemark" :effect="themes">
           <el-icon size="14px">
-            <Icon name="icon_edit_outlined" />
+            <Icon name="icon_edit_outlined" ><icon_edit_outlined /></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 19dcfebf07..cc1990d1a1 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
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { PropType, computed, onMounted, reactive, watch, ref, inject } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_TOOLTIP } from '@/views/chart/components/editor/util/chart'
@@ -13,6 +14,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import Icon from '../../../../../../components/icon-custom/src/Icon.vue'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 
@@ -517,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 name="icon_info_outlined"><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -639,10 +641,9 @@ onMounted(() => {
         >
           <template #prefix>
             <el-icon v-if="curSeriesFormatter.seriesId" style="font-size: 14px">
-              <Icon
-                :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
-                :name="`field_${fieldType[curSeriesFormatter.deType]}`"
-              />
+              <Icon :className="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                ><component :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"></component
+              ></Icon>
             </el-icon>
           </template>
           <template v-for="item in state.tooltipForm.seriesTooltipFormatter" :key="item.seriesId">
@@ -655,10 +656,9 @@ onMounted(() => {
               v-if="showOption(item)"
             >
               <el-icon style="margin-right: 8px">
-                <Icon
-                  :className="`field-icon-${fieldType[item.deType]}`"
-                  :name="`field_${fieldType[item.deType]}`"
-                />
+                <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
               {{ item.summary !== '' ? '(' + t('chart.' + item.summary) + ')' : '' }}
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 cc8b6151e2..da0b207aea 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
@@ -214,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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -270,7 +271,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" />
+                <Icon name="icon_info_outlined" ><icon_info_outlined /></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 d0f77ed3fe..903bdf7373 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
@@ -182,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 name="icon_info_outlined" ><icon_info_outlined /></Icon>
               </el-icon>
             </span>
           </el-tooltip>
@@ -238,7 +239,7 @@ onMounted(() => {
             <template #content>期望的坐标轴刻度数量，非最终结果。</template>
             <span style="vertical-align: middle">
               <el-icon style="cursor: pointer">
-                <Icon name="icon_info_outlined" />
+                <Icon name="icon_info_outlined" ><icon_info_outlined /></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 63ad7bf161..2f105c34d0 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
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_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 { ref, reactive, onMounted, onBeforeUnmount, watch, unref, computed, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import CodeMirror from '@/views/visualized/data/dataset/form/CodeMirror.vue'
@@ -6,6 +11,7 @@ import { getFunction } from '@/api/dataset'
 import { fieldType } from '@/utils/attr'
 import { cloneDeep } from 'lodash-es'
 import { guid } from '@/views/visualized/data/dataset/form/util'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 export interface CalcFieldType {
   id?: string
@@ -226,7 +232,7 @@ initFunction()
                 <div>{{ t('dataset.calc_tips.tip2') }}</div>
               </template>
               <el-icon size="16px">
-                <Icon name="icon_info_outlined"></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -251,7 +257,7 @@ initFunction()
               {{ t('dataset.calc_tips.tip5') }}
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -259,7 +265,7 @@ initFunction()
           <el-input v-model="searchField" :placeholder="t('dataset.edit_search')" clearable>
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -276,21 +282,20 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon v-if="!item.groupType">
-                  <Icon name="icon_adjustment_outlined"></Icon>
+                  <Icon name="icon_adjustment_outlined"><icon_adjustment_outlined /></Icon>
                 </el-icon>
                 <el-icon v-else>
-                  <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :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>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                   </el-icon>
                   <el-icon @click.stop="delParmasToQuota" class="hover-icon">
-                    <Icon name="icon_delete-trash_outlined"></Icon>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -314,7 +319,7 @@ initFunction()
               <div v-else>{{ t('dataset.calc_tips.tip7') }}</div>
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -327,7 +332,7 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></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 ed73c30a07..73c0d5ba4e 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
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_TABLE_CELL } from '@/views/chart/components/editor/util/chart'
@@ -179,7 +184,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableCellForm.isBolder }"
             >
               <el-icon>
-                <Icon name="icon_bold_outlined" />
+                <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -202,7 +207,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableCellForm.isItalic }"
             >
               <el-icon>
-                <Icon name="icon_italic_outlined" />
+                <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -233,7 +238,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
+                  <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -251,7 +256,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -269,7 +274,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></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 c1b7cdfc4d..9970c5a831 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
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart'
@@ -150,7 +155,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableHeaderForm.isBolder }"
             >
               <el-icon>
-                <Icon name="icon_bold_outlined" />
+                <Icon name="icon_bold_outlined" ><icon_bold_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -173,7 +178,7 @@ onMounted(() => {
               :class="{ dark: themes === 'dark', active: state.tableHeaderForm.isItalic }"
             >
               <el-icon>
-                <Icon name="icon_italic_outlined" />
+                <Icon name="icon_italic_outlined" ><icon_italic_outlined /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -204,7 +209,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
+                  <Icon name="icon_left-alignment_outlined" ><icon_leftAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -222,7 +227,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined" ><icon_centerAlignment_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -240,7 +245,7 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <Icon name="icon_right-alignment_outlined" ><icon_rightAlignment_outlined /></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 01f02f1af3..bc82c55fe1 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, toRefs } from 'vue'
 
@@ -141,7 +143,7 @@ init()
         </div>
         <el-button class="m-del-icon-btn" text @click="removeFilter(index)">
           <el-icon size="20px">
-            <Icon name="icon_delete-trash_outlined" />
+            <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
           </el-icon>
         </el-button>
       </div>
@@ -152,7 +154,7 @@ init()
       @click="addFilter"
       :style="{ marginTop: item.filter && item.filter.length > 0 ? '10px' : 0 }"
     >
-      <Icon name="icon_add_outlined" style="width: 14px" />
+      <Icon name="icon_add_outlined" style="width: 14px" ><icon_add_outlined /></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 923abd51db..f34d459cb6 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, toRefs, watch, ref } from 'vue'
 import { multFieldValuesForPermissions } from '@/api/dataset'
@@ -333,7 +335,7 @@ init()
 
             <el-button class="m-del-icon-btn" text @click="removeFilter(index)">
               <el-icon size="20px">
-                <Icon name="icon_delete-trash_outlined" />
+                <Icon name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
               </el-icon>
             </el-button>
           </div>
@@ -344,7 +346,7 @@ init()
           @click="addFilter"
           :style="{ marginTop: item.filter && item.filter.length > 0 ? '10px' : 0 }"
         >
-          <Icon name="icon_add_outlined" style="width: 14px" />
+          <Icon name="icon_add_outlined" style="width: 14px" ><icon_add_outlined /></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 b456bdc900..5f91712aa5 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
@@ -1,4 +1,6 @@
 <script lang="ts">
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 export default {
   name: 'logic-relation'
 }
@@ -92,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>
+              <Icon name="icon_down_outlined"><icon_down_outlined /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -105,7 +107,7 @@ const del = (index, child) => {
       </div>
       <span class="operate-icon" v-if="x">
         <el-icon @click="emits('removeRelationList')">
-          <Icon name="icon_delete-trash_outlined"></Icon>
+          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 d740473a10..fb2cbf79de 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { SelectConfig } from '../TimeDialog.vue'
@@ -12,6 +14,7 @@ import {
   sysParamsIlns,
   fieldEnums
 } from '@/views/visualized/data/dataset/options.js'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 export interface Item {
   term: string
   fieldId: string
@@ -372,7 +375,7 @@ const emits = defineEmits(['update:item', 'del'])
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"></Icon>
+                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -386,9 +389,8 @@ const emits = defineEmits(['update:item', 'del'])
                 v-for="ele in dimensions"
               >
                 <el-icon>
-                  <Icon
-                    :name="`field_${fieldEnums[ele.deType]}`"
-                    :className="`field-icon-${fieldEnums[ele.deType]}`"
+                  <Icon :className="`field-icon-${fieldEnums[ele.deType]}`"
+                    ><component :is="iconFieldMap[fieldEnums[ele.deType]]"></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -573,7 +575,7 @@ 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>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -584,7 +586,7 @@ const emits = defineEmits(['update:item', 'del'])
                 </div>
                 <div class="footer-right">
                   <el-icon @click="clearAll">
-                    <Icon name="icon_delete-trash_outlined"></Icon>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -593,7 +595,7 @@ 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>
+        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 aa7a4200c5..55febb112f 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1,4 +1,12 @@
 <script lang="ts" setup>
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import iconFilter from '@/assets/svg/icon-filter.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
 import {
   PropType,
   reactive,
@@ -57,6 +65,9 @@ import { Field, getFieldByDQ, copyChartField, deleteChartField } from '@/api/cha
 import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue'
 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'
 const embeddedStore = useEmbedded()
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -1441,9 +1452,10 @@ const confirmEditCalc = () => {
 
 const getIconName = (deType, extField, dimension = false) => {
   if (extField === 2) {
-    return `${fieldTypeCalculated[deType]}${dimension ? '' : '_1'}`
+    const iconFieldCalculated = dimension ? iconFieldCalculatedMap : iconFieldCalculatedQMap
+    return iconFieldCalculated[fieldTypeCalculated[deType]]
   }
-  return `field_${fieldType[deType]}`
+  return iconFieldMap[fieldType[deType]]
 }
 
 const chartFieldEdit = param => {
@@ -1802,8 +1814,7 @@ const deleteChartFieldItem = id => {
                               <Icon
                                 v-else
                                 class-name="chart-type-select-icon"
-                                :name="state.chartTypeOptions[0]['icon']"
-                              />
+                              ><component :is='iconChartMap[state.chartTypeOptions[0]['icon']]'></component></Icon>
                             </template>
                             <template #default>
                               <el-option
@@ -1876,7 +1887,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('xAxis')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -1934,7 +1945,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('xAxisExt')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -1990,7 +2001,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('flowMapStartName')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2048,7 +2059,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('flowMapEndName')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2106,7 +2117,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extStack')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2161,7 +2172,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extColor')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2224,7 +2235,7 @@ const deleteChartFieldItem = id => {
                                   class="hint-icon"
                                   :class="{ 'hint-icon--dark': themes === 'dark' }"
                                 >
-                                  <Icon name="icon_info_outlined" />
+                                  <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
                                 </el-icon>
                               </el-tooltip>
                             </span>
@@ -2239,7 +2250,7 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxis')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2300,7 +2311,7 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('extBubble')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2356,7 +2367,7 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxisExt')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2416,7 +2427,7 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxis')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2489,7 +2500,7 @@ const deleteChartFieldItem = id => {
                                 size="14px"
                                 @click="removeItems('yAxisExt')"
                               >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2566,7 +2577,7 @@ const deleteChartFieldItem = id => {
                                 class="hint-icon"
                                 :class="{ 'hint-icon--dark': themes === 'dark' }"
                               >
-                                <Icon name="icon_info_outlined" />
+                                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2581,7 +2592,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('extBubble')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2638,7 +2649,7 @@ const deleteChartFieldItem = id => {
                                 class="hint-icon"
                                 :class="{ 'hint-icon--dark': themes === 'dark' }"
                               >
-                                <Icon name="icon_info_outlined" />
+                                <Icon name="icon_info_outlined" ><icon_info_outlined /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2653,7 +2664,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('drillFields')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2707,7 +2718,7 @@ const deleteChartFieldItem = id => {
                               size="14px"
                               @click="removeItems('customFilter')"
                             >
-                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2717,7 +2728,7 @@ const deleteChartFieldItem = id => {
                           @click="openTreeFilter"
                         >
                           <el-icon>
-                            <Icon class="svg-background" name="icon-filter"></Icon>
+                            <Icon class="svg-background" name="icon-filter"><iconFilter /></Icon>
                           </el-icon>
 
                           <span>{{ $t('chart.filter') }}</span>
@@ -2997,7 +3008,7 @@ const deleteChartFieldItem = id => {
                   style="margin-left: 8px"
                   @click="editDs"
                 >
-                  <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete" />
+                  <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete" ><icon_edit_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-row>
@@ -3014,7 +3025,7 @@ const deleteChartFieldItem = id => {
                       <Icon
                         name="icon_refresh_outlined"
                         class="el-icon-arrow-down el-icon-delete"
-                      />
+                      ><icon_refresh_outlined /></Icon>
                     </el-icon>
                   </el-tooltip>
                   <el-icon
@@ -3023,7 +3034,7 @@ const deleteChartFieldItem = id => {
                     :class="{ dark: themes === 'dark' }"
                     @click="addCalcField('d')"
                   >
-                    <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete"></Icon>
+                    <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete"><icon_add_outlined /></Icon>
                   </el-icon>
                 </span>
               </div>
@@ -3038,7 +3049,7 @@ const deleteChartFieldItem = id => {
               >
                 <template #prefix>
                   <el-icon class="el-input__icon">
-                    <Icon name="icon_search-outline_outlined"></Icon>
+                    <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
                   </el-icon>
                 </template>
               </el-input>
@@ -3082,8 +3093,7 @@ const deleteChartFieldItem = id => {
                           :class-name="`field-icon-${
                             fieldType[[2, 3].includes(element.deType) ? 2 : 0]
                           }`"
-                          :name="getIconName(element.deType, element.extField)"
-                        />
+                        ><component :is='getIconName(element.deType, element.extField)'></component></Icon>
                       </el-icon>
                       <span
                         class="field-name ellipsis"
@@ -3098,7 +3108,7 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="copyChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_copy_outlined" />
+                        <Icon class-name="inner-class" name="icon_copy_outlined" ><icon_copy_outlined /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3107,7 +3117,7 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="deleteChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3157,8 +3167,7 @@ const deleteChartFieldItem = id => {
                               :class-name="`field-icon-${
                                 fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
                               }`"
-                              :name="`field_${fieldType[ele.deType]}`"
-                            />
+                            ><component :is='iconFieldMap[fieldType[ele.deType]]'></component></Icon>
                           </el-icon>
                           <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{
                             ele.name
@@ -3234,8 +3243,7 @@ const deleteChartFieldItem = id => {
                       <el-icon>
                         <Icon
                           :class-name="`field-icon-${fieldType[element.deType]}`"
-                          :name="getIconName(element.deType, element.extField, true)"
-                        ></Icon>
+                        ><component :is='getIconName(element.deType, element.extField, true)'></component></Icon>
                       </el-icon>
                       <span
                         class="field-name ellipsis"
@@ -3250,7 +3258,7 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="copyChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_copy_outlined" />
+                        <Icon class-name="inner-class" name="icon_copy_outlined" ><icon_copy_outlined /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3259,7 +3267,7 @@ const deleteChartFieldItem = id => {
                         size="14px"
                         @click.stop="deleteChartFieldItem(element.id)"
                       >
-                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                        <Icon class-name="inner-class" name="icon_delete-trash_outlined" ><icon_deleteTrash_outlined /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3305,10 +3313,7 @@ const deleteChartFieldItem = id => {
                           class="items flex-align-center"
                         >
                           <el-icon>
-                            <Icon
-                              :class-name="`field-icon-${fieldType[ele.deType]}`"
-                              :name="`field_${fieldType[ele.deType]}`"
-                            ></Icon>
+                            <Icon :class-name="`field-icon-${fieldType[ele.deType]}`"><component :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 1efaad19ab..d7d73803f9 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
@@ -1,4 +1,6 @@
 <script lang="tsx" setup>
+import { iconChartDarkMap } from '@/components/icon-group/chart-dark-list'
+import { iconChartMap } from '@/components/icon-group/chart-list'
 import { toRefs } from 'vue'
 const props = defineProps({
   viewIcon: {
@@ -18,7 +20,11 @@ const { viewIcon, themes } = toRefs(props)
 
 <template>
   <div class="canvas-content error-info">
-    <Icon class-name="item-icon" :name="viewIcon + (themes === 'dark' ? '-dark' : '')" />
+    <Icon class-name="item-icon"
+      ><component
+        :is="themes === 'dark' ? iconChartDarkMap[`${viewIcon}-dark`] : iconChartMap[viewIcon]"
+      ></component
+    ></Icon>
   </div>
 </template>
 
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 243fac0b3c..f657a278e6 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import icon_linkRecord_outlined from '@/assets/svg/icon_link-record_outlined.svg'
+import icon_viewinchat_outlined from '@/assets/svg/icon_viewinchat_outlined.svg'
+import icon_drilling_outlined from '@/assets/svg/icon_drilling_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import ChartComponentG2Plot from './components/ChartComponentG2Plot.vue'
 import DeIndicator from '@/custom-component/indicator/DeIndicator.vue'
@@ -855,22 +859,22 @@ 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 name="icon_info_outlined" ><icon_info_outlined /></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 name="icon_link-record_outlined" ><icon_linkRecord_outlined /></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 name="icon_viewinchat_outlined" ><icon_viewinchat_outlined /></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 name="icon_drilling_outlined" ><icon_drilling_outlined /></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 7d30b41886..50c98c3937 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"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></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"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></Icon>
                 </el-icon>
                 <span :title="name">{{ name }}</span>
               </span>
@@ -100,7 +100,7 @@
                 </el-option>
               </el-select> </el-col
             ><el-col :span="2" class="icon-center">
-              <Icon style="width: 20px; height: 20px" name="dv-link-target" /></el-col
+              <Icon style="width: 20px; height: 20px" name="dv-link-target" ><dvLinkTarget /></Icon></el-col
             ><el-col :span="11">
               <dataset-select
                 ref="datasetSelector"
@@ -126,6 +126,8 @@
 </template>
 
 <script lang="ts" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
 import {
   ElButton,
   ElDrawer,
diff --git a/core/core-frontend/src/views/common/DeResourceArrow.vue b/core/core-frontend/src/views/common/DeResourceArrow.vue
index 3c6c6f0307..1b523780e8 100644
--- a/core/core-frontend/src/views/common/DeResourceArrow.vue
+++ b/core/core-frontend/src/views/common/DeResourceArrow.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import { useAppStoreWithOut } from '@/store/modules/app'
 const appStore = useAppStoreWithOut()
 defineProps({
@@ -21,7 +23,7 @@ const handleClick = val => {
     class="arrow-side-tree arrow-side-tree-left"
   >
     <el-icon>
-      <Icon name="icon_left_outlined" />
+      <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
     </el-icon>
   </div>
   <div
@@ -30,7 +32,7 @@ const handleClick = val => {
     class="arrow-side-tree arrow-side-tree-right"
   >
     <el-icon>
-      <Icon name="icon_right_outlined" />
+      <Icon name="icon_right_outlined" ><icon_right_outlined /></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 5d3f24d97a..e9abbf2d1e 100644
--- a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
+++ b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { ref, reactive, computed, watch, toRefs, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import nothingTree from '@/assets/img/nothing-tree.png'
@@ -343,7 +345,7 @@ const emits = defineEmits(['finish'])
           <template #default="{ data: { name } }">
             <span class="custom-tree-node">
               <el-icon>
-                <Icon name="dv-folder"></Icon>
+                <Icon name="dv-folder"><dvFolder /></Icon>
               </el-icon>
               <span :title="name">{{ name }}</span>
             </span>
@@ -354,7 +356,7 @@ 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>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -373,7 +375,7 @@ const emits = defineEmits(['finish'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></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 37bb196ee6..23b41bf37d 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -1,4 +1,21 @@
 <script setup lang="ts">
+import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.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'
+import dvRename from '@/assets/svg/dv-rename.svg'
+import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
+import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'
+import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
+import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
+import dvUseTemplate from '@/assets/svg/dv-use-template.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_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { onMounted, reactive, ref, toRefs, watch, nextTick, computed } from 'vue'
 import { copyResource, deleteLogic, ResourceOrFolder } from '@/api/visualization/dataVisualization'
 import { ElIcon, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus-secondary'
@@ -66,17 +83,17 @@ const state = reactive({
     {
       label: '移动到',
       command: 'move',
-      svgName: 'dv-move'
+      svgName: dvMove
     },
     {
       label: '重命名',
       command: 'rename',
-      svgName: 'dv-rename'
+      svgName: dvRename
     },
     {
       label: '删除',
       command: 'delete',
-      svgName: 'dv-delete',
+      svgName: dvDelete,
       divided: true
     }
   ],
@@ -102,7 +119,7 @@ const state = reactive({
 })
 
 const dvSvgType = computed(() =>
-  curCanvasType.value === 'dashboard' ? 'dv-dashboard-spine' : 'dv-screen-spine'
+  curCanvasType.value === 'dashboard' ? dvDashboardSpine : dvScreenSpine
 )
 
 const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
@@ -116,13 +133,13 @@ const resourceTypeList = computed(() => {
     },
     {
       label: '使用模板新建',
-      svgName: 'dv-use-template',
+      svgName: dvUseTemplate,
       command: 'newFromTemplate'
     },
     {
       label: '新建文件夹',
       divided: true,
-      svgName: 'dv-folder',
+      svgName: dvFolder,
       command: 'newFolder'
     }
   ]
@@ -134,22 +151,22 @@ const menuList = computed(() => {
     {
       label: '复制',
       command: 'copy',
-      svgName: 'dv-copy-dark'
+      svgName: dvCopyDark
     },
     {
       label: '移动到',
       command: 'move',
-      svgName: 'dv-move'
+      svgName: dvMove
     },
     {
       label: '重命名',
       command: 'rename',
-      svgName: 'dv-rename'
+      svgName: dvRename
     },
     {
       label: '删除',
       command: 'delete',
-      svgName: 'dv-delete',
+      svgName: dvDelete,
       divided: true
     }
   ]
@@ -502,26 +519,26 @@ defineExpose({
               style="margin-right: 20px"
               @click="addOperation('newFolder', null, 'folder')"
             >
-              <Icon name="dv-new-folder" />
+              <Icon name="dv-new-folder"><dvNewFolder /></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 name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
               </el-icon>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
                     <el-icon :class="`handle-icon color-${curCanvasType}`">
-                      <Icon :name="dvSvgType"></Icon>
+                      <Icon><component :is="dvSvgType"></component></Icon>
                     </el-icon>
                     空白新建
                   </el-dropdown-item>
                   <el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
                     <el-icon class="handle-icon">
-                      <Icon name="dv-use-template"></Icon>
+                      <Icon name="dv-use-template"><dvUseTemplate /></Icon>
                     </el-icon>
                     使用模板新建
                   </el-dropdown-item>
@@ -539,25 +556,21 @@ defineExpose({
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"></Icon>
+            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
           </el-icon>
         </template>
       </el-input>
       <el-dropdown @command="sortTypeChange" trigger="click">
         <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"
-            ></Icon>
+            <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
+              ><dvSortAsc
+            /></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"
-            ></Icon>
+            <Icon v-show="state.curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dvSortDesc
+            /></Icon>
           </el-tooltip>
         </el-icon>
         <template #dropdown>
@@ -594,15 +607,19 @@ defineExpose({
         <template #default="{ node, data }">
           <span class="custom-tree-node">
             <el-icon style="font-size: 18px" v-if="!data.leaf">
-              <Icon name="dv-folder"></Icon>
+              <Icon name="dv-folder"><dvFolder /></Icon>
             </el-icon>
             <el-icon style="font-size: 18px" v-else-if="curCanvasType === 'dashboard'">
               <Icon
-                :name="data.extraFlag ? 'dv-dashboard-spine-mobile' : 'dv-dashboard-spine'"
+                ><component
+                  :is="data.extraFlag ? dvDashboardSpineMobile : dvDashboardSpine"
+                ></component
               ></Icon>
             </el-icon>
             <el-icon class="icon-screen-new color-dataV" style="font-size: 18px" v-else>
-              <Icon name="icon_operation-analysis_outlined"></Icon>
+              <Icon name="icon_operation-analysis_outlined"
+                ><icon_operationAnalysis_outlined
+              /></Icon>
             </el-icon>
             <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
 
@@ -616,7 +633,7 @@ defineExpose({
                 class="hover-icon"
                 @click="resourceEdit(data.id)"
               >
-                <Icon name="icon_edit_outlined" />
+                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
               </el-icon>
               <handle-more
                 @handle-command="
diff --git a/core/core-frontend/src/views/common/DeTemplatePreviewList.vue b/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
index d26569320a..b223911830 100644
--- a/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
+++ b/core/core-frontend/src/views/common/DeTemplatePreviewList.vue
@@ -25,13 +25,13 @@
             <span class="custom-tree-node">
               <span class="custom-label">
                 <el-icon style="font-size: 18px" v-if="data.nodeType === 'folder'">
-                  <Icon name="dv-folder"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></Icon>
                 </el-icon>
                 <el-icon style="font-size: 18px" v-else-if="data.dvType === 'dashboard'">
-                  <Icon name="dv-dashboard-spine"></Icon>
+                  <Icon name="dv-dashboard-spine"><dvDashboardSpine /></Icon>
                 </el-icon>
                 <el-icon class="icon-screen-new" style="font-size: 18px" v-else>
-                  <Icon name="icon_operation-analysis_outlined"></Icon>
+                  <Icon name="icon_operation-analysis_outlined"><icon_operationAnalysis_outlined /></Icon>
                 </el-icon>
                 <span :title="data.name" class="custom-name">{{ data.name }}</span>
               </span>
@@ -44,6 +44,9 @@
 </template>
 
 <script setup lang="ts">
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
+import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
 import { findOne } from '@/api/template'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive } from 'vue'
diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue
index ab6778a4e1..28ddd378be 100644
--- a/core/core-frontend/src/views/copilot/DialogueChart.vue
+++ b/core/core-frontend/src/views/copilot/DialogueChart.vue
@@ -1,4 +1,11 @@
 <script lang="ts" setup>
+import icon_chartLineC from '@/assets/svg/icon_chart-line-c.svg'
+import icon_dashboard_outlinedC from '@/assets/svg/icon_dashboard_outlined-c.svg'
+import icon_pie_outlinedC from '@/assets/svg/icon_pie_outlined-c.svg'
+import default_avatar from '@/assets/svg/default_avatar.svg'
+import copilot from '@/assets/svg/copilot.svg'
+import chartTable from '@/assets/svg/chart-table.svg'
+import chartDownload from '@/assets/svg/chart-download.svg'
 import { PropType, computed, onMounted, shallowRef, ref, nextTick, watch } from 'vue'
 import { Column, Line, Pie } from '@antv/g2plot'
 import { useElementSize } from '@vueuse/core'
@@ -213,20 +220,21 @@ const renderTable = computed(() => {
   )
 })
 const activeCommand = ref('')
+
 const curTypeList = [
   {
     label: '折线图',
     value: 'line',
-    icon: 'icon_chart-line-c'
+    icon: icon_chartLineC
   },
   {
     label: '柱状图',
-    icon: 'icon_dashboard_outlined-c',
+    icon: icon_dashboard_outlinedC,
     value: 'bar'
   },
   {
     label: '饼图',
-    icon: 'icon_pie_outlined-c',
+    icon: icon_pie_outlinedC,
     value: 'pie'
   }
 ]
@@ -257,7 +265,9 @@ const tips = computed(() => {
     ]"
   >
     <el-icon style="font-size: 32px" class="dialogue-chart_icon">
-      <Icon :name="copilotInfo.msgType === 'api' ? 'copilot' : 'default_avatar'" />
+      <Icon
+        ><component :is="copilotInfo.msgType === 'api' ? copilot : default_avatar"></component
+      ></Icon>
     </el-icon>
     <div ref="content" class="content">
       <div v-if="isWelcome" class="question-or-title" style="font-size: 16px; font-weight: 500">
@@ -304,7 +314,9 @@ const tips = computed(() => {
           v-if="activeCommand"
           class="select-prefix"
         >
-          <Icon :name="curTypeList.find(ele => ele.value === activeCommand).icon" />
+          <Icon
+            ><component :is="curTypeList.find(ele => ele.value === activeCommand).icon"></component
+          ></Icon>
         </el-icon>
         <el-tooltip effect="dark" content="切换图表类型" placement="top">
           <div
@@ -338,13 +350,13 @@ const tips = computed(() => {
           class="ed-icon_chart"
           @click="switchChartType('table')"
         >
-          <Icon name="chart-table" />
+          <Icon name="chart-table"><chartTable /></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" />
+          <Icon name="chart-download"><chartDownload /></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 f52a697b09..9ab618ae88 100644
--- a/core/core-frontend/src/views/copilot/index.vue
+++ b/core/core-frontend/src/views/copilot/index.vue
@@ -1,4 +1,13 @@
 <script lang="ts" setup>
+import activeBtn_copilot from '@/assets/svg/active-btn_copilot.svg'
+import btn_copilot from '@/assets/svg/btn_copilot.svg'
+import copilot from '@/assets/svg/copilot.svg'
+import icon_loading_outlined from '@/assets/svg/icon_loading_outlined.svg'
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_dataset from '@/assets/svg/icon_dataset.svg'
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { ref, shallowRef, computed, watch, nextTick } from 'vue'
 import { ElMessageBox } from 'element-plus-secondary'
 import {
@@ -13,6 +22,7 @@ import { fieldType } from '@/utils/attr'
 import DialogueChart from '@/views/copilot/DialogueChart.vue'
 import { type Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
 import { cloneDeep } from 'lodash-es'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 const quota = shallowRef([])
 const dimensions = shallowRef([])
 const datasetTree = shallowRef([])
@@ -197,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" />
+        <Icon name="copilot"><copilot /></Icon>
       </el-icon>
       Copilot 对话分析
     </div>
@@ -220,10 +230,10 @@ const queryAnswer = (event?: KeyboardEvent) => {
           >
           </el-input>
           <el-icon v-if="copilotChatLoading" class="copilot-icon circular-input_icon">
-            <Icon name="icon_loading_outlined"></Icon>
+            <Icon name="icon_loading_outlined"><icon_loading_outlined /></Icon>
           </el-icon>
           <el-icon v-else class="copilot-icon" @click="queryAnswer" :class="isActive && 'active'">
-            <Icon :name="isActive ? 'active-btn_copilot' : 'btn_copilot'"></Icon>
+            <Icon><component :is="isActive ? activeBtn_copilot : btn_copilot"></component></Icon>
           </el-icon>
         </div>
       </div>
@@ -231,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>
+              <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
             </el-icon>
           </p>
         </el-tooltip>
@@ -239,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>
+              <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
             </el-icon>
           </p>
         </el-tooltip>
@@ -261,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"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></Icon>
                 </el-icon>
                 <el-icon size="18px" v-if="data.leaf">
-                  <Icon name="icon_dataset"></Icon>
+                  <Icon name="icon_dataset"><icon_dataset /></Icon>
                 </el-icon>
                 <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
                   node.label
@@ -277,7 +287,7 @@ 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>
+                <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.dimension') }}
             </div>
@@ -286,10 +296,10 @@ const queryAnswer = (event?: KeyboardEvent) => {
                 <span class="custom-tree-node father">
                   <el-icon>
                     <Icon
-                      :name="`field_${fieldType[data.deExtractType]}`"
                       :className="`field-icon-${
                         fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
                       }`"
+                      ><component :is="iconFieldMap[fieldType[data.deExtractType]]"></component
                     ></Icon>
                   </el-icon>
                   <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -300,7 +310,7 @@ 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>
+                <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.quota') }}
             </div>
@@ -309,10 +319,10 @@ const queryAnswer = (event?: KeyboardEvent) => {
                 <span class="custom-tree-node father">
                   <el-icon>
                     <Icon
-                      :name="`field_${fieldType[data.deExtractType]}`"
                       :className="`field-icon-${
                         fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
                       }`"
+                      ><component :is="iconFieldMap[fieldType[data.deExtractType]]"></component
                     ></Icon>
                   </el-icon>
                   <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index 4054738bc4..0afd94bda7 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { reactive, nextTick, ref, toRefs, onBeforeMount, computed, onMounted } from 'vue'
@@ -299,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 name="icon_add_outlined" ><icon_add_outlined /></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 709448650b..0220b7830e 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
 import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
@@ -215,7 +217,7 @@ const save = () => {
     <div class="top-bar">
       <div class="mobile-to-pc">
         <el-icon @click="handleBack">
-          <Icon name="icon_left_outlined" />
+          <Icon name="icon_left_outlined" ><icon_left_outlined /></Icon>
         </el-icon>
         {{ dvInfo.name }}
       </div>
@@ -225,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 name="icon_pc_outlined" ><icon_pc_outlined /></Icon>
           </el-icon>
         </el-tooltip>
         <el-button type="primary" @click="save">保存</el-button>
@@ -237,7 +239,7 @@ const save = () => {
       </div>
       <div class="config-panel-title">
         <el-icon>
-          <Icon name="icon_left_outlined" />
+          <Icon name="icon_left_outlined" ><icon_left_outlined /></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 2544ee6a45..b8dc343452 100644
--- a/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
@@ -1,8 +1,21 @@
 <script lang="ts" setup>
+import bar from '@/assets/svg/bar.svg'
+import dbMoreWeb from '@/assets/svg/db-more-web.svg'
+import dvMoreTimeClock from '@/assets/svg/dv-more-time-clock.svg'
+import dvPictureReal from '@/assets/svg/dv-picture-real.svg'
+import dvTab from '@/assets/svg/dv-tab.svg'
+import iconStream from '@/assets/svg/icon-stream.svg'
+import iconVideo from '@/assets/svg/icon-video.svg'
+import icon_graphical from '@/assets/svg/icon_graphical.svg'
+import icon_search from '@/assets/svg/icon_search.svg'
+import other_material_board from '@/assets/svg/other_material_board.svg'
+import other_material_icon from '@/assets/svg/other_material_icon.svg'
+import scrollText from '@/assets/svg/scroll-text.svg'
 import { computed, nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getCanvasStyle } from '@/utils/style'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
+import { iconChartMap } from '@/components/icon-group/chart-list'
 const dvMainStore = dvMainStoreWithOut()
 const viewShow = ref(true)
 
@@ -68,12 +81,27 @@ const targetViewCheckedChange = (val, data) => {
   })
 }
 
+const iconMap = {
+  bar: bar,
+  'db-more-web': dbMoreWeb,
+  'dv-more-time-clock': dvMoreTimeClock,
+  'dv-picture-real': dvPictureReal,
+  'dv-tab': dvTab,
+  'icon-stream': iconStream,
+  'icon-video': iconVideo,
+  icon_graphical: icon_graphical,
+  icon_search: icon_search,
+  other_material_board: other_material_board,
+  other_material_icon: other_material_icon,
+  'scroll-text': scrollText
+}
+
 const getIconName = item => {
   if (item.component === 'UserView') {
     const viewInfo = canvasViewInfo.value[item.id]
-    return `${viewInfo.type}`
+    return iconChartMap[`${viewInfo.type}`]
   } else {
-    return item.icon
+    return iconMap[item.icon]
   }
 }
 
@@ -160,11 +188,9 @@ onBeforeMount(() => {
             </span>
             <span>
               <span class="tree-select-field">
-                <Icon
-                  class-name="view-type-icon"
-                  style="margin-right: 4px"
-                  :name="getIconName(data)"
-                />
+                <Icon class-name="view-type-icon" style="margin-right: 4px"
+                  ><component :is="getIconName(data)"></component
+                ></Icon>
                 {{ data.label }}
               </span>
             </span>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index 63feed5042..0c134befac 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'
+import visualStar from '@/assets/svg/visual-star.svg'
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import dvHeadMore from '@/assets/svg/dv-head-more.svg'
+import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'
+import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -10,7 +17,6 @@ import { ref, watch, computed } from 'vue'
 import ShareVisualHead from '@/views/share/share/ShareVisualHead.vue'
 import { XpackComponent } from '@/components/plugin'
 import { useEmitt } from '@/hooks/web/useEmitt'
-import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -107,7 +113,7 @@ const initOpenHandler = newWindow => {
         @click="executeStore"
         :style="{ color: favorited ? '#FFC60A' : '#646A73' }"
       >
-        <icon :name="favorited ? 'visual-star' : 'icon_collection_outlined'"></icon>
+        <icon><component :is="favorited ? visualStar : icon_collection_outlined"></component></icon>
       </el-icon>
     </el-tooltip>
     <el-divider style="margin: 0 16px 0 7px" direction="vertical" />
@@ -115,7 +121,9 @@ const initOpenHandler = newWindow => {
       <span style="line-height: 22px">创建人:{{ dvInfo.creatorName }}</span>
       <el-popover show-arrow :offset="8" placement="bottom" width="400" trigger="hover">
         <template #reference>
-          <el-icon class="info-tips"><Icon name="dv-info"></Icon></el-icon>
+          <el-icon class="info-tips"
+            ><Icon name="dv-info"><dvInfoSvg /></Icon
+          ></el-icon>
         </template>
         <dv-detail-info></dv-detail-info>
       </el-popover>
@@ -127,13 +135,13 @@ const initOpenHandler = newWindow => {
         @click="() => useEmitt().emitter.emit('canvasFullscreen')"
       >
         <template #icon>
-          <icon name="icon_pc_fullscreen"></icon>
+          <icon name="icon_pc_fullscreen"><icon_pc_fullscreen /></icon>
         </template>
         全屏</el-button
       >
       <el-button secondary @click="preview()">
         <template #icon>
-          <icon name="icon_pc_outlined"></icon>
+          <icon name="icon_pc_outlined"><icon_pc_outlined /></icon>
         </template>
         预览</el-button
       >
@@ -144,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>
+          <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
         </template>
         编辑</el-button
       >
       <el-dropdown trigger="click">
         <el-icon class="head-more-icon">
-          <Icon name="dv-head-more"></Icon>
+          <Icon name="dv-head-more"><dvHeadMore /></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 a04418f461..ae6ceec0cb 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
@@ -298,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 name="icon_add_outlined" ><icon_add_outlined /></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 7c1b9fcd19..a47e3aefd3 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dvRuler from '@/assets/svg/dv-ruler.svg'
 import CanvasAttr from '@/components/data-visualization/CanvasAttr.vue'
 import { computed, watch, onMounted, reactive, ref, nextTick, onUnmounted } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -434,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" />
+            <Icon name="dv-ruler" ><dvRuler /></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 125ccb0d4b..150862b4a5 100644
--- a/core/core-frontend/src/views/login/index.vue
+++ b/core/core-frontend/src/views/login/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import DataEase from '@/assets/svg/DataEase.svg'
 import { ref, reactive, onMounted, computed, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { FormRules, FormInstance } from 'element-plus-secondary'
@@ -310,7 +311,7 @@ onMounted(async () => {
                 v-if="!loginLogoUrl && axiosFinished"
                 className="login-logo-icon"
                 name="DataEase"
-              ></Icon>
+              ><DataEase /></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 15caf89527..0545df8519 100644
--- a/core/core-frontend/src/views/mobile/components/DashboardCell.vue
+++ b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 defineProps({
   label: {
     type: String,
@@ -24,7 +25,7 @@ const handleClick = () => {
   <div class="dashboard-cell" @click="handleClick">
     <div class="label">
       <el-icon>
-        <Icon :name="prefixIcon"></Icon>
+        <Icon><component :is="prefixIcon"></component></Icon>
       </el-icon>
       <span class="text ellipsis">
         {{ label }}
@@ -32,7 +33,7 @@ const handleClick = () => {
     </div>
     <div class="switch" v-if="nextlevel">
       <el-icon>
-        <Icon name="icon_right_outlined"></Icon>
+        <Icon name="icon_right_outlined"><icon_right_outlined /></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 eca0a85ca5..c1b0d11540 100644
--- a/core/core-frontend/src/views/mobile/components/OrgCell.vue
+++ b/core/core-frontend/src/views/mobile/components/OrgCell.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 const props = defineProps({
   label: {
     type: String,
@@ -36,7 +37,7 @@ const handleRightClick = () => {
   <div class="org-cell">
     <div class="label" :class="active && 'active'">
       <el-icon v-if="!!prefixIcon">
-        <Icon :name="prefixIcon"></Icon>
+        <Icon><component :is="prefixIcon"></component></Icon>
       </el-icon>
       <span class="text ellipsis">
         {{ label }}
@@ -47,7 +48,7 @@ const handleRightClick = () => {
         {{ tips }}
       </div>
       <el-icon>
-        <Icon name="icon_right_outlined"></Icon>
+        <Icon name="icon_right_outlined"><icon_right_outlined /></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 926a333289..6ac64622f0 100644
--- a/core/core-frontend/src/views/mobile/components/Workbranch.vue
+++ b/core/core-frontend/src/views/mobile/components/Workbranch.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
 defineProps({
   label: {
     type: String,
@@ -19,7 +20,7 @@ const handleClick = () => {
 <template>
   <div class="workbranch-cell" @click="handleClick">
     <el-icon>
-      <Icon name="icon_dashboard"></Icon>
+      <Icon name="icon_dashboard"><icon_dashboard /></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 abdeb123b1..5a41ef3a69 100644
--- a/core/core-frontend/src/views/mobile/directory/index.vue
+++ b/core/core-frontend/src/views/mobile/directory/index.vue
@@ -1,4 +1,11 @@
 <script lang="ts" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
+
+import icon_right_outlined from '@/assets/svg/icon_right_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 { ref, computed, onMounted, watch, onUnmounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -203,7 +210,7 @@ onMounted(() => {
         <div @click="onClickPanel" key="仪表板">
           <span class="label primary-name">仪表板</span>
           <el-icon>
-            <Icon name="icon_right_outlined"></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
           </el-icon>
         </div>
         <div v-for="(ele, index) in [...directName]" @click="handleDir(index)" :key="ele">
@@ -211,7 +218,7 @@ onMounted(() => {
             ele
           }}</span>
           <el-icon v-if="index !== directName.length - 1">
-            <Icon name="icon_right_outlined"></Icon>
+            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
           </el-icon>
         </div>
       </div>
@@ -226,14 +233,18 @@ onMounted(() => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></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"></Icon>
-            <Icon v-show="curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"></Icon>
+            <Icon v-if="curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
+              ><dvSortAsc
+            /></Icon>
+            <Icon v-show="curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dvSortDesc
+            /></Icon>
           </el-icon>
           <template #dropdown>
             <el-dropdown-menu style="width: 246px">
@@ -258,7 +269,7 @@ onMounted(() => {
         @click="dataClick(ele)"
         :label="ele.name"
         :nextlevel="!ele.leaf"
-        :prefix-icon="ele.leaf ? 'icon_dashboard' : 'dv-folder'"
+        :prefix-icon="ele.leaf ? icon_dashboard : dvFolder"
       />
     </div>
   </div>
diff --git a/core/core-frontend/src/views/mobile/index.vue b/core/core-frontend/src/views/mobile/index.vue
index 484d731624..954ce4d8c1 100644
--- a/core/core-frontend/src/views/mobile/index.vue
+++ b/core/core-frontend/src/views/mobile/index.vue
@@ -1,4 +1,10 @@
 <script lang="ts" setup>
+import mobileIcon_dashboard_filled from '@/assets/svg/mobile/icon_dashboard_filled.svg'
+import mobileIcon_dashboard_outlined from '@/assets/svg/mobile/icon_dashboard_outlined.svg'
+import mobileIcon_home_filled from '@/assets/svg/mobile/icon_home_filled.svg'
+import mobileIcon_home_outlined from '@/assets/svg/mobile/icon_home_outlined.svg'
+import mobileIcon_member_filled from '@/assets/svg/mobile/icon_member_filled.svg'
+import mobileIcon_member_outlined from '@/assets/svg/mobile/icon_member_outlined.svg'
 import { ref, onBeforeMount } from 'vue'
 import Home from './home/index.vue'
 import Directory from './directory/index.vue'
@@ -36,7 +42,11 @@ onBeforeMount(() => {
       <van-tabbar-item name="home">
         <template #icon="{ active }">
           <el-icon>
-            <Icon :name="active ? 'mobile-icon_home_filled' : 'mobile-icon_home_outlined'"></Icon>
+            <Icon
+              ><component
+                :is="active ? mobileIcon_home_filled : mobileIcon_home_outlined"
+              ></component
+            ></Icon>
           </el-icon>
         </template>
         工作台
@@ -45,7 +55,9 @@ onBeforeMount(() => {
         ><template #icon="{ active }">
           <el-icon>
             <Icon
-              :name="active ? 'mobile-icon_dashboard_filled' : 'mobile-icon_dashboard_outlined'"
+              ><component
+                :is="active ? mobileIcon_dashboard_filled : mobileIcon_dashboard_outlined"
+              ></component
             ></Icon>
           </el-icon> </template
         >仪表板</van-tabbar-item
@@ -54,7 +66,9 @@ onBeforeMount(() => {
         ><template #icon="{ active }">
           <el-icon>
             <Icon
-              :name="active ? 'mobile-icon_member_filled' : 'mobile-icon_member_outlined'"
+              ><component
+                :is="active ? mobileIcon_member_filled : mobileIcon_member_outlined"
+              ></component
             ></Icon>
           </el-icon> </template
         >我的</van-tabbar-item
diff --git a/core/core-frontend/src/views/mobile/login/index.vue b/core/core-frontend/src/views/mobile/login/index.vue
index 7068f39b5c..ae85d6f890 100644
--- a/core/core-frontend/src/views/mobile/login/index.vue
+++ b/core/core-frontend/src/views/mobile/login/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
+import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
 import { ref } from 'vue'
 import VanCellGroup from 'vant/es/cell-group'
 import mobileWholeBg from '@/assets/img/bg-mobile.png'
@@ -150,8 +152,8 @@ const usernameEndValidate = ({ status, message }) => {
           >
             <template #right-icon>
               <el-icon>
-                <Icon v-if="visible" name="icon_invisible_outlined"></Icon>
-                <Icon v-else name="icon_visible_outlined"></Icon>
+                <Icon v-if="visible" name="icon_invisible_outlined"><icon_invisible_outlined /></Icon>
+                <Icon v-else name="icon_visible_outlined"><icon_visible_outlined /></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 9bd135346f..baa9116428 100644
--- a/core/core-frontend/src/views/mobile/personal/index.vue
+++ b/core/core-frontend/src/views/mobile/personal/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import userImg from '@/assets/img/user.png'
 import { mountedOrg, switchOrg } from '@/api/user'
@@ -187,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>
+            <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
           </el-icon>
         </div>
         <div
@@ -198,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>
+            <Icon name="icon_right_outlined"><icon_right_outlined /></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 3140d06983..75c5554d97 100644
--- a/core/core-frontend/src/views/share/share/ShareGrid.vue
+++ b/core/core-frontend/src/views/share/share/ShareGrid.vue
@@ -1,4 +1,11 @@
 <script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'
+import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
+import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
+import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
+import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
+import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive, watch, computed } from 'vue'
 import GridTable from '@/components/grid-table/src/GridTable.vue'
@@ -118,14 +125,14 @@ const handleCellClick = row => {
 }
 
 const iconMap = {
-  panel: 'icon_dashboard_outlined',
-  panelMobile: 'dv-dashboard-spine-mobile',
-  dashboard: 'icon_dashboard_outlined',
-  dashboardMobile: 'dv-dashboard-spine-mobile',
-  screen: 'icon_operation-analysis_outlined',
-  dataV: 'icon_operation-analysis_outlined',
-  dataset: 'icon_app_outlined',
-  datasource: 'icon_database_outlined'
+  panel: icon_dashboard_outlined,
+  panelMobile: dvDashboardSpineMobile,
+  dashboard: icon_dashboard_outlined,
+  dashboardMobile: dvDashboardSpineMobile,
+  screen: icon_operationAnalysis_outlined,
+  dataV: icon_operationAnalysis_outlined,
+  dataset: icon_app_outlined,
+  datasource: icon_database_outlined
 }
 
 watch(
@@ -169,7 +176,7 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"></Icon>
+            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -189,10 +196,10 @@ 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"></Icon>
+              <Icon name="dv-dashboard-spine-mobile"><dvDashboardSpineMobile /></Icon>
             </el-icon>
             <el-icon v-else :class="`main-color color-${scope.row.type}`">
-              <Icon :name="iconMap[scope.row.type]" />
+              <Icon><component :is="iconMap[scope.row.type]"></component></Icon>
             </el-icon>
             <el-tooltip placement="top">
               <template #content>{{ scope.row.name }}</template>
@@ -221,7 +228,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>
+              <Icon name="icon_pc_outlined"><icon_pc_outlined /></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 8efbb98826..adedcaf2a7 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>
+      <Icon name="icon_share-label_outlined"><icon_shareLabel_outlined /></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>
+              <icon name="icon_admin_outlined"><icon_admin_outlined /></icon>
             </template>
           </el-button>
         </div>
@@ -141,6 +141,8 @@
 </template>
 
 <script lang="ts" setup>
+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'
 import { ref, reactive, onMounted, computed, nextTick } from 'vue'
 import request from '@/config/axios'
diff --git a/core/core-frontend/src/views/share/share/ShareTicket.vue b/core/core-frontend/src/views/share/share/ShareTicket.vue
index e22e50f9d8..0b7307462c 100644
--- a/core/core-frontend/src/views/share/share/ShareTicket.vue
+++ b/core/core-frontend/src/views/share/share/ShareTicket.vue
@@ -5,7 +5,7 @@
         <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 class="toolbar-icon" name="icon_left_outlined" ><icon_left_outlined /></Icon>
             </el-icon>
           </span>
         </el-tooltip>
@@ -22,7 +22,7 @@
     <div class="ticket-add">
       <el-button @click.stop="addRow" text>
         <template #icon>
-          <icon name="icon_add_outlined"></icon>
+          <icon name="icon_add_outlined"><icon_add_outlined /></icon>
         </template>
         {{ t('commons.create') }}
       </el-button>
@@ -36,7 +36,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"></Icon>
+                    <Icon name="de-copy"><deCopy /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -48,7 +48,7 @@
               >
                 <el-button text @click.stop="refreshTicket(scope.row)">
                   <template #icon>
-                    <Icon name="icon_refresh_outlined"></Icon>
+                    <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -66,7 +66,7 @@
                 :content="$t('link_ticket.time_tips')"
                 placement="top"
               >
-                <Icon name="dv-info"></Icon>
+                <Icon name="dv-info"><dvInfo /></Icon>
               </el-tooltip>
             </div>
           </template>
@@ -116,7 +116,7 @@
               >
                 <el-button text @click.stop="deleteTicket(scope.row, scope.$index)">
                   <template #icon>
-                    <Icon name="icon_delete-trash_outlined"></Icon>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -128,12 +128,12 @@
               >
                 <el-button v-if="!scope.row.isEdit" text @click.stop="editRow(scope.row)">
                   <template #icon>
-                    <Icon name="icon_edit_outlined"></Icon>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                   </template>
                 </el-button>
                 <el-button v-else text @click.stop="saveRow(scope.row, scope.$index)">
                   <template #icon>
-                    <Icon name="edit-done"></Icon>
+                    <Icon name="edit-done"><editDone /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -150,6 +150,14 @@
 </template>
 
 <script lang="ts" setup>
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import deCopy from '@/assets/svg/de-copy.svg'
+import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
+import dvInfo from '@/assets/svg/dv-info.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import editDone from '@/assets/svg/edit-done.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { ref, reactive, onMounted, toRefs } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from '@/hooks/web/useI18n'
diff --git a/core/core-frontend/src/views/share/share/ShareVisualHead.vue b/core/core-frontend/src/views/share/share/ShareVisualHead.vue
index aeb6247a6f..2497c18c0a 100644
--- a/core/core-frontend/src/views/share/share/ShareVisualHead.vue
+++ b/core/core-frontend/src/views/share/share/ShareVisualHead.vue
@@ -16,7 +16,7 @@
         v-click-outside="clickOutPopover"
       >
         <template #icon>
-          <icon name="icon_share-label_outlined"></icon>
+          <icon name="icon_share-label_outlined"><icon_shareLabel_outlined /></icon>
         </template>
         {{ t('visualization.share') }}
       </el-button>
@@ -43,7 +43,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>
+            <icon name="icon_admin_outlined"><icon_admin_outlined /></icon>
           </template>
         </el-button>
       </div>
@@ -134,6 +134,8 @@
 </template>
 
 <script lang="ts" setup>
+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'
 import { ref, reactive, computed, nextTick, watch } from 'vue'
 import request from '@/config/axios'
diff --git a/core/core-frontend/src/views/system/common/InfoTemplate.vue b/core/core-frontend/src/views/system/common/InfoTemplate.vue
index fad23caa08..4410e15f70 100644
--- a/core/core-frontend/src/views/system/common/InfoTemplate.vue
+++ b/core/core-frontend/src/views/system/common/InfoTemplate.vue
@@ -22,7 +22,9 @@
             :content="tooltipItem[item.pkey]"
             placement="top"
           >
-            <el-icon class="info-tips"><Icon name="dv-info"></Icon></el-icon>
+            <el-icon class="info-tips"
+              ><Icon name="dv-info"><dvInfo /></Icon
+            ></el-icon>
           </el-tooltip>
         </div>
         <div class="info-item-content">
@@ -39,7 +41,7 @@
             >
               <el-button text @click="copyVal(item.pval)" class="setting-tip-btn">
                 <template #icon>
-                  <Icon name="de-copy"></Icon>
+                  <Icon name="de-copy"><deCopy /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -51,7 +53,9 @@
             >
               <el-button text @click="switchPwd(item.pkey)" class="setting-tip-btn">
                 <template #icon>
-                  <Icon :name="pwdItem[item.pkey]['hidden'] ? 'eye' : 'eye-open'"></Icon>
+                  <Icon
+                    ><component :is="pwdItem[item.pkey]['hidden'] ? eye : eyeOpen"></component
+                  ></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -69,7 +73,7 @@
             >
               <el-button text @click="copyVal(item.pval)" class="setting-tip-btn">
                 <template #icon>
-                  <Icon name="de-copy"></Icon>
+                  <Icon name="de-copy"><deCopy /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -80,6 +84,10 @@
   </div>
 </template>
 <script lang="ts" setup>
+import eye from '@/assets/svg/eye.svg'
+import eyeOpen from '@/assets/svg/eye-open.svg'
+import dvInfo from '@/assets/svg/dv-info.svg'
+import deCopy from '@/assets/svg/de-copy.svg'
 import { ref, defineProps, PropType, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { SettingRecord, ToolTipRecord } from './SettingTemplate'
diff --git a/core/core-frontend/src/views/system/font/FontInfo.vue b/core/core-frontend/src/views/system/font/FontInfo.vue
index 09ec2d8391..a2bbdcb0ae 100644
--- a/core/core-frontend/src/views/system/font/FontInfo.vue
+++ b/core/core-frontend/src/views/system/font/FontInfo.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 withDefaults(
   defineProps<{
     name?: string
@@ -19,14 +21,14 @@ const del = () => {
 <template>
   <div class="font-info">
     <el-icon class="font">
-      <Icon name="icon_file_font_colorful"></Icon>
+      <Icon><icon_file_font_colorful /></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>
+      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 a3dbece1ee..8d0772af4f 100644
--- a/core/core-frontend/src/views/system/font/UploadDetail.vue
+++ b/core/core-frontend/src/views/system/font/UploadDetail.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
 import { ref, reactive } from 'vue'
 import { uploadFontFile } from '@/api/font'
 import FontInfo from './FontInfo.vue'
@@ -155,7 +156,7 @@ const confirm = () => {
           <template #trigger>
             <el-button secondary>
               <template #icon>
-                <Icon name="icon_upload_outlined"></Icon>
+                <Icon name="icon_upload_outlined"><icon_upload_outlined /></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 9a10cc5513..eeca912eeb 100644
--- a/core/core-frontend/src/views/system/font/index.vue
+++ b/core/core-frontend/src/views/system/font/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { onMounted, ref, computed } from 'vue'
 import UploadDetail from './UploadDetail.vue'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
@@ -118,14 +120,14 @@ onMounted(() => {
         <el-input v-model="fontKeyword" clearable style="width: 240px" placeholder="搜索字体名称">
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
 
         <el-button type="primary" @click="uploadFont('新建字体', 'create', {})">
           <template #icon>
-            <Icon name="icon_add_outlined"></Icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </template>
           添加字体
         </el-button>
diff --git a/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue b/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
index 3268914669..ccbc4d0391 100644
--- a/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
 import { ref, reactive } from 'vue'
 import { ElMessage, ElLoading } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -328,7 +330,9 @@ defineExpose({
       <span class="de-expand" @click="showPriority = !showPriority"
         >{{ t('datasource.priority') }}
         <el-icon>
-          <Icon :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+          <Icon
+            ><component :is="showPriority ? icon_down_outlined : icon_down_outlined1"></component
+          ></Icon>
         </el-icon>
       </span>
       <template v-if="showPriority">
diff --git a/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue b/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
index cb837b1064..d9a28f6e01 100644
--- a/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
@@ -13,7 +13,9 @@
     <span class="de-expand-engine" @click="showPriority = !showPriority">
       {{ t('datasource.priority') }}
       <el-icon>
-        <Icon :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+        <Icon
+          ><component :is="showPriority ? icon_down_outlined : icon_down_outlined1"></component
+        ></Icon>
       </el-icon>
     </span>
   </div>
@@ -27,6 +29,8 @@
 </template>
 
 <script lang="ts" setup>
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
 import { ref, nextTick } from 'vue'
 import { SettingRecord } from '@/views/system/common/SettingTemplate'
 import { ElMessage } from 'element-plus-secondary'
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 e725d951f1..9b1b41d43c 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>
+            <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
           </el-icon>
         </span>
       </div>
@@ -19,7 +19,7 @@
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -53,7 +53,7 @@
                     placement="top"
                   >
                     <el-icon @click.stop="delHandler(data)" class="hover-icon">
-                      <Icon name="icon_delete-trash_outlined"></Icon>
+                      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </span>
@@ -101,6 +101,9 @@
 </template>
 
 <script lang="ts" setup>
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getWorldTree } from '@/api/map'
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 ddcec49b15..516a196b0f 100644
--- a/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import dvInfo from '@/assets/svg/dv-info.svg'
+import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
+import deJson from '@/assets/svg/de-json.svg'
 import { ref, reactive, computed } from 'vue'
 import { ElMessage, ElLoading } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -221,7 +224,7 @@ 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"></Icon></el-icon>
+              <el-icon class="info-tips"><Icon name="dv-info"><dvInfo /></Icon></el-icon>
             </el-tooltip>
           </span>
         </template>
@@ -265,12 +268,12 @@ defineExpose({
           >
             <template #suffix>
               <el-icon>
-                <Icon name="icon_upload_outlined" />
+                <Icon name="icon_upload_outlined" ><icon_upload_outlined /></Icon>
               </el-icon>
             </template>
             <template #prefix>
               <el-icon v-if="!!state.form.fileName">
-                <Icon name="de-json" />
+                <Icon name="de-json" ><deJson /></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 09a50c4cda..f190c0c1af 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,7 @@
           />
           <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"></Icon>
+              <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
               <br />
               <span>{{ t('commons.no_result') }}</span>
             </div>
@@ -89,6 +89,7 @@
 </template>
 
 <script setup lang="ts">
+import no_result from '@/assets/svg/no_result.svg'
 import { searchMarket, getCategories } from '@/api/templateMarket'
 import { onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
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 316f03cd30..d1e50dc4df 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"></Icon>
+            <Icon name="market-expand"><marketExpand /></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 name="icon_left_outlined" ><icon_left_outlined /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -89,7 +89,7 @@
           </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"></Icon>
+              <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
               <br />
               <span>没有找到相关模板</span>
             </div>
@@ -122,6 +122,9 @@
 </template>
 
 <script setup lang="ts">
+import marketExpand from '@/assets/svg/market-expand.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import no_result from '@/assets/svg/no_result.svg'
 import { searchMarketPreview } from '@/api/templateMarket'
 import { onMounted, reactive, watch, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index a3ec1a6d1f..d1d841834b 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -154,7 +154,7 @@
         </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"></Icon>
+            <Icon name="no_result" style="margin-bottom: 16px; font-size: 75px"><no_result /></Icon>
             <br />
             <span>没有找到相关模板</span>
           </div>
@@ -169,6 +169,7 @@
 </template>
 
 <script setup lang="ts">
+import no_result from '@/assets/svg/no_result.svg'
 import { searchMarket } from '@/api/templateMarket'
 import { useEmbedded } from '@/store/modules/embedded'
 import { useAppStoreWithOut } from '@/store/modules/app'
diff --git a/core/core-frontend/src/views/template/index.vue b/core/core-frontend/src/views/template/index.vue
index 550bf439a1..0e79eefacf 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" />
+          <Icon name="de-search" ><deSearch /></Icon>
         </el-icon>
       </template>
     </el-input>
@@ -56,7 +56,7 @@
                 v-if="!state.currentTemplateShowList.length && !state.templateFilterText"
                 class="custom-position"
               >
-                <Icon style="width: 125px; height: 125px" name="dv-empty" />
+                <Icon style="width: 125px; height: 125px" name="dv-empty" ><dvEmpty /></Icon>
                 <span style="margin-top: 8px; font-size: 14px"> 暂无模板 </span>
               </el-row>
 
@@ -65,7 +65,7 @@
                 v-if="!currentTemplateShowListComputed.length && state.templateFilterText"
                 class="custom-position"
               >
-                <Icon style="width: 125px; height: 125px" name="dv-nothing" />
+                <Icon style="width: 125px; height: 125px" name="dv-nothing" ><dvNothing /></Icon>
                 <span style="margin-top: 8px; font-size: 14px"> 没有找到相关模板 </span>
               </el-row>
 
@@ -97,7 +97,7 @@
     </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" />
+        <Icon style="width: 125px; height: 125px" name="dv-empty" ><dvEmpty /></Icon>
         <span style="margin-top: 8px; font-size: 14px">
           <el-button
             style="float: right"
@@ -183,6 +183,9 @@
 </template>
 
 <script lang="ts" setup>
+import deSearch from '@/assets/svg/de-search.svg'
+import dvEmpty from '@/assets/svg/dv-empty.svg'
+import dvNothing from '@/assets/svg/dv-nothing.svg'
 import {
   save,
   templateDelete,
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 6395deeba9..e809792579 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import dvPreviewDownload from '@/assets/svg/dv-preview-download.svg'
+import deDelete from '@/assets/svg/de-delete.svg'
+import icon_fileExcel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'
+import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
 import { ref, h, onUnmounted, computed } from 'vue'
 import { EmptyBackground } from '@/components/empty-background'
 import { ElButton, ElMessage, ElMessageBox, ElTabPane, ElTabs } from 'element-plus-secondary'
@@ -395,7 +399,7 @@ defineExpose({
       @click="downLoadAll"
     >
       <template #icon>
-        <Icon name="dv-preview-download"></Icon>
+        <Icon name="dv-preview-download"><dvPreviewDownload /></Icon>
       </template>
       {{ $t('data_export.download_all') }}
     </el-button>
@@ -405,15 +409,15 @@ defineExpose({
       @click="downLoadAll"
     >
       <template #icon>
-        <Icon name="dv-preview-download" />
+        <Icon name="dv-preview-download" ><dvPreviewDownload /></Icon>
       </template>
       {{ $t('data_export.download') }}
     </el-button>
     <el-button v-if="multipleSelection.length === 0" secondary @click="delAll"
-      ><template #icon> <Icon name="de-delete"></Icon> </template>{{ $t('data_export.del_all') }}
+      ><template #icon> <Icon name="de-delete"><deDelete /></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"></Icon> </template>{{ $t('commons.delete') }}
+      ><template #icon> <Icon name="de-delete"><deDelete /></Icon> </template>{{ $t('commons.delete') }}
     </el-button>
     <div class="table-container" :class="!tableData.length && 'hidden-bottom'">
       <el-table
@@ -428,7 +432,7 @@ defineExpose({
           <template #default="scope">
             <div class="name-excel">
               <el-icon style="font-size: 24px">
-                <Icon name="icon_file-excel_colorful"></Icon>
+                <Icon name="icon_file-excel_colorful"><icon_fileExcel_colorful /></Icon>
               </el-icon>
               <div class="name-content">
                 <div class="fileName">{{ scope.row.fileName }}</div>
@@ -479,7 +483,7 @@ defineExpose({
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="dv-preview-download"></Icon>
+                    <Icon name="dv-preview-download"><dvPreviewDownload /></Icon>
                   </el-icon>
                 </template>
               </el-button>
@@ -488,7 +492,7 @@ 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>
+                  <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -496,7 +500,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"></Icon>
+                  <Icon name="de-delete"><deDelete /></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 5d092788e4..02f42fcc1b 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
@@ -1,4 +1,6 @@
 <script lang="ts">
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 export default {
   name: 'logic-relation'
 }
@@ -89,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>
+              <Icon name="icon_down_outlined"><icon_down_outlined /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -102,7 +104,7 @@ const del = (index, child) => {
       </div>
       <span class="operate-icon" v-if="x">
         <el-icon @click="emits('removeRelationList')">
-          <Icon name="icon_delete-trash_outlined"></Icon>
+          <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 0408980f40..b7b753f4c8 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, inject, computed, watch, onBeforeMount, toRefs } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { multFieldValuesForPermissions } from '@/api/dataset'
@@ -10,6 +12,7 @@ import {
   sysParamsIlns,
   fieldEnums
 } from '../options.js'
+import { iconFieldMap } from '@/components/icon-group/field-list.js'
 export interface Item {
   term: string
   fieldId: string
@@ -271,7 +274,7 @@ const emits = defineEmits(['update:item', 'del'])
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"></Icon>
+                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -285,9 +288,8 @@ const emits = defineEmits(['update:item', 'del'])
                 v-for="ele in dimensions"
               >
                 <el-icon>
-                  <Icon
-                    :name="`field_${fieldEnums[ele.deType]}`"
-                    :className="`field-icon-${fieldEnums[ele.deType]}`"
+                  <Icon :className="`field-icon-${fieldEnums[ele.deType]}`"
+                    ><component :is="iconFieldMap[fieldEnums[ele.deType]]"></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -440,7 +442,7 @@ 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>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -451,7 +453,7 @@ const emits = defineEmits(['update:item', 'del'])
                 </div>
                 <div class="footer-right">
                   <el-icon @click="clearAll">
-                    <Icon name="icon_delete-trash_outlined"></Icon>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -460,7 +462,7 @@ 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>
+        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 f05c4cb924..4fc3674420 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,4 +1,17 @@
 <script lang="tsx" setup>
+import referencePlay from '@/assets/svg/reference-play.svg'
+import referenceSetting 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'
+import referenceTable from '@/assets/svg/reference-table.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'
+import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
+import icon_playRound_outlined from '@/assets/svg/icon_play-round_outlined.svg'
 import { ref, reactive, onMounted, PropType, toRefs, watch, onBeforeUnmount, shallowRef } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Base64 } from 'js-base64'
@@ -15,6 +28,7 @@ import GridTable from '@/components/grid-table/src/GridTable.vue'
 import { EmptyBackground } from '@/components/empty-background'
 import { timestampFormatDate, defaultValueScopeList, fieldOptions } from './util'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 export interface SqlNode {
   sql: string
   tableName: string
@@ -91,10 +105,9 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon
-            name={`field_${fieldType[column.deType]}`}
-            className={`field-icon-${fieldType[column.deType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[column.deType]}`}>
+            {iconFieldMap[fieldType[column.deType]]}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -411,7 +424,7 @@ const mousedownDrag = () => {
       <el-button @click="getSQLPreview" text style="color: #1f2329">
         <template #icon>
           <el-icon>
-            <Icon name="reference-play"></Icon>
+            <Icon name="reference-play"><referencePlay /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.run') }}
@@ -419,7 +432,7 @@ const mousedownDrag = () => {
       <el-button @click="referenceSetting()" style="color: #1f2329" text>
         <template #icon>
           <el-icon>
-            <Icon name="reference-setting"></Icon>
+            <Icon name="reference-setting"><referenceSetting /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.parameter_settings') }}
@@ -429,7 +442,7 @@ const mousedownDrag = () => {
       >
       <el-divider direction="vertical" />
       <el-icon class="hover-icon" @click="handleClose">
-        <Icon name="icon_close_outlined"></Icon>
+        <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
       </el-icon>
     </div>
   </div>
@@ -437,7 +450,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>
+        <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
       </el-icon>
     </p>
     <div
@@ -457,7 +470,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 name="icon_left_outlined"><icon_left_outlined /></Icon>
             </el-icon>
           </span>
         </p>
@@ -477,7 +490,7 @@ const mousedownDrag = () => {
           {{ t('datasource.data_table')
           }}<span class="num">
             <el-icon class="icon-color">
-              <Icon name="reference-table"></Icon>
+              <Icon name="reference-table"><referenceTable /></Icon>
             </el-icon>
             {{ datasourceTableData.length }}
           </span>
@@ -490,7 +503,7 @@ const mousedownDrag = () => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -523,7 +536,7 @@ const mousedownDrag = () => {
               @click="setActiveName(datasourceTableData[index])"
             >
               <el-icon class="icon-color">
-                <Icon name="icon_form_outlined"></Icon>
+                <Icon name="icon_form_outlined"><icon_form_outlined /></Icon>
               </el-icon>
               <span class="label">{{ datasourceTableData[index].tableName }}</span>
               <span class="name-copy">
@@ -532,7 +545,7 @@ const mousedownDrag = () => {
                     class="hover-icon"
                     @click="copyInfo(datasourceTableData[index].tableName)"
                   >
-                    <Icon name="icon_copy_outlined"></Icon>
+                    <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
                   </el-icon>
                 </el-tooltip>
 
@@ -546,7 +559,7 @@ const mousedownDrag = () => {
                 >
                   <template #reference>
                     <el-icon class="hover-icon">
-                      <Icon name="icon_info_outlined"></Icon>
+                      <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
                     </el-icon>
                   </template>
                   <div class="table-filed" v-loading="gridDataLoading">
@@ -564,11 +577,11 @@ const mousedownDrag = () => {
                           )
                         "
                       >
-                        <Icon name="icon_copy_outlined"></Icon>
+                        <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
                       </el-icon>
                       <div class="num flex-align-center">
                         <el-icon>
-                          <Icon name="icon_text-box_outlined"></Icon>
+                          <Icon name="icon_text-box_outlined"><icon_textBox_outlined /></Icon>
                         </el-icon>
                         {{ gridData.length }}
                       </div>
@@ -584,9 +597,10 @@ const mousedownDrag = () => {
                           <template #default="scope">
                             <div class="flex-align-center icon">
                               <el-icon>
-                                <Icon
-                                  :className="`field-icon-${fieldType[scope.row.deType]}`"
-                                  :name="`field_${fieldType[scope.row.deType]}`"
+                                <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
+                                  ><component
+                                    :is="iconFieldMap[fieldType[scope.row.deType]]"
+                                  ></component
                                 ></Icon>
                               </el-icon>
                               {{ scope.row.originName }}
@@ -604,7 +618,7 @@ const mousedownDrag = () => {
                               class="hover-icon de-hover-icon-primary"
                               @click.stop="copyInfo(scope.row.originName)"
                             >
-                              <Icon name="icon_copy_outlined"></Icon>
+                              <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
                             </el-icon>
                           </template>
                         </el-table-column>
@@ -660,7 +674,7 @@ const mousedownDrag = () => {
               <div class="sql-tips flex-align-center">
                 {{ t('data_set.click_above') }}
                 <el-icon>
-                  <icon name="icon_play-round_outlined"></icon>
+                  <icon name="icon_play-round_outlined"><icon_playRound_outlined /></icon>
                 </el-icon>
                 {{ t('data_set.see_the_results') }}
               </div>
@@ -727,7 +741,7 @@ const mousedownDrag = () => {
   >
     <div class="content">
       <el-icon style="font-size: 16px">
-        <Icon name="icon_info_colorful"></Icon>
+        <Icon name="icon_info_colorful"><icon_info_colorful /></Icon>
       </el-icon>
       {{ t('dataset.sql_variable_limit_1') }}<br />
       {{ t('dataset.sql_variable_limit_2') }}<br />
@@ -745,9 +759,8 @@ const mousedownDrag = () => {
           >
             <template v-slot="{ data }">
               <el-icon>
-                <Icon
-                  :className="`field-icon-${getIconName(data.value)}`"
-                  :name="`field_${getIconName(data.value)}`"
+                <Icon :className="`field-icon-${getIconName(data.value)}`"
+                  ><component :is="iconFieldMap[getIconName(data.value)]"></component
                 ></Icon>
               </el-icon>
               <span>{{ data.label }}</span>
@@ -755,9 +768,8 @@ const mousedownDrag = () => {
           </el-cascader>
           <span class="select-svg-icon">
             <el-icon>
-              <Icon
-                :className="`field-icon-${getIconName(scope.row.type[0])}`"
-                :name="`field_${getIconName(scope.row.type[0])}`"
+              <Icon :className="`field-icon-${getIconName(scope.row.type[0])}`"
+                ><component :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 0669ea24d7..bc5cd59d59 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
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_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 { ref, reactive, onMounted, onBeforeUnmount, watch, unref, computed, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import CodeMirror from './CodeMirror.vue'
@@ -6,6 +11,7 @@ import { getFunction } from '@/api/dataset'
 import { fieldType } from '@/utils/attr'
 import { cloneDeep } from 'lodash-es'
 import { guid } from './util'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 export interface CalcFieldType {
   id?: string
   datasourceId?: string // 数据源id
@@ -354,9 +360,8 @@ initFunction()
                 <el-select v-model="fieldForm.deType" style="width: 376px">
                   <template #prefix>
                     <el-icon>
-                      <Icon
-                        :name="`field_${fieldType[fieldForm.deType]}`"
-                        :className="`field-icon-${fieldType[fieldForm.deType]}`"
+                      <Icon :className="`field-icon-${fieldType[fieldForm.deType]}`"
+                        ><component :is="iconFieldMap[fieldType[fieldForm.deType]]"></component
                       ></Icon>
                     </el-icon>
                   </template>
@@ -368,9 +373,8 @@ initFunction()
                   >
                     <span style="display: flex; align-items: center">
                       <el-icon>
-                        <Icon
-                          :name="`field_${fieldType[item.value]}`"
-                          :className="`field-icon-${fieldType[item.value]}`"
+                        <Icon :className="`field-icon-${fieldType[item.value]}`"
+                          ><component :is="iconFieldMap[fieldType[item.value]]"></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -392,7 +396,7 @@ initFunction()
                 <div>{{ t('dataset.calc_tips.tip2') }}</div>
               </template>
               <el-icon size="16px">
-                <Icon name="icon_info_outlined"></Icon>
+                <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -417,7 +421,7 @@ initFunction()
               {{ t('dataset.calc_tips.tip5') }}
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -425,7 +429,7 @@ initFunction()
           <el-input v-model="searchField" :placeholder="t('dataset.edit_search')" clearable>
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -440,9 +444,8 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon>
-                  <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
                   ></Icon>
                 </el-icon>
                 <span class="ellipsis" :title="item.name">{{ item.name }}</span>
@@ -462,7 +465,8 @@ initFunction()
                   :class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
                   style="color: #646a73"
                   name="icon_adjustment_outlined"
-                ></Icon>
+                  ><icon_adjustment_outlined
+                /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -475,21 +479,20 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon v-if="!item.groupType">
-                  <Icon name="icon_adjustment_outlined"></Icon>
+                  <Icon name="icon_adjustment_outlined"><icon_adjustment_outlined /></Icon>
                 </el-icon>
                 <el-icon v-else>
-                  <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :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>
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                   </el-icon>
                   <el-icon @click.stop="delParmasToQuota" class="hover-icon">
-                    <Icon name="icon_delete-trash_outlined"></Icon>
+                    <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -513,7 +516,7 @@ initFunction()
               <div v-else>{{ t('dataset.calc_tips.tip7') }}</div>
             </template>
             <el-icon size="16px">
-              <Icon name="icon_info_outlined"></Icon>
+              <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -526,7 +529,7 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></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 982b6813b0..af63ca4d85 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { ref, reactive, computed, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -326,7 +328,7 @@ const emits = defineEmits(['finish'])
         >
           <template #default="{ data: { name } }">
             <el-icon>
-              <Icon name="dv-folder"></Icon>
+              <Icon name="dv-folder"><dvFolder /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -336,7 +338,7 @@ 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>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -355,7 +357,7 @@ const emits = defineEmits(['finish'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></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 ae0caeb65f..df9c3cd753 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,11 @@
 <script lang="ts" setup>
+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'
+import icon_rightAssociation from '@/assets/svg/icon_right-association.svg'
+import icon_sql_outlined from '@/assets/svg/icon_sql_outlined.svg'
+import referenceTable from '@/assets/svg/reference-table.svg'
+import icon_moreVertical_outlined from '@/assets/svg/icon_more-vertical_outlined.svg'
 import { reactive, computed, ref, nextTick, inject, type Ref, watch, unref } from 'vue'
 import AddSql from './AddSql.vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -34,10 +41,10 @@ const primaryColor = computed(() => {
 })
 
 const iconName = {
-  left: 'icon_left-association',
-  right: 'icon_right-association',
-  inner: 'icon_intersect',
-  full: 'icon_full-association'
+  left: icon_leftAssociation,
+  right: icon_rightAssociation,
+  inner: icon_intersect,
+  full: icon_fullAssociation
 }
 const { t } = useI18n()
 const editSqlField = ref(false)
@@ -1078,13 +1085,15 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
           ]"
         >
           <el-icon>
-            <Icon :name="ele.type !== 'sql' ? 'reference-table' : 'icon_sql_outlined'"></Icon>
+            <Icon
+              ><component :is="ele.type !== 'sql' ? referenceTable : icon_sql_outlined"></component
+            ></Icon>
           </el-icon>
           <span class="tableName">{{ ele.tableName }}</span>
           <span class="placeholder">拖拽表或自定义SQL至此处</span>
           <handle-more
             style="margin-left: auto"
-            iconName="icon_more-vertical_outlined"
+            :iconName="icon_moreVertical_outlined"
             :menuList="ele.type === 'sql' ? [...sqlMenu, ...menuList] : menuList"
             @handle-command="command => handleCommand(ele, command)"
           ></handle-more>
@@ -1106,7 +1115,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
           :style="{ borderColor: ele.sqlChangeFlag ? '#F54A45' : '' }"
         >
           <el-icon>
-            <Icon :name="iconName[ele.to.unionType]"></Icon>
+            <Icon><component :is="iconName[ele.to.unionType]"></component></Icon>
           </el-icon>
         </div>
       </foreignObject>
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 53f399ac3e..e546501ef4 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
@@ -1,4 +1,16 @@
 <script lang="ts" setup>
+import custom_sort from '@/assets/svg/custom_sort.svg'
+import dvRename from '@/assets/svg/dv-rename.svg'
+import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_local_outlined from '@/assets/svg/icon_local_outlined.svg'
+import icon_number_outlined from '@/assets/svg/icon_number_outlined.svg'
+import icon_url_outlined from '@/assets/svg/icon_url_outlined.svg'
+import icon_switch_outlined from '@/assets/svg/icon_switch_outlined.svg'
+import icon_text_outlined from '@/assets/svg/icon_text_outlined.svg'
+import more_v from '@/assets/svg/more_v.svg'
 import { ref, computed, nextTick } from 'vue'
 import { ElCascaderPanel } from 'element-plus-secondary'
 import { timeTypes } from './util'
@@ -33,47 +45,48 @@ const timeTypesChildren = timeTypes.map(ele => {
     value: ele
   }
 })
+
 const options = computed(() => {
   const optionArr = [
     {
       label: props.transType,
       value: 'translate',
-      icon: 'icon_switch_outlined'
+      icon: icon_switch_outlined
     },
     {
       label: t('data_set.change_field_type'),
       value: 'translateType',
-      icon: 'custom_sort',
+      icon: custom_sort,
       children: [
         {
           label: t('data_set.text'),
-          icon: 'icon_text_outlined',
+          icon: icon_text_outlined,
           value: 'text'
         },
         {
           label: t('data_set.time'),
-          icon: 'icon_calendar_outlined',
+          icon: icon_calendar_outlined,
           value: 'time',
           children: props.showTime ? timeTypesChildren : []
         },
         {
           label: t('data_set.geographical_location'),
-          icon: 'icon_local_outlined',
+          icon: icon_local_outlined,
           value: 'location'
         },
         {
           label: t('data_set.numerical_value'),
-          icon: 'icon_number_outlined',
+          icon: icon_number_outlined,
           value: 'value'
         },
         {
           label: t('data_set.numeric_value_decimal'),
-          icon: 'icon_number_outlined',
+          icon: icon_number_outlined,
           value: 'float'
         },
         {
           label: 'URL',
-          icon: 'icon_url_outlined',
+          icon: icon_url_outlined,
           value: 'url'
         }
       ]
@@ -81,22 +94,22 @@ const options = computed(() => {
     {
       label: t('data_set.edit'),
       value: 'editor',
-      icon: 'icon_edit_outlined'
+      icon: icon_edit_outlined
     },
     {
       label: t('data_set.rename'),
       value: 'rename',
-      icon: 'dv-rename'
+      icon: dvRename
     },
     {
       label: t('data_set.copy'),
       value: 'copy',
-      icon: 'icon_copy_outlined'
+      icon: icon_copy_outlined
     },
     {
       label: t('data_set.delete'),
       value: 'delete',
-      icon: 'icon_delete-trash_outlined'
+      icon: icon_deleteTrash_outlined
     }
   ]
   if (props.extField !== 2) {
@@ -138,7 +151,7 @@ const handleChange = () => {
   >
     <template #reference>
       <el-icon class="menu-more">
-        <Icon name="more_v"></Icon>
+        <Icon name="more_v"><more_v /></Icon>
       </el-icon>
     </template>
     <ElCascaderPanel
@@ -157,7 +170,7 @@ const handleChange = () => {
                 ['text', 'location', 'value', 'float', 'time', 'url'].includes(data.value) &&
                 `field-icon-${fieldType[['float', 'value'].includes(data.value) ? 2 : 0]}`
               "
-              :name="data.icon"
+              ><component :is="data.icon"></component
             ></Icon>
           </el-icon>
           <span>
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 f105468e05..5e4ecd5ff7 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
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { ref, PropType, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 import { ElTable } from 'element-plus-secondary'
 import { fieldType } from '@/utils/attr'
 import { type Field } from './util'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 const { t } = useI18n()
 const props = defineProps({
@@ -91,7 +93,7 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"></Icon>
+            <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -119,9 +121,8 @@ watch(
         <el-table-column :label="t('dataset.origin_name')">
           <template #default="scope">
             <el-icon>
-              <Icon
-                :className="`field-icon-${fieldType[scope.row.deType]}`"
-                :name="`field_${fieldType[scope.row.deType]}`"
+              <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
+                ><component :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 7088a737a7..8fe1bc37d1 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
@@ -1,8 +1,17 @@
 <script lang="ts" setup>
+import noJoin from '@/assets/svg/no-join.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'
+import icon_rightAssociation from '@/assets/svg/icon_right-association.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import joinJoin from '@/assets/svg/join-join.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { PropType, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { Field } from '@/api/chart'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 const unionTypeFromParent = ref('left')
 const { t } = useI18n()
 const iconName = {
@@ -66,7 +75,7 @@ init()
         >
           <template #prefix>
             <el-icon>
-              <Icon :name="`${iconName[unionTypeFromParent] || 'no-join'}`"></Icon>
+              <Icon><component :is="iconName[unionTypeFromParent] || noJoin"></component></Icon>
             </el-icon>
           </template>
           <el-option
@@ -79,7 +88,7 @@ init()
         <el-button type="primary" class="union-add" @click="addUnion">
           <template #icon>
             <el-icon>
-              <Icon name="icon_add_outlined"></Icon>
+              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
             </el-icon>
           </template>
           {{ t('dataset.add_union_field') }}
@@ -110,9 +119,8 @@ init()
                 :value="item"
               >
                 <el-icon>
-                  <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -122,7 +130,7 @@ init()
             </el-select>
           </span>
           <el-icon>
-            <Icon name="join-join"></Icon>
+            <Icon name="join-join"><joinJoin /></Icon>
           </el-icon>
           <!--右侧孩子field-->
           <span class="column">
@@ -141,9 +149,8 @@ init()
                 :value="item"
               >
                 <el-icon>
-                  <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[item.deType]]"></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -160,7 +167,7 @@ init()
               @click="removeUnionItem(index)"
             >
               <template #icon>
-                <Icon name="icon_delete-trash_outlined"></Icon>
+                <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 d006443b0f..cdded9692e 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
@@ -1,4 +1,18 @@
 <script lang="tsx" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
+import referenceTable from '@/assets/svg/reference-table.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_sql_outlined_1 from '@/assets/svg/icon_sql_outlined_1.svg'
+import icon_warning_colorful from '@/assets/svg/icon_warning_colorful.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
+import icon_switch_outlined from '@/assets/svg/icon_switch_outlined.svg'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import {
   ref,
   toRaw,
@@ -44,6 +58,8 @@ import type { Table } from '@/api/dataset'
 import DatasetUnion from './DatasetUnion.vue'
 import { cloneDeep, debounce } from 'lodash-es'
 import { XpackComponent } from '@/components/plugin'
+import { iconFieldMap } from '@/components/icon-group/field-list'
+import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
 interface DragEvent extends MouseEvent {
   dataTransfer: DataTransfer
 }
@@ -605,10 +621,9 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon>
-          <Icon
-            name={`field_${fieldType[column.deType]}`}
-            className={`field-icon-${fieldType[column.deType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[column.deType]}`}>
+            {iconFieldMap[fieldType[column.deType]]}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px', marginLeft: '4px' }}>
           {column.title}
@@ -1332,8 +1347,8 @@ const getDsIcon = data => {
 }
 
 const getDsIconName = data => {
-  if (!data.leaf) return 'dv-folder'
-  return `${data.type}-ds`
+  if (!data.leaf) return dvFolder
+  return iconDatasourceMap[data.type]
 }
 </script>
 
@@ -1342,7 +1357,7 @@ const getDsIconName = data => {
     <div class="top">
       <span class="name">
         <el-icon @click="backToMain">
-          <Icon name="icon_left_outlined"></Icon>
+          <Icon name="icon_left_outlined"><icon_left_outlined /></Icon>
         </el-icon>
         <template v-if="showInput">
           <el-input
@@ -1371,7 +1386,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>
+          <Icon name="icon_right_outlined"><icon_right_outlined /></Icon>
         </el-icon>
       </p>
       <div
@@ -1392,7 +1407,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 name="icon_left_outlined"><icon_left_outlined /></Icon>
               </el-icon>
             </span>
           </p>
@@ -1413,9 +1428,8 @@ const getDsIconName = data => {
             <template #default="{ data: { name, leaf, type, extraFlag } }">
               <div class="flex-align-center icon">
                 <el-icon>
-                  <icon
-                    :static-content="getDsIcon({ leaf, type })"
-                    :name="getDsIconName({ leaf, type })"
+                  <icon :static-content="getDsIcon({ leaf, type })"
+                    ><component :is="getDsIconName({ leaf, type })"></component
                   ></icon>
                 </el-icon>
                 <span v-if="!leaf || extraFlag > -1">{{ name }}</span>
@@ -1434,7 +1448,7 @@ const getDsIconName = data => {
             {{ t('datasource.data_table') }}
             <span class="num">
               <el-icon class="icon-color">
-                <Icon name="reference-table"></Icon>
+                <Icon name="reference-table"><referenceTable /></Icon>
               </el-icon>
               {{ datasourceTableData.length }}
             </span>
@@ -1447,7 +1461,7 @@ const getDsIconName = data => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -1470,7 +1484,7 @@ const getDsIconName = data => {
             @click="setActiveName(sqlNode)"
           >
             <el-icon class="icon-color">
-              <Icon name="icon_sql_outlined_1"></Icon>
+              <Icon name="icon_sql_outlined_1"><icon_sql_outlined_1 /></Icon>
             </el-icon>
             <span class="label">{{ t('data_set.custom_sql') }}</span>
           </div>
@@ -1495,7 +1509,7 @@ const getDsIconName = data => {
                 @click="setActiveName(datasourceTableData[index])"
               >
                 <el-icon class="icon-color">
-                  <Icon name="reference-table"></Icon>
+                  <Icon name="reference-table"><referenceTable /></Icon>
                 </el-icon>
                 <span class="label">{{ datasourceTableData[index].tableName }}</span>
               </div>
@@ -1506,7 +1520,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>
+            <Icon name="icon_warning_colorful"><icon_warning_colorful /></Icon>
           </el-icon>
           {{ t('data_set.be_reported_incorrectly') }}
         </div>
@@ -1536,7 +1550,7 @@ const getDsIconName = data => {
               <el-button :disabled="!allfields.length" @click="addCalcField('q')" secondary>
                 <template #icon>
                   <el-icon>
-                    <Icon name="icon_add_outlined"></Icon>
+                    <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
                   </el-icon>
                 </template>
                 {{ t('dataset.add_calc_field') }}
@@ -1550,7 +1564,7 @@ const getDsIconName = data => {
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="icon_refresh_outlined"></Icon>
+                    <Icon name="icon_refresh_outlined"><icon_refresh_outlined /></Icon>
                   </el-icon>
                 </template>
                 {{ t('data_set.refresh_data') }}
@@ -1566,7 +1580,7 @@ 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>
+                    <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.dimension') }}
                 </div>
@@ -1575,10 +1589,10 @@ const getDsIconName = data => {
                     <span class="custom-tree-node father">
                       <el-icon>
                         <Icon
-                          :name="`field_${fieldType[data.deType]}`"
                           :className="`field-icon-${
                             fieldType[[2, 3].includes(data.deType) ? 2 : 0]
                           }`"
+                          ><component :is="iconFieldMap[fieldType[data.deType]]"></component
                         ></Icon>
                       </el-icon>
                       <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -1597,7 +1611,7 @@ 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>
+                    <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.quota') }}
                 </div>
@@ -1606,10 +1620,10 @@ const getDsIconName = data => {
                     <span class="custom-tree-node father">
                       <el-icon>
                         <Icon
-                          :name="`field_${fieldType[data.deType]}`"
                           :className="`field-icon-${
                             fieldType[[2, 3].includes(data.deType) ? 2 : 0]
                           }`"
+                          ><component :is="iconFieldMap[fieldType[data.deType]]"></component
                         ></Icon>
                       </el-icon>
                       <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -1647,10 +1661,10 @@ const getDsIconName = data => {
                     <div class="flex-align-center">
                       <ElIcon style="margin-right: 6px">
                         <Icon
-                          :name="`field_${fieldType[column.deType]}`"
                           :className="`field-icon-${
                             fieldType[[2, 3].includes(column.deType) ? 2 : 0]
                           }`"
+                          ><component :is="iconFieldMap[fieldType[column.deType]]"></component
                         ></Icon>
                       </ElIcon>
                       <span class="ellipsis" :title="column.title" style="width: 120px">
@@ -1735,7 +1749,7 @@ const getDsIconName = data => {
                                 :className="`field-icon-${
                                   fieldType[[2, 3].includes(data.value) ? 2 : 0]
                                 }`"
-                                :name="`field_${getIconName(data.value)}`"
+                                ><component :is="iconFieldMap[getIconName(data.value)]"></component
                               ></Icon>
                             </el-icon>
                             <span>{{ data.label }}</span>
@@ -1747,7 +1761,9 @@ const getDsIconName = data => {
                               :className="`field-icon-${
                                 fieldType[[2, 3].includes(scope.row.deType) ? 2 : 0]
                               }`"
-                              :name="`field_${getIconName(scope.row.deType)}`"
+                              ><component
+                                :is="iconFieldMap[getIconName(scope.row.deType)]"
+                              ></component
                             ></Icon>
                           </el-icon>
                         </span>
@@ -1763,9 +1779,10 @@ const getDsIconName = data => {
                         <div class="column-style">
                           <span class="flex-align-center icon" v-if="scope.row.extField === 0">
                             <el-icon>
-                              <Icon
-                                className="primary-color"
-                                :name="`field_${getIconName(scope.row.deExtractType)}`"
+                              <Icon className="primary-color"
+                                ><component
+                                  :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
@@ -1785,7 +1802,7 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'translate')">
                               <template #icon>
-                                <Icon name="icon_switch_outlined"></Icon>
+                                <Icon name="icon_switch_outlined"><icon_switch_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1799,7 +1816,7 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'copy')">
                               <template #icon>
-                                <Icon name="icon_copy_outlined"></Icon>
+                                <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1809,7 +1826,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'delete')">
                               <template #icon>
-                                <Icon name="icon_delete-trash_outlined"></Icon>
+                                <Icon name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1823,7 +1842,7 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"></Icon>
+                                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1899,7 +1918,7 @@ const getDsIconName = data => {
                                 :className="`field-icon-${
                                   fieldType[[2, 3].includes(data.value) ? 2 : 0]
                                 }`"
-                                :name="`field_${getIconName(data.value)}`"
+                                ><component :is="iconFieldMap[getIconName(data.value)]"></component
                               ></Icon>
                             </el-icon>
                             <span>{{ data.label }}</span>
@@ -1911,7 +1930,9 @@ const getDsIconName = data => {
                               :className="`field-icon-${
                                 fieldType[[2, 3].includes(scope.row.deType) ? 2 : 0]
                               }`"
-                              :name="`field_${getIconName(scope.row.deType)}`"
+                              ><component
+                                :is="iconFieldMap[getIconName(scope.row.deType)]"
+                              ></component
                             ></Icon>
                           </el-icon>
                         </span>
@@ -1927,9 +1948,10 @@ const getDsIconName = data => {
                         <div class="column-style">
                           <span class="flex-align-center icon" v-if="scope.row.extField === 0">
                             <el-icon>
-                              <Icon
-                                className="green-color"
-                                :name="`field_${getIconName(scope.row.deExtractType)}`"
+                              <Icon className="green-color"
+                                ><component
+                                  :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
@@ -1949,7 +1971,7 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'translate')">
                               <template #icon>
-                                <Icon name="icon_switch_outlined"></Icon>
+                                <Icon name="icon_switch_outlined"><icon_switch_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1963,7 +1985,7 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'copy')">
                               <template #icon>
-                                <Icon name="icon_copy_outlined"></Icon>
+                                <Icon name="icon_copy_outlined"><icon_copy_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1973,7 +1995,9 @@ const getDsIconName = data => {
                           <template #default>
                             <el-button text @click="handleFieldMore(scope.row, 'delete')">
                               <template #icon>
-                                <Icon name="icon_delete-trash_outlined"></Icon>
+                                <Icon name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1987,7 +2011,7 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"></Icon>
+                                <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -2021,7 +2045,7 @@ const getDsIconName = data => {
                     <el-icon>
                       <Icon
                         :className="`field-icon-${fieldType[[2, 3].includes(data.value) ? 2 : 0]}`"
-                        :name="`field_${getIconName(data.value)}`"
+                        ><component :is="iconFieldMap[getIconName(data.value)]"></component
                       ></Icon>
                     </el-icon>
                     <span>{{ data.label }}</span>
@@ -2029,9 +2053,8 @@ const getDsIconName = data => {
                 </el-cascader>
                 <span class="select-svg-icon">
                   <el-icon>
-                    <Icon
-                      :className="`field-icon-${getIconName(deTypeArr[0])}`"
-                      :name="`field_${getIconName(deTypeArr[0])}`"
+                    <Icon :className="`field-icon-${getIconName(deTypeArr[0])}`"
+                      ><component :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 2dbba88474..300c79429c 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -1,4 +1,18 @@
 <script lang="tsx" setup>
+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,
@@ -62,6 +76,7 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { XpackComponent } from '@/components/plugin'
 import { useCache } from '@/hooks/web/useCache'
 import { RefreshLeft } from '@element-plus/icons-vue'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 const { t } = useI18n()
 const interactiveStore = interactiveStoreWithOut()
 const { wsCache } = useCache()
@@ -201,10 +216,9 @@ const allFieldsColumns = [
     cellRenderer: ({ cellData: deType }) => (
       <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon
-            name={`field_${fieldType[deType]}`}
-            className={`field-icon-${fieldType[deType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[deType]}`}>
+            {iconFieldMap[fieldType[deType]]}
+          </Icon>
         </ElIcon>
         {t(`dataset.${fieldType[deType]}`) +
           `${deType === 3 ? '(' + t('dataset.float') + ')' : ''}`}
@@ -239,10 +253,9 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon
-            name={`field_${fieldType[column.deType]}`}
-            className={`field-icon-${fieldType[column.deType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[column.deType]}`}>
+            {iconFieldMap[fieldType[column.deType]]}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -766,7 +779,7 @@ const getMenuList = (val: boolean) => {
                   style="margin-right: 20px"
                   @click="handleDatasetTree('folder')"
                 >
-                  <Icon name="dv-new-folder" />
+                  <Icon name="dv-new-folder"><dvNewFolder /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip
@@ -776,7 +789,7 @@ const getMenuList = (val: boolean) => {
                 placement="top"
               >
                 <el-icon class="custom-icon btn" @click="createDataset">
-                  <Icon name="icon_file-add_outlined" />
+                  <Icon name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -789,25 +802,24 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined" />
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
           <el-dropdown @command="sortTypeChange" trigger="click">
             <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"
-                ></Icon>
+                <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
+                  ><dvSortAsc
+                /></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"
-                ></Icon>
+                  ><dvSortDesc
+                /></Icon>
               </el-tooltip>
             </el-icon>
             <template #dropdown>
@@ -845,10 +857,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"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></Icon>
                 </el-icon>
                 <el-icon v-if="data.leaf" style="font-size: 18px">
-                  <Icon name="icon_dataset"></Icon>
+                  <Icon name="icon_dataset"><icon_dataset /></Icon>
                 </el-icon>
                 <span :title="node.label" class="label-tooltip ellipsis">{{ node.label }}</span>
                 <div class="icon-more" v-if="data.weight >= 7">
@@ -861,7 +873,7 @@ const getMenuList = (val: boolean) => {
                     v-if="!data.leaf"
                   ></handle-more>
                   <el-icon v-else class="hover-icon" @click.stop="handleEdit(data.id)">
-                    <icon name="icon_edit_outlined"></icon>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
                   </el-icon>
                   <handle-more
                     @handle-command="cmd => operation(cmd, data, data.leaf ? 'dataset' : 'folder')"
@@ -885,7 +897,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>
+              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
             </template>
             {{ t('deDataset.create') + t('auth.dataset') }}</el-button
           >
@@ -903,7 +915,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>
+                  <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -914,23 +926,26 @@ 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>
+                  <Icon name="icon_dashboard_outlined"><icon_dashboard_outlined /></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> </template
+                <template #icon>
+                  <Icon name="icon_operation-analysis_outlined"
+                    ><icon_operationAnalysis_outlined
+                  /></Icon> </template
                 >{{ t('data_set.new_data_screen') }}
               </el-button>
               <el-button secondary @click="exportDataset">
                 <template #icon>
-                  <Icon name="icon_download_outlined"></Icon>
+                  <Icon name="icon_download_outlined"><icon_download_outlined /></Icon>
                 </template>
                 数据集导出
               </el-button>
               <el-button type="primary" @click="editorDataset" v-if="nodeInfo.weight >= 7">
                 <template #icon>
-                  <Icon name="icon_edit_outlined"></Icon>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                 </template>
                 {{ t('visualization.edit') }}
               </el-button>
@@ -996,9 +1011,8 @@ const getMenuList = (val: boolean) => {
                     <template #header>
                       <div class="flex-align-center">
                         <ElIcon style="margin-right: 6px">
-                          <Icon
-                            :name="`field_${fieldType[column.deType]}`"
-                            :className="`field-icon-${fieldType[column.deType]}`"
+                          <Icon :className="`field-icon-${fieldType[column.deType]}`"
+                            ><component :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 6805aa9799..52424a803e 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 defineProps({
@@ -14,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>
+        <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></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 2410405676..f0d54e2273 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_excel from '@/assets/svg/icon_excel.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 const props = withDefaults(
   defineProps<{
     name?: string
@@ -21,14 +23,14 @@ const del = () => {
 <template>
   <div class="excel-info">
     <el-icon class="excel">
-      <Icon name="icon_excel"></Icon>
+      <Icon name="icon_excel"><icon_excel /></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>
+      <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></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 81b3b8d74d..724df0262d 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_succeed_colorful from '@/assets/svg/icon_succeed_colorful.svg'
+import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import { ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useCache } from '@/hooks/web/useCache'
@@ -34,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>
+        <Icon name="icon_succeed_colorful"><icon_succeed_colorful /></Icon>
       </el-icon>
 
       <div class="succeed-text">创建成功</div>
@@ -50,7 +52,7 @@ const handleChange = (val: boolean) => {
         <div class="title">您可能还想</div>
         <div class="ds-info">
           <el-icon class="ds">
-            <Icon name="icon_dataset"></Icon>
+            <Icon name="icon_dataset"><icon_dataset /></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 00811afabf..cd6b86ff4b 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_expandLeft_filled from '@/assets/svg/icon_expand-left_filled.svg'
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { toRefs, ref, watch, nextTick } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 const props = defineProps({
@@ -75,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>
+        <Icon name="icon_expand-left_filled"><icon_expandLeft_filled /></Icon>
       </el-icon>
       <el-icon size="12px" @click="nextClick">
-        <Icon name="icon_expand-right_filled"></Icon>
+        <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></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 74d76572eb..2ab93b7bd9 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { nextTick, reactive, ref, shallowRef, provide } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
@@ -13,6 +14,7 @@ import { cloneDeep } from 'lodash-es'
 import { fieldType } from '@/utils/attr'
 import type { ApiConfiguration } from '@/views/visualized/data/datasource/form/option'
 import { cancelMap } from '@/config/axios/service'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 export interface Field {
   name: string
@@ -593,7 +595,7 @@ defineExpose({
           @click="activeColumnInfo = !activeColumnInfo"
         >
           <el-icon style="font-size: 10px">
-            <Icon name="icon_expand-right_filled"></Icon>
+            <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
           </el-icon>
           <span class="name">{{ t('datasource.column_info') }}</span>
         </p>
@@ -647,9 +649,10 @@ defineExpose({
                 >
                   <template #prefix>
                     <el-icon>
-                      <Icon
-                        :name="`field_${fieldType[scope.row.deExtractType]}`"
-                        :className="`field-icon-${fieldType[scope.row.deExtractType]}`"
+                      <Icon :className="`field-icon-${fieldType[scope.row.deExtractType]}`"
+                        ><component
+                          :is="iconFieldMap[fieldType[scope.row.deExtractType]]"
+                        ></component
                       ></Icon>
                     </el-icon>
                   </template>
@@ -661,9 +664,8 @@ defineExpose({
                   >
                     <span style="float: left">
                       <el-icon>
-                        <Icon
-                          :name="`field_${fieldType[item.value]}`"
-                          :className="`field-icon-${fieldType[item.value]}`"
+                        <Icon :className="`field-icon-${fieldType[item.value]}`"
+                          ><component :is="iconFieldMap[fieldType[item.value]]"></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -681,7 +683,7 @@ defineExpose({
           @click="activeDataPreview = !activeDataPreview"
         >
           <el-icon style="font-size: 10px">
-            <Icon name="icon_expand-right_filled"></Icon>
+            <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></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 62af9645b3..7b3a9a257a 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
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { propTypes } from '@/utils/propTypes'
 import { computed, onBeforeMount, PropType, toRefs, inject, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -119,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>
+              <Icon name="icon_drag_outlined"><icon_drag_outlined /></Icon>
             </el-icon>
             <el-col :span="activeName === 'params' ? 8 : 6" v-if="!unShowSelect">
               <el-input
@@ -218,7 +221,7 @@ const timeFunLists = [
             <el-col :span="1">
               <el-button text :disabled="isDisable()" @click="remove(index)">
                 <template #icon>
-                  <Icon name="icon_delete-trash_outlined"></Icon>
+                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -229,7 +232,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="icon_add_outlined"></icon>
+        <icon name="icon_add_outlined"><icon_add_outlined /></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 a4c252b5dd..46b4534f3b 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
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { propTypes } from '@/utils/propTypes'
 import { computed, onBeforeMount, PropType, toRefs, inject } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -141,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>
+              <Icon name="icon_drag_outlined"><icon_drag_outlined /></Icon>
             </el-icon>
             <el-col :span="6">
               <el-input
@@ -244,7 +247,7 @@ const timeFunLists = [
             <el-col :span="1">
               <el-button text :disabled="isDisable() || isReadOnly" @click="remove(index)">
                 <template #icon>
-                  <Icon name="icon_delete-trash_outlined"></Icon>
+                  <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -255,7 +258,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="icon_add_outlined"></icon>
+        <icon name="icon_add_outlined"><icon_add_outlined /></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 a5107a3be1..73f000de4f 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import dvFolder from '@/assets/svg/dv-folder.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { ref, reactive, computed, watch, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { checkRepeat, listDatasources, save, update } from '@/api/datasource'
@@ -358,7 +360,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
         >
           <template #default="{ data: { name } }">
             <el-icon>
-              <Icon name="dv-folder"></Icon>
+              <Icon name="dv-folder"><dvFolder /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -368,7 +370,7 @@ 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>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -387,7 +389,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
             <template #default="{ data }">
               <span class="custom-tree-node">
                 <el-icon style="font-size: 18px">
-                  <Icon name="dv-folder"></Icon>
+                  <Icon name="dv-folder"><dvFolder /></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 3aa4dc8232..a166bd9ff4 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
@@ -3,6 +3,7 @@ import { shallowRef, PropType, computed } from 'vue'
 import { dsTypes, typeList, nameMap } from './option'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { XpackComponent } from '@/components/plugin'
+import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
 
 export type DsType = 'OLTP' | 'OLAP' | 'DL' | 'OTHER' | 'LOCAL' | 'latestUse' | 'all'
 const props = defineProps({
@@ -119,7 +120,7 @@ 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 :name="`${db.type}-ds`"></Icon>
+            <Icon v-else><component :is="iconDatasourceMap[db.type]"></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 26338d78d8..b30beb9a26 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,12 @@
 <script lang="ts" setup>
+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'
+import deCopy from '@/assets/svg/de-copy.svg'
+import deDelete from '@/assets/svg/de-delete.svg'
+import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import { ref, reactive, h, computed, toRefs, nextTick, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
@@ -15,6 +23,7 @@ import { ElForm, ElMessage, ElMessageBox } from 'element-plus-secondary'
 import Cron from '@/components/cron/src/Cron.vue'
 import { ComponentPublicInstance } from 'vue'
 import { XpackComponent } from '@/components/plugin'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 const { t } = useI18n()
 const prop = defineProps({
   form: {
@@ -760,7 +769,7 @@ defineExpose({
             </el-tabs>
             <el-button type="primary" style="margin-left: auto" @click="() => addApiItem(null)">
               <template #icon>
-                <Icon name="icon_add_outlined"></Icon>
+                <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
               </template>
               {{ t('common.add') }}
             </el-button>
@@ -791,7 +800,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"></Icon>
+                      <Icon name="de-copy"><deCopy /></Icon>
                     </el-icon>
 
                     <span @click.stop>
@@ -805,12 +814,12 @@ defineExpose({
                       >
                         <template #reference>
                           <el-icon class="de-delete-icon hover-icon">
-                            <Icon name="de-delete"></Icon>
+                            <Icon name="de-delete"><deDelete /></Icon>
                           </el-icon>
                         </template>
                         <template #default>
                           <el-icon class="de-copy-icon icon-warning">
-                            <Icon name="icon_warning_filled"></Icon>
+                            <Icon name="icon_warning_filled"><icon_warning_filled /></Icon>
                           </el-icon>
                           <div class="tips">
                             {{ t('datasource.delete_this_item') }}
@@ -860,7 +869,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>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
                   </el-icon>
                   <handle-more
                     icon-size="24px"
@@ -887,9 +896,8 @@ defineExpose({
                   <template #default="scope">
                     <div class="flex-align-center icon">
                       <el-icon>
-                        <Icon
-                          :className="`field-icon-${fieldType[scope.row.deType]}`"
-                          :name="`field_${fieldType[scope.row.deType]}`"
+                        <Icon :className="`field-icon-${fieldType[scope.row.deType]}`"
+                          ><component :is="iconFieldMap[fieldType[scope.row.deType]]"></component
                         ></Icon>
                       </el-icon>
                       {{ fieldTypeText[scope.row.deType] }}
@@ -901,7 +909,7 @@ defineExpose({
                   <template #default="scope">
                     <el-button text @click.stop="delParams(scope.row)">
                       <template #icon>
-                        <Icon name="icon_delete-trash_outlined"></Icon>
+                        <Icon name="icon_delete-trash_outlined"><icon_deleteTrash_outlined /></Icon>
                       </template>
                     </el-button>
                   </template>
@@ -1048,7 +1056,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>
+                  <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
                 </template>
                 {{ t('datasource.get_schema') }}
               </el-button>
@@ -1081,7 +1089,9 @@ defineExpose({
               @click="showSSH = !showSSH"
               >SSH 设置
               <el-icon>
-                <Icon :name="showSSH ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+                <Icon
+                  ><component :is="showSSH ? icon_down_outlined : icon_down_outlined1"></component
+                ></Icon>
               </el-icon>
             </span>
           </el-form-item>
@@ -1165,7 +1175,11 @@ defineExpose({
               @click="showPriority = !showPriority"
               >{{ t('datasource.priority') }}
               <el-icon>
-                <Icon :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+                <Icon
+                  ><component
+                    :is="showPriority ? icon_down_outlined : icon_down_outlined1"
+                  ></component
+                ></Icon>
               </el-icon>
             </span>
           </el-form-item>
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 a6efe1c2bb..16d0a850b1 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
@@ -1,4 +1,5 @@
 <script lang="tsx" setup>
+import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
 import { Icon } from '@/components/icon-custom'
 import { ElIcon } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -21,6 +22,7 @@ import SheetTabs from '../SheetTabs.vue'
 import { cloneDeep, debounce } from 'lodash-es'
 import { uploadFile } from '@/api/datasource'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 
 export interface Param {
   editType: number
@@ -115,10 +117,9 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center icon">
         <ElIcon>
-          <Icon
-            name={`field_${fieldType[column.fieldType]}`}
-            className={`field-icon-${fieldType[column.fieldType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[column.fieldType]}`}>
+            {iconFieldMap[fieldType[column.fieldType]]}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '100px' }}>
           {column.title}
@@ -483,7 +484,7 @@ defineExpose({
             <template #trigger>
               <el-button secondary>
                 <template #icon>
-                  <Icon name="icon_upload_outlined"></Icon>
+                  <Icon name="icon_upload_outlined"><icon_upload_outlined /></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 a444747c0d..e5560eb8c2 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
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { reactive, ref, computed, watch, nextTick } from 'vue'
 import { ElIcon, ElMessage, ElMessageBox, ElMessageBoxOptions } from 'element-plus-secondary'
 import CreatDsGroup from './CreatDsGroup.vue'
@@ -20,6 +22,7 @@ import { cloneDeep } from 'lodash-es'
 import { useCache } from '@/hooks/web/useCache'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { XpackComponent, PluginComponent } from '@/components/plugin'
+import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
 
 interface Node {
   name: string
@@ -700,7 +703,7 @@ defineExpose({
         </el-steps>
       </div>
       <el-icon @click="close" class="datasource-close">
-        <Icon name="icon_close_outlined"></Icon>
+        <Icon name="icon_close_outlined"><icon_close_outlined /></Icon>
       </el-icon>
     </template>
     <div class="datasource">
@@ -714,7 +717,7 @@ defineExpose({
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -760,7 +763,7 @@ 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 :name="`${data.type}-ds`"></Icon>
+                <Icon v-else><component :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 9078198992..0e3b9f9dfe 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -1,4 +1,27 @@
 <script lang="tsx" setup>
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
+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 dvFolder from '@/assets/svg/dv-folder.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 icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import icon_dataset_outlined from '@/assets/svg/icon_dataset_outlined.svg'
+import icon_newItem_outlined from '@/assets/svg/icon_new-item_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_succeed_filled from '@/assets/svg/icon_succeed_filled.svg'
+import icon_close_filled from '@/assets/svg/icon_close_filled.svg'
+import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
+import iconMaybe_outlined from '@/assets/svg/icon-maybe_outlined.svg'
 import { computed, h, unref, reactive, ref, shallowRef, nextTick, watch, onMounted } from 'vue'
 import { dsTypes } from '@/views/visualized/data/datasource/form/option'
 import type { TabPaneName, ElMessageBoxOptions } from 'element-plus-secondary'
@@ -54,6 +77,8 @@ import treeSort from '@/utils/treeSortUtils'
 import { useCache } from '@/hooks/web/useCache'
 import { useEmbedded } from '@/store/modules/embedded'
 import { XpackComponent } from '@/components/plugin'
+import { iconFieldMap } from '@/components/icon-group/field-list'
+import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
 const route = useRoute()
 const interactiveStore = interactiveStoreWithOut()
 interface Field {
@@ -124,18 +149,18 @@ const activeTab = ref('')
 const menuList = [
   {
     label: '移动到',
-    svgName: 'icon_into-item_outlined',
+    svgName: icon_intoItem_outlined,
     command: 'move'
   },
   {
     label: '重命名',
-    svgName: 'icon_rename_outlined',
+    svgName: icon_rename_outlined,
     command: 'rename'
   },
   {
     label: '删除',
     divided: true,
-    svgName: 'icon_delete-trash_outlined',
+    svgName: icon_deleteTrash_outlined,
     command: 'delete'
   }
 ]
@@ -149,13 +174,13 @@ const datasetTypeList = computed(() => {
   return [
     {
       label: '新建数据源',
-      svgName: 'icon_dataset',
+      svgName: icon_dataset,
       command: 'datasource'
     },
     {
       label: '新建文件夹',
       divided: true,
-      svgName: 'dv-folder',
+      svgName: dvFolder,
       command: 'folder'
     }
   ]
@@ -217,10 +242,9 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon
-            name={`field_${fieldType[column.deType]}`}
-            className={`field-icon-${fieldType[column.deType]}`}
-          ></Icon>
+          <Icon className={`field-icon-${fieldType[column.deType]}`}>
+            {iconFieldMap[fieldType[column.deType]]}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -336,8 +360,8 @@ const getDsIconType = type => {
 }
 
 const getDsIconName = data => {
-  if (!data.leaf) return 'dv-folder'
-  return `${data.type}-ds`
+  if (!data.leaf) return dvFolder
+  return iconDatasourceMap[data.type]
 }
 
 const handleTabClick = tab => {
@@ -937,7 +961,7 @@ const getMenuList = (val: boolean) => {
     : [
         {
           label: t('common.copy'),
-          svgName: 'icon_copy_filled',
+          svgName: icon_copy_filled,
           command: 'copy'
         }
       ].concat(menuList)
@@ -975,12 +999,12 @@ const getMenuList = (val: boolean) => {
                   :style="{ marginRight: '20px' }"
                   @click="handleDatasourceTree('folder')"
                 >
-                  <Icon name="dv-new-folder" />
+                  <Icon name="dv-new-folder"><dvNewFolder /></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 name="icon_file-add_outlined"><icon_fileAdd_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -994,25 +1018,24 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined" />
+                <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
               </el-icon>
             </template>
           </el-input>
           <el-dropdown @command="sortTypeChange" trigger="click">
             <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"
-                ></Icon>
+                <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
+                  ><dvSortAsc
+                /></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"
-                ></Icon>
+                  ><dvSortDesc
+                /></Icon>
               </el-tooltip>
             </el-icon>
             <template #dropdown>
@@ -1048,7 +1071,9 @@ const getMenuList = (val: boolean) => {
             <template #default="{ node, data }">
               <span class="custom-tree-node">
                 <el-icon :class="data.leaf && 'icon-border'" style="font-size: 18px">
-                  <Icon :static-content="getDsIcon(data)" :name="getDsIconName(data)"></Icon>
+                  <Icon :static-content="getDsIcon(data)"
+                    ><component :is="getDsIconName(data)"></component
+                  ></Icon>
                 </el-icon>
                 <span
                   :title="node.label"
@@ -1061,7 +1086,7 @@ const getMenuList = (val: boolean) => {
                     icon-size="24px"
                     @handle-command="cmd => handleDatasourceTree(cmd, data)"
                     :menu-list="datasetTypeList"
-                    icon-name="icon_add_outlined"
+                    :icon-name="icon_add_outlined"
                     placement="bottom-start"
                     v-if="!data.leaf"
                   ></handle-more>
@@ -1070,7 +1095,7 @@ const getMenuList = (val: boolean) => {
                     @click.stop="handleEdit(data)"
                     v-else-if="data.type !== 'Excel'"
                   >
-                    <icon name="icon_edit_outlined"></icon>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined /></icon>
                   </el-icon>
                   <handle-more
                     @handle-command="
@@ -1097,7 +1122,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>
+              <Icon name="icon_add_outlined"><icon_add_outlined /></Icon>
             </template>
             {{ t('datasource.create') }}</el-button
           >
@@ -1107,9 +1132,8 @@ const getMenuList = (val: boolean) => {
         <div class="datasource-info">
           <div class="info-method">
             <el-icon class="icon-border">
-              <Icon
-                :static-content="getDsIconType(nodeInfo.type)"
-                :name="`${nodeInfo.type}-ds`"
+              <Icon :static-content="getDsIconType(nodeInfo.type)"
+                ><component :is="iconDatasourceMap[nodeInfo.type]"></component
               ></Icon>
             </el-icon>
             <span :title="nodeInfo.name" class="name ellipsis">
@@ -1122,7 +1146,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>
+                  <Icon name="icon_info_outlined"><icon_info_outlined /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -1133,7 +1157,7 @@ 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>
+                  <Icon name="icon_dataset_outlined"><icon_dataset_outlined /></Icon>
                 </template>
                 新建数据集
               </el-button>
@@ -1160,7 +1184,7 @@ const getMenuList = (val: boolean) => {
                   <template #trigger>
                     <el-button v-loading="replaceLoading" class="replace-excel" type="primary">
                       <template #icon>
-                        <Icon name="icon_edit_outlined"></Icon>
+                        <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                       </template>
                       替换数据
                     </el-button>
@@ -1181,7 +1205,7 @@ const getMenuList = (val: boolean) => {
                   <template #trigger>
                     <el-button v-loading="addLoading" type="primary">
                       <template #icon>
-                        <Icon name="icon_new-item_outlined"></Icon>
+                        <Icon name="icon_new-item_outlined"><icon_newItem_outlined /></Icon>
                       </template>
                       追加数据
                     </el-button>
@@ -1190,7 +1214,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>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined /></Icon>
                 </template>
                 编辑
               </el-button>
@@ -1215,7 +1239,7 @@ const getMenuList = (val: boolean) => {
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"></Icon>
+                  <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -1243,7 +1267,7 @@ 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>
+                        <icon name="icon_succeed_filled"><icon_succeed_filled /></icon>
                       </el-icon>
                       {{ t('dataset.completed') }}
                     </template>
@@ -1252,7 +1276,9 @@ const getMenuList = (val: boolean) => {
                     </template>
                     <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>
+                        <icon class="field-icon-red" name="icon_close_filled"
+                          ><icon_close_filled
+                        /></icon>
                       </el-icon>
                       {{ t('dataset.error') }}
                     </template>
@@ -1283,14 +1309,14 @@ const getMenuList = (val: boolean) => {
                       v-permission="['dataset']"
                     >
                       <template #icon>
-                        <Icon name="icon_dataset_outlined"></Icon>
+                        <Icon name="icon_dataset_outlined"><icon_dataset_outlined /></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>
+                        <Icon name="icon_describe_outlined"><icon_describe_outlined /></Icon>
                       </template>
                     </el-button>
                   </el-tooltip>
@@ -1382,7 +1408,11 @@ const getMenuList = (val: boolean) => {
                     @click="showSSH = !showSSH"
                     >SSH 设置
                     <el-icon>
-                      <Icon :name="showSSH ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+                      <Icon
+                        ><component
+                          :is="showSSH ? icon_down_outlined : icon_down_outlined1"
+                        ></component
+                      ></Icon>
                     </el-icon>
                   </span>
                 </el-row>
@@ -1411,7 +1441,9 @@ const getMenuList = (val: boolean) => {
                     >{{ t('datasource.priority') }}
                     <el-icon>
                       <Icon
-                        :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"
+                        ><component
+                          :is="showPriority ? icon_down_outlined : icon_down_outlined1"
+                        ></component
                       ></Icon>
                     </el-icon>
                   </span>
@@ -1471,7 +1503,7 @@ 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>
+                        <icon name="icon_replace_outlined"><icon_replace_outlined /></icon>
                       </template>
                     </el-button>
                   </el-col>
@@ -1496,7 +1528,7 @@ const getMenuList = (val: boolean) => {
             </div>
             <el-button @click="updateApiDs" class="update-records" text>
               <template #icon>
-                <icon name="icon_replace_outlined"></icon>
+                <icon name="icon_replace_outlined"><icon_replace_outlined /></icon>
               </template>
               全部更新
             </el-button>
@@ -1529,7 +1561,7 @@ const getMenuList = (val: boolean) => {
             </template>
             <el-button @click="getRecord" class="update-records" text>
               <template #icon>
-                <icon name="icon_describe_outlined"></icon>
+                <icon name="icon_describe_outlined"><icon_describe_outlined /></icon>
               </template>
               {{ t('dataset.update_records') }}
             </el-button>
@@ -1614,9 +1646,8 @@ const getMenuList = (val: boolean) => {
             <template #default="scope">
               <div class="flex-align-center icon">
                 <el-icon>
-                  <icon
-                    :name="`field_${fieldType[scope.row.deType]}`"
-                    :class="`field-icon-${fieldType[scope.row.deType]}`"
+                  <icon :class="`field-icon-${fieldType[scope.row.deType]}`"
+                    ><component :is="iconFieldMap[fieldType[scope.row.deType]]"></component
                   ></icon>
                 </el-icon>
                 {{
@@ -1684,7 +1715,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>
+                  <icon name="icon_succeed_filled"><icon_succeed_filled /></icon>
                 </el-icon>
                 {{ t('dataset.completed') }}
               </template>
@@ -1696,11 +1727,11 @@ 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>
+                  <icon class="field-icon-red" name="icon_close_filled"><icon_close_filled /></icon>
                 </el-icon>
                 {{ t('dataset.error') }}
                 <el-icon @click="showErrorInfo(scope.row.info)" class="error-info">
-                  <icon name="icon-maybe_outlined"></icon>
+                  <icon name="icon-maybe_outlined"><iconMaybe_outlined /></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 e99bd09cf7..0aafb4fc68 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
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import icon_viewList_outlined from '@/assets/svg/icon_view-list_outlined.svg'
+import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { ref, reactive, shallowRef, provide } from 'vue'
 import draggable from 'vuedraggable'
 import FilterHead from './FilterHead.vue'
 import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
 const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const selectValue = ref()
@@ -106,7 +109,7 @@ const handleTabClick = () => {
     <div class="name">
       选项值来源
       <el-icon>
-        <Icon name="icon_view-list_outlined"></Icon>
+        <Icon name="icon_view-list_outlined"><icon_viewList_outlined /></Icon>
       </el-icon>
     </div>
     <el-tabs v-model="activeNameData" @tab-click="handleTabClick">
@@ -135,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>
+          <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
         </ElIcon>
         &nbsp;维度
       </div>
@@ -148,9 +151,8 @@ const handleTabClick = () => {
           <template #item="{ element }">
             <div class="filter-db-row">
               <el-icon>
-                <Icon
-                  :name="`field_${fieldType[element.deType]}`"
-                  :className="`field-icon-${fieldType[element.deType]}`"
+                <Icon :className="`field-icon-${fieldType[element.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[element.deType]]"></component
                 ></Icon>
               </el-icon>
               <span :title="element.name">{{ element.name }}</span>
@@ -162,7 +164,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>
+          <Icon name="icon_expand-right_filled"><icon_expandRight_filled /></Icon>
         </ElIcon>
         &nbsp;指标
       </div>
@@ -178,6 +180,7 @@ const handleTabClick = () => {
                 <Icon
                   :name="`field_${fieldType[element.deType]}`"
                   :className="`field-icon-${fieldType[element.deType]}`"
+                  ><component :is="iconFieldMap[fieldType[element.deType]]"></component
                 ></Icon>
               </el-icon>
               <span :title="element.name">{{ element.name }}</span>
@@ -191,7 +194,7 @@ const handleTabClick = () => {
     <div class="name">
       文本下拉组件
       <el-icon>
-        <Icon name="icon_view-list_outlined"></Icon>
+        <Icon name="icon_view-list_outlined"><icon_viewList_outlined /></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 35ebfa5ed4..1021d6bbf9 100644
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@@ -1,9 +1,19 @@
 <script lang="ts" setup>
+import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'
+import visualStar from '@/assets/svg/visual-star.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'
+import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
+import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
+import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
+import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
+import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
+import icon_cancel_store from '@/assets/svg/icon_cancel_store.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive, onMounted, computed } from 'vue'
 import type { TabsPaneContext } from 'element-plus-secondary'
 import GridTable from '@/components/grid-table/src/GridTable.vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
 import { shortcutOption } from './ShortcutOption'
 /* import { XpackComponent } from '@/components/plugin' */
@@ -23,7 +33,6 @@ const interactiveStore = interactiveStoreWithOut()
 const { wsCache } = useCache()
 const appStore = useAppStoreWithOut()
 const embeddedStore = useEmbedded()
-const route = useRoute()
 const { push } = useRouter()
 defineProps({
   expand: {
@@ -42,14 +51,14 @@ const state = reactive({
 })
 const busiDataMap = computed(() => interactiveStore.getData)
 const iconMap = {
-  panel: 'icon_dashboard_outlined',
-  panelMobile: 'dv-dashboard-spine-mobile',
-  dashboard: 'icon_dashboard_outlined',
-  dashboardMobile: 'dv-dashboard-spine-mobile',
-  screen: 'icon_operation-analysis_outlined',
-  dataV: 'icon_operation-analysis_outlined',
-  dataset: 'icon_app_outlined',
-  datasource: 'icon_database_outlined'
+  panel: icon_dashboard_outlined,
+  panelMobile: dvDashboardSpineMobile,
+  dashboard: icon_dashboard_outlined,
+  dashboardMobile: dvDashboardSpineMobile,
+  screen: icon_operationAnalysis_outlined,
+  dataV: icon_operationAnalysis_outlined,
+  dataset: icon_app_outlined,
+  datasource: icon_database_outlined
 }
 
 const jumpActiveCheck = row => {
@@ -297,7 +306,7 @@ const getEmptyDesc = (): string => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"><icon_searchOutline_outlined /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -317,10 +326,10 @@ const getEmptyDesc = (): string => {
           <template v-slot:default="scope">
             <div class="name-content" :class="{ 'jump-active': jumpActiveCheck(scope.row) }">
               <el-icon v-if="scope.row.extFlag" style="margin-right: 12px; font-size: 18px">
-                <Icon :name="iconMap[scope.row.type + 'Mobile']" />
+                <Icon><component :is="iconMap[scope.row.type + 'Mobile']"></component></Icon>
               </el-icon>
               <el-icon v-else :class="`main-color color-${scope.row.type}`">
-                <Icon :name="iconMap[scope.row.type]" />
+                <Icon><component :is="iconMap[scope.row.type]"></component></Icon>
               </el-icon>
               <el-tooltip placement="top">
                 <template #content>{{ scope.row.name }}</template>
@@ -333,7 +342,9 @@ const getEmptyDesc = (): string => {
                 :style="{ color: scope.row.favorite ? '#FFC60A' : '#646A73' }"
               >
                 <icon
-                  :name="scope.row.favorite ? 'visual-star' : 'icon_collection_outlined'"
+                  ><component
+                    :is="scope.row.favorite ? visualStar : icon_collection_outlined"
+                  ></component
                 ></icon>
               </el-icon>
             </div>
@@ -377,7 +388,7 @@ const getEmptyDesc = (): string => {
                     preview(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
                   "
                 >
-                  <Icon name="icon_pc_outlined"></Icon>
+                  <Icon name="icon_pc_outlined"><icon_pc_outlined /></Icon>
                 </el-icon>
               </el-tooltip>
               <ShareHandler
@@ -403,7 +414,7 @@ const getEmptyDesc = (): string => {
                   class="hover-icon hover-icon-in-table"
                   @click.stop="executeCancelStore(scope.row)"
                 >
-                  <Icon name="icon_cancel_store"></Icon>
+                  <Icon name="icon_cancel_store"><icon_cancel_store /></Icon>
                 </el-icon>
               </el-tooltip>
             </template>
@@ -416,7 +427,7 @@ const getEmptyDesc = (): string => {
                     openDataset(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
                   "
                 >
-                  <Icon name="icon_pc_outlined"></Icon>
+                  <Icon name="icon_pc_outlined"><icon_pc_outlined /></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 595dfcabc2..4cad2b31a5 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -1,7 +1,13 @@
 <script lang="ts" setup>
+import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'
+import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
+import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
+import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
+import userImg from '@/assets/svg/user-img.svg'
+import icon_template_colorful from '@/assets/svg/icon_template_colorful.svg'
+import no_result from '@/assets/svg/no_result.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, shallowRef, computed, reactive, watch } from 'vue'
-
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
@@ -32,22 +38,22 @@ const appStore = useAppStoreWithOut()
 
 const quickCreationList = shallowRef([
   {
-    icon: 'icon_dashboard_outlined',
+    icon: icon_dashboard_outlined,
     name: 'panel',
     color: '#3370ff'
   },
   {
-    icon: 'icon_operation-analysis_outlined',
+    icon: icon_operationAnalysis_outlined,
     name: 'screen',
     color: '#00d6b9'
   },
   {
-    icon: 'icon_app_outlined',
+    icon: icon_app_outlined,
     name: 'dataset',
     color: '#16c0ff'
   },
   {
-    icon: 'icon_database_outlined',
+    icon: icon_database_outlined,
     name: 'datasource',
     color: '#7f3bf6'
   }
@@ -284,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" />
+          <Icon name="user-img"><userImg /></Icon>
         </el-icon>
         <div class="info">
           <div class="name-role flex-align-center">
@@ -328,7 +334,7 @@ initMarketTemplate()
               <div class="empty-tooltip-container" />
             </el-tooltip>
             <el-icon class="main-color" :style="{ backgroundColor: ele.color }">
-              <Icon :name="ele.icon" />
+              <Icon><component :is="ele.icon"></component></Icon>
             </el-icon>
             <span class="name">
               {{ t(`auth.${ele.name}`) }}
@@ -351,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 name="icon_template_colorful"><icon_template_colorful /></Icon>
             </el-icon>
             <span class="name">{{ t('work_branch.new_using_template') }}</span>
           </div>
@@ -399,7 +405,7 @@ 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"></Icon>
+              <Icon name="no_result" class="no-result"><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
new file mode 100644
index 0000000000..d65c862430
--- /dev/null
+++ b/core/core-frontend/transformVue.js
@@ -0,0 +1,4180 @@
+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))
+
+
+

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 2/2] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=97=A0=E6=95=88?=
 =?UTF-8?q?svg?=
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))
-
-
-