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..acfb204d7e 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 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 a98409bda8..0c91e11249 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 class="svg-icon" /></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..d85f86e81a 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,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 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">
@@ -457,7 +475,7 @@ const initOpenHandler = newWindow => {
                 :disabled="snapshotIndex < 1"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"></Icon>
+                <Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
 
@@ -469,7 +487,7 @@ const initOpenHandler = newWindow => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -484,7 +502,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 +513,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 +522,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 +532,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 +545,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 +565,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 +580,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 +588,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 +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 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" />
+                  <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 27b417d25e..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 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 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 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 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 name="icon_title-left-align_outlined"
+                    ><icon_titleLeftAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </el-form-item>
@@ -145,6 +155,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..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 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 name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></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..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 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 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 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 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 name="icon_right-alignment_outlined"
+                ><icon_rightAlignment_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-tooltip>
@@ -112,6 +118,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..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" />
+        <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">
@@ -44,6 +46,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..855c42a8a4 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 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 86a244e73a..93ea08ecbf 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,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 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">
@@ -289,7 +303,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 class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
             <el-tooltip effect="ndark" :content="$t('commons.reduction')" placement="bottom">
@@ -300,7 +314,7 @@ const fullScreenPreview = () => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"></Icon>
+                <Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -310,7 +324,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 +333,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 +379,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..2ed822d42c 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"><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"></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"></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"></Icon>
+                  <Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></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"><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 2a3dfd4715..d06241bbec 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"><dvMore class="svg-icon opt-icon" /></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 class="svg-icon expand-icon"
+                    /></Icon>
                     <Icon
                       v-show="!getComponent(index)?.expand"
                       name="dv-expand-right"
                       class="expand-icon"
-                    ></Icon>
+                      ><dvExpandRight class="svg-icon expand-icon"
+                    /></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"><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"></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"></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"></Icon>
+                    <Icon name="dv-lock"><dvLock class="svg-icon opt-icon" /></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"><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 6b6e906c1a..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"></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"></Icon>
+        <Icon v-if="shapeLock" name="dv-lock"><dvLock class="svg-icon iconfont icon-suo" /></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..edd2f5b87c 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 class="svg-icon" /></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 class="svg-icon" /></Icon>
         </el-icon>
       </p>
       <el-button
@@ -68,13 +72,15 @@ watch(
         @click="clearFilterAll"
       >
         <template #icon>
-          <Icon name="icon_delete-trash_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>
+      <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
     </el-icon>
     <el-button
       type="text"
@@ -84,7 +90,9 @@ watch(
       @click="clearFilterAll"
     >
       <template #icon>
-        <Icon name="icon_delete-trash_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 d489569563..9fc262c8be 100644
--- a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
@@ -1,5 +1,6 @@
 <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'
@@ -21,7 +22,7 @@ const props = defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: propTypes.string.def('icon_more_outlined'),
+  iconName: propTypes.string.def(''),
   inTable: propTypes.bool.def(false),
   resourceType: propTypes.string.def('dashboard'),
   node: {
@@ -67,7 +68,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 class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu>
@@ -80,7 +81,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 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 75cfca0bba..493a14d26b 100644
--- a/core/core-frontend/src/components/handle-more/src/HandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
@@ -1,5 +1,6 @@
 <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'
@@ -20,7 +21,7 @@ defineProps({
     type: String as () => Placement,
     default: 'bottom-end'
   },
-  iconName: propTypes.string.def('icon_more_outlined'),
+  iconName: propTypes.string.def(''),
   iconSize: propTypes.string.def('16px'),
   inTable: propTypes.bool.def(false)
 })
@@ -40,7 +41,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 class="svg-icon" :is="iconName || icon_more_outlined"></component></Icon>
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu :persistent="false">
@@ -52,7 +53,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 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 86c91541ad..ae8705909c 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -1,1398 +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'
-import pictureGroupDark from '@/assets/svg/picture-group-dark.svg'
-import pictureGroupOrigin from '@/assets/svg/picture-group-origin.svg'
-import pictureGroup from '@/assets/svg/picture-group.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,
-  'picture-group': pictureGroup,
-  'picture-group-dark': pictureGroupDark,
-  'picture-group-origin': pictureGroupOrigin
-}
-
 const props = defineProps({
   prefix: propTypes.string.def('icon'),
   name: propTypes.string,
@@ -1415,7 +23,7 @@ const svgClass = computed(() => {
     :class="svgClass"
     aria-hidden="true"
   ></div>
-  <component v-else :class="svgClass" :is="iconMap[name]"></component>
+  <slot v-else />
 </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..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 name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></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..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" />
+        <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">
@@ -27,6 +29,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..ea3b5e3af2 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
@@ -6,13 +6,15 @@
     @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 class="svg-icon" /></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..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" :name="iconName" />
+        <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 db33522bb5..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" />
+          <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" />
+          <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>
+          <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" />
+        <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 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" />
+          <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"></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,15 @@
 </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'
+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..c5a9bc931b 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 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 777952fb42..f86bc2af67 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -14,16 +14,19 @@
         <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
+                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"
-            />
+            <Icon name="dataset-outline"
+              ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
+            /></Icon>
             {{ state.curDatasetInfo.name }}</span
           >
         </div>
@@ -66,7 +69,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 +139,9 @@
                           </el-form-item>
                         </div>
                         <div class="icon-center">
-                          <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                          <Icon name="dv-link-target"
+                            ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
+                          /></Icon>
                         </div>
                         <div style="flex: 1">
                           <el-form-item>
@@ -156,10 +162,12 @@
                                     style="display: inline-block"
                                     v-if="data.leaf"
                                   >
-                                    <Icon name="dv-dashboard-spine"></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"></Icon>
+                                    <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                                   </el-icon>
                                   <span
                                     style="margin-left: 8px; font-size: 14px"
@@ -204,9 +212,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 +225,9 @@
                               </el-select>
                             </div>
                             <div class="icon-center">
-                              <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                              <Icon name="dv-link-target"
+                                ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
+                              /></Icon>
                             </div>
                             <div style="flex: 1">
                               <el-select
@@ -233,10 +245,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 +274,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 +293,9 @@
                               @click="deleteLinkJumpField(index)"
                             >
                               <el-icon size="20px">
-                                <Icon name="icon_delete-trash_outlined" />
+                                <Icon name="icon_delete-trash_outlined"
+                                  ><icon_deleteTrash_outlined class="svg-icon"
+                                /></Icon>
                               </el-icon>
                             </el-button>
                           </div>
@@ -308,7 +324,9 @@
                               {{ $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 class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -328,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 name="icon_info_outlined"
+                                ><icon_info_outlined class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -353,9 +373,12 @@
                             >
                               <el-icon>
                                 <Icon
-                                  :name="`field_${fieldType[item.sourceDeType]}`"
-                                  :className="`field-icon-${fieldType[item.sourceDeType]}`"
-                                />
+                                  ><component
+                                    class="svg-icon"
+                                    :className="`field-icon-${fieldType[item.sourceDeType]}`"
+                                    :is="iconFieldMap[fieldType[item.sourceDeType]]"
+                                  ></component
+                                ></Icon>
                               </el-icon>
                               {{ item.sourceFieldName }}
                             </span>
@@ -387,6 +410,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/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 cae2f9c8b9..77d98a1f09 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -17,16 +17,19 @@
         <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
+                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"
-            />
+            <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
           >
         </div>
@@ -82,11 +85,13 @@
                   </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"
+                        ><component
+                          :is="iconChartMap[data.targetViewType]"
+                          style="margin-right: 4px"
+                          class="svg-icon view-type-icon"
+                        ></component
+                      ></Icon>
                       {{ data.targetViewName }}
                     </span>
                   </span>
@@ -133,7 +138,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 +181,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 +193,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 style="width: 20px; height: 20px" class="svg-icon"
+                      /></Icon>
                     </el-icon>
                     <div style="flex: 1">
                       <div class="select-filed">
@@ -207,7 +215,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 +228,9 @@
 
                     <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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -232,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" />
+              <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>
@@ -249,6 +262,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..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,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 name="filter-params"
+                        ><filterParams style="margin-top: 4px" class="svg-icon view-type-icon"
+                      /></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 class="svg-icon" /></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,11 @@
 </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'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -297,6 +301,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)
@@ -312,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 e85425a549..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,18 +103,22 @@
                             :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"
+                              ><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>
                         </el-select>
                       </div>
                     </div>
                     <el-icon class="link-icon-join">
-                      <Icon style="width: 20px; height: 20px" name="dv-link-target" />
+                      <Icon name="dv-link-target"
+                        ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
+                      /></Icon>
                     </el-icon>
                     <div style="flex: 1">
                       <div class="select-filed">
@@ -134,9 +138,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 +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 name="icon_delete-trash_outlined"
+                          ><icon_deleteTrash_outlined class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </el-button>
                   </div>
@@ -174,6 +182,11 @@
 </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'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -188,6 +201,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)
@@ -201,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 0601e3ad8e..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"></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>
@@ -11,6 +13,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..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,11 +10,13 @@
       :style="itemStyle"
       @click.stop="setBoard"
     >
-      <Icon
-        :style="{ color: commonBackground.innerImageColor }"
-        class-name="svg-background"
-        :name="mainIconClass"
-      />
+      <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>
   </div>
@@ -24,6 +26,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..da4ccae390 100644
--- a/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
@@ -5,16 +5,19 @@
       :class="{ 'selected-active': active, 'icon-area-dark': themes === 'dark' }"
     >
       <Icon
-        :style="{ color: innerImageColor }"
-        class-name="svg-background"
-        :name="mainIconClass(item)"
-      />
+        ><component
+          :style="{ color: innerImageColor }"
+          class="svg-icon svg-background"
+          :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..378859d362 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,9 @@ defineExpose({
         <span class="label">已选择图表:</span>
         <span class="name">
           <el-icon class="main-color">
-            <Icon class="toolbar-icon" name="icon_left_outlined" />
+            <Icon name="icon_left_outlined"
+              ><icon_left_outlined class="svg-icon toolbar-icon"
+            /></Icon>
           </el-icon>
           折线图1
         </span>
@@ -107,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 name="icon_left_outlined"
+              ><icon_left_outlined class="svg-icon toolbar-icon"
+            /></Icon>
           </el-icon>
           佩尔数据集
         </span>
@@ -172,7 +180,7 @@ defineExpose({
                 </el-select>
               </el-form-item>
               <el-icon class="join">
-                <Icon name="join-join"></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>
@@ -206,7 +214,7 @@ defineExpose({
                   </el-select>
                 </el-form-item>
                 <el-icon class="join">
-                  <Icon name="join-join"></Icon>
+                  <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
                 </el-icon>
                 <el-form-item
                   label="目标字段"
@@ -238,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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </template>
                 </el-button>
               </template>
@@ -246,7 +256,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 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 5adf46cb06..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,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 class="svg-icon de-svg-main" :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..765bef6aab 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 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 5b90eae187..84f5055494 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 class="svg-icon" /></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 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 name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -192,7 +194,9 @@
                 @click="setPosition('textAlign', 'center')"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -206,7 +210,9 @@
                 @click="setPosition('textAlign', 'right')"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <Icon name="icon_right-alignment_outlined"
+                    ><icon_rightAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -227,7 +233,9 @@
               @click="setPosition('headHorizontalPosition', 'left')"
             >
               <el-icon>
-                <Icon name="icon_left-alignment_outlined" />
+                <Icon name="icon_left-alignment_outlined"
+                  ><icon_leftAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -244,7 +252,9 @@
               @click="setPosition('headHorizontalPosition', 'center')"
             >
               <el-icon>
-                <Icon name="icon_center-alignment_outlined" />
+                <Icon name="icon_center-alignment_outlined"
+                  ><icon_centerAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -261,7 +271,9 @@
               @click="setPosition('headHorizontalPosition', 'right')"
             >
               <el-icon>
-                <Icon name="icon_right-alignment_outlined" />
+                <Icon name="icon_right-alignment_outlined"
+                  ><icon_rightAlignment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -272,6 +284,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 +413,13 @@ const fontSizeList = computed(() => {
   }
   return arr
 })
-
 const styleOptionKeyArrayPre = [
   {
     value: 'fontFamily',
     label: '字体',
     customOption: fontFamilyList,
     width: '188px',
-    icon: 'dv-style-fontFamily'
+    icon: dvStyleFontFamily
   }
 ]
 
@@ -408,21 +430,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 +455,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..dd97e27503 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 class="svg-icon" /></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..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" :name="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/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..90e8180538 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,16 @@ 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
+                  class="svg-icon item-top-icon"
+                  :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..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 name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></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..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" />
+              <Icon name="drag"><drag class="svg-icon" /></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..02776ec0b9 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,14 @@ 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 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>
+                    <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 da6f318544..1d9177a594 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 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 319ce3b0d3..e1ae1f3f46 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 class="svg-icon" /></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 class="svg-icon" /></Icon>
       </template>
       添加级联配置
     </el-button>
@@ -217,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>
+            <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>
+            <Icon name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </template>
         </el-button>
       </div>
@@ -257,7 +263,7 @@ defineExpose({
         </div>
         <div class="cascade-icon">
           <el-icon>
-            <Icon name="join-join"></Icon>
+            <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
           </el-icon>
         </div>
         <div class="item-field">
@@ -277,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>
+            <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 e410833713..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,5 +1,16 @@
 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_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 class="svg-icon" /></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 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>
+                  <icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></icon>
                 </el-icon>
                 {{ element.name }}
               </div>
@@ -1483,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
@@ -1491,10 +1504,12 @@ 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 class="svg-icon"
+                  /></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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
               <div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
@@ -1525,7 +1540,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 class="svg-icon" /></icon>
                   </el-icon>
                 </el-tooltip>
               </div>
@@ -1549,7 +1564,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 +1588,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 +1596,18 @@ defineExpose({
                           )
                         ]
                       }`"
+                      ><component
+                        :is="
+                          iconFieldMap[
+                            fieldType[
+                              getDetype(
+                                curComponent.checkedFieldsMap[field.componentId],
+                                Object.values(field.fields)
+                              )
+                            ]
+                          ]
+                        "
+                      ></component
                     ></Icon>
                   </el-icon>
                 </template>
@@ -1618,9 +1641,12 @@ 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
+                          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">
@@ -1717,7 +1743,7 @@ defineExpose({
                 @click="startTreeDesign"
               >
                 <template #icon>
-                  <icon name="icon_edit_outlined"></icon>
+                  <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                 </template>
               </el-button>
             </div>
@@ -1731,9 +1757,12 @@ 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
+                          :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>
@@ -1741,7 +1770,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 class="svg-icon" /></Icon>
                 </template>
                 点击进行树结构设计
               </el-button>
@@ -1816,10 +1845,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 class="svg-icon" /></Icon>
                         </el-icon>
                         <el-icon size="18px" v-if="data.leaf">
-                          <Icon name="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
@@ -1839,12 +1868,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 +1900,12 @@ 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
+                              class="svg-icon"
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1887,16 +1925,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 +1959,12 @@ 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
+                              class="svg-icon"
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1941,12 +1986,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 +2013,12 @@ 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
+                              :class="`field-icon-${fieldType[ele.deType]}`"
+                              class="svg-icon"
+                              :is="iconFieldMap[fieldType[ele.deType]]"
+                            ></component
                           ></Icon>
                         </el-icon>
                         <span>
@@ -1994,7 +2048,9 @@ defineExpose({
                   <template #reference>
                     <el-button text>
                       <template #icon>
-                        <Icon name="icon_edit_outlined"></Icon>
+                        <Icon name="icon_edit_outlined"
+                          ><icon_edit_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       {{ t('common.edit') }}
                     </el-button>
@@ -2023,7 +2079,9 @@ defineExpose({
                           text
                         >
                           <template #icon>
-                            <Icon name="icon_delete-trash_outlined"></Icon>
+                            <Icon name="icon_delete-trash_outlined"
+                              ><icon_deleteTrash_outlined class="svg-icon"
+                            /></Icon>
                           </template>
                         </el-button>
                       </div>
@@ -2031,7 +2089,9 @@ 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 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 40df314e09..b16599cb2e 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 class="svg-icon" /></Icon>
           </template>
           添加层级
         </el-button>
@@ -108,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>
+            <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 bb0095fd38..cd9d3c02c8 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 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 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 156b272eb2..9f44cffa24 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 class="svg-icon" /></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..613243b2c5 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 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 2e15746d92..2a9f48ff0d 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'
@@ -18,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()
@@ -120,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"
-    ></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"
@@ -143,9 +143,9 @@ onMounted(() => {
         class="ai-icon copilot-icon"
         v-if="!showOverlayCopilot && appearanceStore.getShowCopilot"
       >
-        <Icon name="copilot" @click="handleCopilotClick" />
+        <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"
@@ -156,14 +156,16 @@ onMounted(() => {
         class="ai-icon"
         v-if="aiBaseUrl && !showOverlay && appearanceStore.getShowAi"
       >
-        <Icon name="dv-ai" @click="handleAiClick" />
+        <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" />
+          <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 b9cddde96c..069b711805 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 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>
+          <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 cc7baaf520..d6cd6804b2 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 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 189bd99f0b..0fb1e58fff 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,9 @@ const redirectUser = () => {
       }"
     >
       <el-icon @click="redirectUser">
-        <Icon class="icon-setting" name="icon-setting" />
+        <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 9d5b528a71..e31ca8dec5 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 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 eea39fd3a7..4d74351bac 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 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 7b176eb66d..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" :name="cardInfo.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 f41c3bf2a4..b1c26790f6 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"><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 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 c87c2f8993..4ec020272d 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"><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 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 1adb0368f5..eda28a0370 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 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 62bb077b39..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
@@ -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,16 @@ 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
+                  class="svg-icon item-top-icon"
+                  :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..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,8 +1,10 @@
-<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 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 d594293d2a..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
@@ -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 class="svg-icon" /></Icon>
                       </el-icon>
                       <el-icon v-if="data.leaf">
-                        <Icon name="icon_dataset" />
+                        <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 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 02a939d037..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
@@ -1,8 +1,17 @@
 <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 { 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 +207,26 @@ 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 class="svg-icon"
+            /></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 class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined" />
+            <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]}`"
-              :name="`field_${fieldType[item.deType]}`"
-            />
+            <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              ><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>
         <span v-if="type === 'extColor'" style="display: flex; color: #646a73">
@@ -218,7 +234,12 @@ onMounted(() => {
             <Icon
               :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               :name="`field_${fieldType[item.deType]}`"
-            />
+              ><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>
         <el-tooltip
@@ -236,11 +257,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 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 name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -260,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 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 name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -282,7 +305,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -293,7 +318,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -304,7 +331,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -319,7 +348,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -351,7 +382,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 class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -367,7 +398,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -382,7 +415,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -393,7 +428,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -408,7 +445,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -419,7 +458,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -435,7 +476,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -450,7 +493,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -464,7 +509,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -487,7 +534,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 class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -506,7 +553,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -520,7 +569,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -538,7 +589,7 @@ onMounted(() => {
             :command="beforeClickItem('rename')"
           >
             <el-icon>
-              <icon name="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>
@@ -553,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>
+              <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 d28d220da6..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
@@ -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,26 @@ 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
+                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 name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
+            ><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 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 5d8a26abc4..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
@@ -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,28 @@ 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
+                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>
+          <Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem"
+            ><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" 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 class="svg-icon el-icon-arrow-down el-icon-delete"
+          /></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..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
@@ -1,4 +1,15 @@
 <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 { useI18n } from '@/hooks/web/useI18n'
 import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { formatterItem } from '@/views/chart/components/js/formatter'
@@ -7,6 +18,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 +299,26 @@ 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 class="svg-icon"
+            /></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 class="svg-icon"
+            /></Icon>
           </el-icon>
           <el-icon v-if="'custom_sort' === item.sort">
-            <Icon name="icon_sort_outlined" />
+            <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]}`"
-              :name="`field_${fieldType[item.deType]}`"
-            />
+            <Icon :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              ><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>
         <el-tooltip
@@ -335,12 +354,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 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 name="icon_down_outlined-1"><icon_down_outlined1 class="svg-icon" /></Icon>
         </el-icon>
       </el-tag>
       <template #dropdown>
@@ -360,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 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>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -381,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 name="icon_done_outlined" v-if="'bar' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -392,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 name="icon_done_outlined" v-if="'line' === item.chartType" ><icon_done_outlined class="svg-icon" /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -414,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 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>
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -440,7 +463,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -455,7 +480,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -470,7 +497,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -485,7 +514,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -500,7 +531,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -515,7 +548,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -526,7 +561,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -541,7 +578,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -565,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 name="icon_describe_outlined" ><icon_describe_outlined class="svg-icon" /></Icon>-->
                   </el-icon>
                   <span>{{ t('chart.quick_calc') }}</span>
                   <span class="summary-span-item">
@@ -575,7 +614,7 @@ onMounted(() => {
                   </span>
                 </span>
                 <el-icon>
-                  <Icon name="icon_right_outlined" />
+                  <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -591,7 +630,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -606,10 +647,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -624,10 +664,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -656,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 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 name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -678,7 +717,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -689,7 +730,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -700,7 +743,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 class="svg-icon"
+                        /></Icon>
                       </el-icon>
                     </span>
                   </el-dropdown-item>
@@ -733,13 +778,15 @@ 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 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>
+              <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 eb666a424b..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
@@ -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 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 3124831095..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
@@ -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,9 @@ const removeJumpSenior = () => {
                     @click="removeLinkageSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" />
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -353,7 +357,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.linkageActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" />
+                    <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </button>
               </span>
@@ -382,7 +386,9 @@ const removeJumpSenior = () => {
                     @click="removeJumpSenior"
                   >
                     <el-icon>
-                      <Icon name="icon_delete-trash_outlined" />
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </button>
                 </template>
@@ -394,7 +400,7 @@ const removeJumpSenior = () => {
                   :disabled="!chart.jumpActive"
                 >
                   <el-icon>
-                    <Icon name="icon_edit_outlined" />
+                    <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 815235f7fb..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
@@ -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 class="svg-icon" /></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 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 4ca45bee0a..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></Icon>
                 </el-icon>
               </template>
             </el-button>
@@ -514,10 +516,13 @@ 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
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[fieldItem.field.deType]}`"
+                      :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..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
@@ -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,13 @@ 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
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
+                  ></Icon>
                 </el-icon>
               </span>
               <span :style="{ float: 'left', color: '#8492a6', fontSize: '12px' }">
@@ -298,7 +304,9 @@ onMounted(() => {
               class="hover-icon"
               @click="removeLine(index)"
             >
-              <Icon name="icon_delete-trash_outlined"></Icon>
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </div>
         </el-col>
@@ -306,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>
+        <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 402474f774..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
@@ -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,9 @@ 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 class="svg-icon icon-style"
+      /></Icon>
       <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
     </div>
 
@@ -274,8 +280,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 +295,9 @@ 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 class="svg-icon"
+              /></Icon>
             </el-icon>
           </el-button>
         </el-row>
@@ -422,7 +430,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-button>
             </div>
@@ -437,7 +447,7 @@ init()
           @click="addConditions(fieldItem)"
         >
           <template #icon>
-            <Icon name="icon_add_outlined" />
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
           </template>
           {{ t('chart.add_style') }}
         </el-button>
@@ -452,7 +462,7 @@ init()
       @click="addThreshold"
     >
       <template #icon>
-        <Icon name="icon_add_outlined" />
+        <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 7aec022118..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
@@ -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 class="svg-icon" /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -136,7 +138,9 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_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 101f8b1b2b..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
@@ -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 class="svg-icon" /></Icon>
       </template>
     </el-button>
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
@@ -197,7 +199,9 @@ init()
             @click="removeThreshold(index)"
           >
             <template #icon>
-              <Icon name="icon_delete-trash_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 bdf7044e0f..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
@@ -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 class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -313,7 +316,9 @@ 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 class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -351,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 name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </el-checkbox>
@@ -413,7 +418,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 class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -431,7 +436,9 @@ 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 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 96aff50989..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
@@ -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 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 c859c97e7e..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
@@ -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 class="svg-icon" /></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 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 9e42ffcd50..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
@@ -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,9 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -209,7 +214,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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -232,7 +237,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 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 333123e92f..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
@@ -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,9 @@ defineExpose({ getFormData })
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -213,7 +224,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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -236,7 +247,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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -265,7 +276,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_left-alignment_outlined" />
+                    <Icon name="icon_left-alignment_outlined"
+                      ><icon_leftAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -283,7 +296,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" />
+                    <Icon name="icon_center-alignment_outlined"
+                      ><icon_centerAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -301,7 +316,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" />
+                    <Icon name="icon_right-alignment_outlined"
+                      ><icon_rightAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -330,7 +347,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_top-align_outlined" />
+                  <Icon name="icon_top-align_outlined"
+                    ><icon_topAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -348,7 +367,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" />
+                  <Icon name="icon_vertical-align_outlined"
+                    ><icon_verticalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -366,7 +387,9 @@ defineExpose({ getFormData })
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" />
+                  <Icon name="icon_bottom-align_outlined"
+                    ><icon_bottomAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -472,7 +495,9 @@ defineExpose({ getFormData })
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_letter-spacing_outlined" />
+                  <Icon name="icon_letter-spacing_outlined"
+                    ><icon_letterSpacing_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
               <el-option
@@ -506,7 +531,7 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_bold_outlined" />
+                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -533,7 +558,9 @@ defineExpose({ getFormData })
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_italic_outlined" />
+                    <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 366e500ab0..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></Icon>
             </el-icon>
           </span>
         </el-tooltip>
@@ -1007,19 +1009,25 @@ 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
+                  :class="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                  class="svg-icon"
+                  :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
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
+                ></Icon>
               </el-icon>
               {{ item.optionShowName }}
             </el-option>
@@ -1272,7 +1280,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 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 349761ab66..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
@@ -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,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -314,7 +322,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_horizontal-align_outlined" />
+                  <Icon name="icon_horizontal-align_outlined"
+                    ><icon_horizontalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -329,7 +339,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -364,7 +376,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -382,7 +396,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_vertical-align_outlined" />
+                  <Icon name="icon_vertical-align_outlined"
+                    ><icon_verticalAlign_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -400,7 +416,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_bottom-align_outlined" />
+                  <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 39cd43aa29..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
@@ -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,13 @@ 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
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -376,10 +381,13 @@ 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
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -522,10 +530,13 @@ 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
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    class="svg-icon"
+                    :is="iconFieldMap[fieldType[item.deType]]"
+                  ></component
+                ></Icon>
               </el-icon>
               {{ item.name }}
             </el-option>
@@ -578,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 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 46aa2f49d2..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
@@ -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,9 @@ watch(
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
+                <Icon name="icon_letter-spacing_outlined"
+                  ><icon_letterSpacing_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
             <el-option
@@ -228,7 +237,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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -251,7 +260,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 class="svg-icon" /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -277,7 +286,9 @@ 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 class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -295,7 +306,9 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_center-alignment_outlined" />
+                    <Icon name="icon_center-alignment_outlined"
+                      ><icon_centerAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -313,7 +326,9 @@ watch(
                   }"
                 >
                   <el-icon>
-                    <Icon name="icon_right-alignment_outlined" />
+                    <Icon name="icon_right-alignment_outlined"
+                      ><icon_rightAlignment_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </el-tooltip>
@@ -349,7 +364,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 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 19dcfebf07..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
@@ -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 class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </span>
@@ -639,10 +641,13 @@ 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
+                  class="svg-icon"
+                  :class="`field-icon-${fieldType[curSeriesFormatter.deType]}`"
+                  :is="iconFieldMap[fieldType[curSeriesFormatter.deType]]"
+                ></component
+              ></Icon>
             </el-icon>
           </template>
           <template v-for="item in state.tooltipForm.seriesTooltipFormatter" :key="item.seriesId">
@@ -655,10 +660,13 @@ 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
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[item.deType]}`"
+                    :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..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
@@ -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 class="svg-icon" /></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 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 d0f77ed3fe..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
@@ -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 class="svg-icon" /></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 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 63ad7bf161..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -259,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>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -276,21 +284,28 @@ 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 class="svg-icon"
+                  /></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
+                      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>
+                    <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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -314,7 +329,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 class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -327,7 +342,9 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_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 ed73c30a07..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -233,7 +238,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
+                  <Icon name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -251,7 +258,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -269,7 +278,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <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 c1b7cdfc4d..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></Icon>
               </el-icon>
             </div>
           </el-tooltip>
@@ -204,7 +209,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
+                  <Icon name="icon_left-alignment_outlined"
+                    ><icon_leftAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -222,7 +229,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
+                  <Icon name="icon_center-alignment_outlined"
+                    ><icon_centerAlignment_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -240,7 +249,9 @@ onMounted(() => {
                 }"
               >
                 <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
+                  <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 01f02f1af3..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
@@ -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,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 name="icon_delete-trash_outlined"
+              ><icon_deleteTrash_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </el-button>
       </div>
@@ -152,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 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 923abd51db..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
@@ -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,9 @@ 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 class="svg-icon"
+                /></Icon>
               </el-icon>
             </el-button>
           </div>
@@ -344,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 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 b456bdc900..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -105,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>
+          <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 d740473a10..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
@@ -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,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -386,9 +391,12 @@ 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
+                      class="svg-icon"
+                      :class="`field-icon-${fieldEnums[ele.deType]}`"
+                      :is="iconFieldMap[fieldEnums[ele.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -573,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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -584,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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -593,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>
+        <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 aa7a4200c5..6f4906d195 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,12 @@ 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 +1455,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 => {
@@ -1799,11 +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"
-                                :name="state.chartTypeOptions[0]['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
@@ -1876,7 +1892,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -1934,7 +1952,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -1990,7 +2010,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2048,7 +2070,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2106,7 +2130,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2161,7 +2187,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2224,7 +2252,9 @@ 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 class="svg-icon"
+                                  /></Icon>
                                 </el-icon>
                               </el-tooltip>
                             </span>
@@ -2239,7 +2269,9 @@ 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 class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2300,7 +2332,9 @@ 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 class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2356,7 +2390,9 @@ 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 class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2416,7 +2452,9 @@ 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 class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2489,7 +2527,9 @@ 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 class="svg-icon inner-class"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
@@ -2566,7 +2606,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2581,7 +2623,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2638,7 +2682,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </el-icon>
                             </el-tooltip>
                           </span>
@@ -2653,7 +2699,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2707,7 +2755,9 @@ 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 class="svg-icon inner-class"
+                              /></Icon>
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -2717,7 +2767,9 @@ const deleteChartFieldItem = id => {
                           @click="openTreeFilter"
                         >
                           <el-icon>
-                            <Icon class="svg-background" name="icon-filter"></Icon>
+                            <Icon class="svg-background" name="icon-filter"
+                              ><iconFilter class="svg-icon svg-background"
+                            /></Icon>
                           </el-icon>
 
                           <span>{{ $t('chart.filter') }}</span>
@@ -2997,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 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>
@@ -3011,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 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
@@ -3023,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>
+                    <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>
@@ -3038,7 +3093,9 @@ 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 class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </template>
               </el-input>
@@ -3082,8 +3139,10 @@ 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 +3157,9 @@ 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 class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3107,7 +3168,9 @@ 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 class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3157,8 +3220,8 @@ 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
@@ -3232,9 +3295,12 @@ const deleteChartFieldItem = id => {
                       ]"
                     >
                       <el-icon>
-                        <Icon
-                          :class-name="`field-icon-${fieldType[element.deType]}`"
-                          :name="getIconName(element.deType, element.extField, true)"
+                        <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
@@ -3250,7 +3316,9 @@ 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 class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-icon
                         v-if="element.id !== '-1' && element.chartId"
@@ -3259,7 +3327,9 @@ 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 class="svg-icon inner-class"
+                        /></Icon>
                       </el-icon>
                       <el-dropdown
                         v-if="element.id !== '-1' && false"
@@ -3305,9 +3375,12 @@ const deleteChartFieldItem = id => {
                           class="items flex-align-center"
                         >
                           <el-icon>
-                            <Icon
-                              :class-name="`field-icon-${fieldType[ele.deType]}`"
-                              :name="`field_${fieldType[ele.deType]}`"
+                            <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' }">{{
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..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
@@ -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,12 @@ 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
+        class="svg-icon item-icon"
+        :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 7e437cb2ae..125a77da1a 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'
@@ -856,22 +860,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 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 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 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 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 7d30b41886..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"></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"></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" /></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"
@@ -126,6 +127,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..418861b358 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 class="svg-icon" /></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 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 5d3f24d97a..8bf198363a 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 class="svg-icon" /></Icon>
               </el-icon>
               <span :title="name">{{ name }}</span>
             </span>
@@ -354,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>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -373,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"></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 37bb196ee6..484042e9a8 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 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'
+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,28 @@ defineExpose({
               style="margin-right: 20px"
               @click="addOperation('newFolder', null, 'folder')"
             >
-              <Icon name="dv-new-folder" />
+              <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 name="icon_file-add_outlined"
+                  ><icon_fileAdd_outlined class="svg-icon"
+                /></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 class="svg-icon" /></Icon>
                     </el-icon>
                     使用模板新建
                   </el-dropdown-item>
@@ -539,25 +558,23 @@ defineExpose({
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_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">
           <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 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"
-            ></Icon>
+            <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>
         <template #dropdown>
@@ -594,15 +611,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 class="svg-icon" /></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 class="svg-icon"
+              /></Icon>
             </el-icon>
             <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
 
@@ -616,14 +637,14 @@ defineExpose({
                 class="hover-icon"
                 @click="resourceEdit(data.id)"
               >
-                <Icon name="icon_edit_outlined" />
+                <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 d26569320a..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"></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"></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>
+                  <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>
@@ -44,6 +46,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..3a6979a2f7 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 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" />
+          <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 f52a697b09..707a3fa691 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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></Icon>
                 </el-icon>
                 <el-icon size="18px" v-if="data.leaf">
-                  <Icon name="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
@@ -277,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>
+                <Icon name="icon_expand-right_filled"
+                  ><icon_expandRight_filled class="svg-icon"
+                /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.dimension') }}
             </div>
@@ -286,10 +298,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 +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>
+                <Icon name="icon_expand-right_filled"
+                  ><icon_expandRight_filled class="svg-icon"
+                /></Icon>
               </ElIcon>
               &nbsp;{{ $t('chart.quota') }}
             </div>
@@ -309,10 +323,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..daabc82d88 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 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 709448650b..590762320e 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 class="svg-icon" /></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 class="svg-icon" /></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 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 2544ee6a45..bb4229b321 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,13 @@ 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"
+                  ><component
+                    class="svg-icon view-type-icon"
+                    style="margin-right: 4px"
+                    :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..fa04f513f8 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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></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 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 a04418f461..60ceee652b 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 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 7c1b9fcd19..0fffda6186 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 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 125ccb0d4b..2ba4b36101 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,9 @@ onMounted(async () => {
                 v-if="!loginLogoUrl && axiosFinished"
                 className="login-logo-icon"
                 name="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 15caf89527..df0b9b9ec2 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 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 eca0a85ca5..303a35ffe2 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 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 926a333289..59741dd75f 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 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 abdeb123b1..24b070bac8 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 class="svg-icon" /></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 class="svg-icon" /></Icon>
           </el-icon>
         </div>
       </div>
@@ -226,14 +233,20 @@ onMounted(() => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_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"></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 class="svg-icon opt-icon"
+            /></Icon>
+            <Icon v-if="curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dvSortDesc class="svg-icon opt-icon"
+            /></Icon>
           </el-icon>
           <template #dropdown>
             <el-dropdown-menu style="width: 246px">
@@ -258,7 +271,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..a5e21e9c98 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,12 @@ 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 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 9bd135346f..120fbc9171 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 class="svg-icon" /></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 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 3140d06983..985fb34e23 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,9 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"></Icon>
+            <Icon name="icon_search-outline_outlined"
+              ><icon_searchOutline_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -189,10 +198,12 @@ 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 class="svg-icon"
+              /></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 +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>
+              <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 8efbb98826..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>
+      <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>
+              <icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
             </template>
           </el-button>
         </div>
@@ -141,6 +141,9 @@
 </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'
 import { ref, reactive, onMounted, computed, nextTick } from 'vue'
 import request from '@/config/axios'
@@ -493,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 e22e50f9d8..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 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>
+          <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"></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>
+                    <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"></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>
+                    <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>
+                    <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"></Icon>
+                    <Icon name="edit-done"><editDone class="svg-icon" /></Icon>
                   </template>
                 </el-button>
               </el-tooltip>
@@ -150,6 +156,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..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>
+          <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>
+            <icon name="icon_admin_outlined"><icon_admin_outlined class="svg-icon" /></icon>
           </template>
         </el-button>
       </div>
@@ -134,6 +136,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..9ec94e7df1 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 class="svg-icon" /></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 class="svg-icon" /></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 class="svg-icon" /></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..ce2c7e2e62 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 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>
+      <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 a3dbece1ee..bc82af6a20 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 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 9a10cc5513..a889125420 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,16 @@ 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 class="svg-icon"
+              /></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 class="svg-icon" /></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..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>
+            <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>
+              <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>
+                      <Icon name="icon_delete-trash_outlined"
+                        ><icon_deleteTrash_outlined class="svg-icon"
+                      /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </span>
@@ -101,6 +105,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..2e4a6962f9 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,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"></Icon></el-icon>
+              <el-icon class="info-tips"
+                ><Icon name="dv-info"><dvInfo class="svg-icon" /></Icon
+              ></el-icon>
             </el-tooltip>
           </span>
         </template>
@@ -265,12 +270,12 @@ defineExpose({
           >
             <template #suffix>
               <el-icon>
-                <Icon name="icon_upload_outlined" />
+                <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" />
+                <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 09a50c4cda..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"></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>
@@ -89,6 +91,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..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"></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 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"></Icon>
+              <Icon name="no_result"
+                ><no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon"
+              /></Icon>
               <br />
               <span>没有找到相关模板</span>
             </div>
@@ -122,6 +124,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..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"></Icon>
+            <Icon name="no_result"
+              ><no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon"
+            /></Icon>
             <br />
             <span>没有找到相关模板</span>
           </div>
@@ -169,6 +171,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..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" />
+          <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" />
+                <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" />
+                <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" />
+        <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"
@@ -183,6 +189,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..62753703c6 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 class="svg-icon" /></Icon>
       </template>
       {{ $t('data_export.download_all') }}
     </el-button>
@@ -405,15 +409,19 @@ defineExpose({
       @click="downLoadAll"
     >
       <template #icon>
-        <Icon name="dv-preview-download" />
+        <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"></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"></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
@@ -428,7 +436,9 @@ 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 class="svg-icon"
+                /></Icon>
               </el-icon>
               <div class="name-content">
                 <div class="fileName">{{ scope.row.fileName }}</div>
@@ -479,7 +489,7 @@ defineExpose({
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="dv-preview-download"></Icon>
+                    <Icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></Icon>
                   </el-icon>
                 </template>
               </el-button>
@@ -488,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>
+                  <Icon name="icon_refresh_outlined"
+                    ><icon_refresh_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-tooltip>
@@ -496,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"></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 5d092788e4..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
           </span>
           <template #dropdown>
@@ -102,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>
+          <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 0408980f40..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
@@ -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,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -286,8 +291,11 @@ const emits = defineEmits(['update:item', 'del'])
               >
                 <el-icon>
                   <Icon
-                    :name="`field_${fieldEnums[ele.deType]}`"
-                    :className="`field-icon-${fieldEnums[ele.deType]}`"
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldEnums[ele.deType]}`"
+                      :is="iconFieldMap[fieldEnums[ele.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>{{ ele.name }}</span>
@@ -440,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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </li>
               </ul>
@@ -451,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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </div>
@@ -460,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>
+        <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 f05c4cb924..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,4 +1,17 @@
 <script lang="tsx" setup>
+import referencePlay from '@/assets/svg/reference-play.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'
+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,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -411,7 +427,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 class="svg-icon" /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.run') }}
@@ -419,7 +435,7 @@ const mousedownDrag = () => {
       <el-button @click="referenceSetting()" style="color: #1f2329" text>
         <template #icon>
           <el-icon>
-            <Icon name="reference-setting"></Icon>
+            <Icon name="reference-setting"><referenceSetting1 class="svg-icon" /></Icon>
           </el-icon>
         </template>
         {{ t('data_set.parameter_settings') }}
@@ -429,7 +445,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 class="svg-icon" /></Icon>
       </el-icon>
     </div>
   </div>
@@ -437,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>
+        <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
       </el-icon>
     </p>
     <div
@@ -457,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 name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
             </el-icon>
           </span>
         </p>
@@ -477,7 +493,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 class="svg-icon" /></Icon>
             </el-icon>
             {{ datasourceTableData.length }}
           </span>
@@ -490,7 +506,9 @@ const mousedownDrag = () => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -523,7 +541,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 class="svg-icon" /></Icon>
               </el-icon>
               <span class="label">{{ datasourceTableData[index].tableName }}</span>
               <span class="name-copy">
@@ -532,7 +550,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 class="svg-icon" /></Icon>
                   </el-icon>
                 </el-tooltip>
 
@@ -546,7 +564,7 @@ const mousedownDrag = () => {
                 >
                   <template #reference>
                     <el-icon class="hover-icon">
-                      <Icon name="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">
@@ -564,11 +582,15 @@ const mousedownDrag = () => {
                           )
                         "
                       >
-                        <Icon name="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>
+                          <Icon name="icon_text-box_outlined"
+                            ><icon_textBox_outlined class="svg-icon"
+                          /></Icon>
                         </el-icon>
                         {{ gridData.length }}
                       </div>
@@ -585,8 +607,11 @@ const mousedownDrag = () => {
                             <div class="flex-align-center icon">
                               <el-icon>
                                 <Icon
-                                  :className="`field-icon-${fieldType[scope.row.deType]}`"
-                                  :name="`field_${fieldType[scope.row.deType]}`"
+                                  ><component
+                                    class="svg-icon"
+                                    :class="`field-icon-${fieldType[scope.row.deType]}`"
+                                    :is="iconFieldMap[fieldType[scope.row.deType]]"
+                                  ></component
                                 ></Icon>
                               </el-icon>
                               {{ scope.row.originName }}
@@ -604,7 +629,9 @@ 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 class="svg-icon"
+                              /></Icon>
                             </el-icon>
                           </template>
                         </el-table-column>
@@ -660,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>
+                  <icon name="icon_play-round_outlined"
+                    ><icon_playRound_outlined class="svg-icon"
+                  /></icon>
                 </el-icon>
                 {{ t('data_set.see_the_results') }}
               </div>
@@ -727,7 +756,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 class="svg-icon" /></Icon>
       </el-icon>
       {{ t('dataset.sql_variable_limit_1') }}<br />
       {{ t('dataset.sql_variable_limit_2') }}<br />
@@ -746,8 +775,11 @@ const mousedownDrag = () => {
             <template v-slot="{ data }">
               <el-icon>
                 <Icon
-                  :className="`field-icon-${getIconName(data.value)}`"
-                  :name="`field_${getIconName(data.value)}`"
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${getIconName(data.value)}`"
+                    :is="iconFieldMap[getIconName(data.value)]"
+                  ></component
                 ></Icon>
               </el-icon>
               <span>{{ data.label }}</span>
@@ -756,8 +788,11 @@ const mousedownDrag = () => {
           <span class="select-svg-icon">
             <el-icon>
               <Icon
-                :className="`field-icon-${getIconName(scope.row.type[0])}`"
-                :name="`field_${getIconName(scope.row.type[0])}`"
+                ><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 0669ea24d7..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
@@ -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
@@ -355,8 +361,11 @@ initFunction()
                   <template #prefix>
                     <el-icon>
                       <Icon
-                        :name="`field_${fieldType[fieldForm.deType]}`"
-                        :className="`field-icon-${fieldType[fieldForm.deType]}`"
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[fieldForm.deType]}`"
+                          :is="iconFieldMap[fieldType[fieldForm.deType]]"
+                        ></component
                       ></Icon>
                     </el-icon>
                   </template>
@@ -369,8 +378,11 @@ initFunction()
                     <span style="display: flex; align-items: center">
                       <el-icon>
                         <Icon
-                          :name="`field_${fieldType[item.value]}`"
-                          :className="`field-icon-${fieldType[item.value]}`"
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[item.value]}`"
+                            :is="iconFieldMap[fieldType[item.value]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -392,7 +404,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 class="svg-icon" /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -417,7 +429,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 class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -425,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>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -441,8 +455,11 @@ initFunction()
               >
                 <el-icon>
                   <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                    ><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>
@@ -462,7 +479,8 @@ initFunction()
                   :class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
                   style="color: #646a73"
                   name="icon_adjustment_outlined"
-                ></Icon>
+                  ><icon_adjustment_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </el-tooltip>
           </div>
@@ -475,21 +493,28 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
                 <el-icon v-else>
                   <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                    ><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>
+                    <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>
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </div>
               </span>
@@ -513,7 +538,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 class="svg-icon" /></Icon>
             </el-icon>
           </el-tooltip>
         </span>
@@ -526,7 +551,9 @@ initFunction()
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_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 982b6813b0..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -336,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>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -355,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"></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 ae0caeb65f..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,15 @@
 <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'
+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 +45,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)
@@ -535,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'
   }
@@ -548,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'
   }
@@ -1078,13 +1089,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 +1119,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..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
@@ -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 class="svg-icon" /></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..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
@@ -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,9 @@ watch(
       >
         <template #prefix>
           <el-icon>
-            <Icon name="icon_search-outline_outlined"></Icon>
+            <Icon name="icon_search-outline_outlined"
+              ><icon_searchOutline_outlined class="svg-icon"
+            /></Icon>
           </el-icon>
         </template>
       </el-input>
@@ -120,8 +124,11 @@ watch(
           <template #default="scope">
             <el-icon>
               <Icon
-                :className="`field-icon-${fieldType[scope.row.deType]}`"
-                :name="`field_${fieldType[scope.row.deType]}`"
+                ><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 7088a737a7..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
           </template>
           {{ t('dataset.add_union_field') }}
@@ -111,8 +120,11 @@ init()
               >
                 <el-icon>
                   <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -122,7 +134,7 @@ init()
             </el-select>
           </span>
           <el-icon>
-            <Icon name="join-join"></Icon>
+            <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
           </el-icon>
           <!--右侧孩子field-->
           <span class="column">
@@ -142,8 +154,11 @@ init()
               >
                 <el-icon>
                   <Icon
-                    :name="`field_${fieldType[item.deType]}`"
-                    :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 <span>
@@ -160,7 +175,9 @@ init()
               @click="removeUnionItem(index)"
             >
               <template #icon>
-                <Icon name="icon_delete-trash_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 d006443b0f..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
@@ -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,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px', marginLeft: '4px' }}>
           {column.title}
@@ -1332,8 +1350,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 +1360,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 class="svg-icon" /></Icon>
         </el-icon>
         <template v-if="showInput">
           <el-input
@@ -1371,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>
+          <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
         </el-icon>
       </p>
       <div
@@ -1392,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 name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
               </el-icon>
             </span>
           </p>
@@ -1413,9 +1431,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 class="svg-icon" :is="getDsIconName({ leaf, type })"></component
                   ></icon>
                 </el-icon>
                 <span v-if="!leaf || extraFlag > -1">{{ name }}</span>
@@ -1434,7 +1451,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 class="svg-icon" /></Icon>
               </el-icon>
               {{ datasourceTableData.length }}
             </span>
@@ -1447,7 +1464,9 @@ const getDsIconName = data => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -1470,7 +1489,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 class="svg-icon" /></Icon>
             </el-icon>
             <span class="label">{{ t('data_set.custom_sql') }}</span>
           </div>
@@ -1495,7 +1514,7 @@ const getDsIconName = data => {
                 @click="setActiveName(datasourceTableData[index])"
               >
                 <el-icon class="icon-color">
-                  <Icon name="reference-table"></Icon>
+                  <Icon name="reference-table"><referenceTable class="svg-icon" /></Icon>
                 </el-icon>
                 <span class="label">{{ datasourceTableData[index].tableName }}</span>
               </div>
@@ -1506,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>
+            <Icon name="icon_warning_colorful"><icon_warning_colorful class="svg-icon" /></Icon>
           </el-icon>
           {{ t('data_set.be_reported_incorrectly') }}
         </div>
@@ -1536,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>
+                    <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                   </el-icon>
                 </template>
                 {{ t('dataset.add_calc_field') }}
@@ -1550,7 +1569,9 @@ const getDsIconName = data => {
               >
                 <template #icon>
                   <el-icon>
-                    <Icon name="icon_refresh_outlined"></Icon>
+                    <Icon name="icon_refresh_outlined"
+                      ><icon_refresh_outlined class="svg-icon"
+                    /></Icon>
                   </el-icon>
                 </template>
                 {{ t('data_set.refresh_data') }}
@@ -1566,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>
+                    <Icon name="icon_expand-right_filled"
+                      ><icon_expandRight_filled class="svg-icon"
+                    /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.dimension') }}
                 </div>
@@ -1575,10 +1598,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 +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>
+                    <Icon name="icon_expand-right_filled"
+                      ><icon_expandRight_filled class="svg-icon"
+                    /></Icon>
                   </ElIcon>
                   &nbsp;{{ t('chart.quota') }}
                 </div>
@@ -1606,10 +1631,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 +1672,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 +1760,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 +1772,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 +1790,11 @@ 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
+                                  class="svg-icon primary-color"
+                                  :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
@@ -1785,7 +1814,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1799,7 +1830,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1809,7 +1842,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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1823,7 +1858,9 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"></Icon>
+                                <Icon name="icon_edit_outlined"
+                                  ><icon_edit_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1899,7 +1936,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 +1948,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 +1966,11 @@ 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
+                                  class="svg-icon green-color"
+                                  :is="iconFieldMap[getIconName(scope.row.deExtractType)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
@@ -1949,7 +1990,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1963,7 +2006,9 @@ 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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1973,7 +2018,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 class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -1987,7 +2034,9 @@ const getDsIconName = data => {
                               @click="handleFieldMore(scope.row, 'editor')"
                             >
                               <template #icon>
-                                <Icon name="icon_edit_outlined"></Icon>
+                                <Icon name="icon_edit_outlined"
+                                  ><icon_edit_outlined class="svg-icon"
+                                /></Icon>
                               </template>
                             </el-button>
                           </template>
@@ -2021,7 +2070,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 +2078,12 @@ 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
+                        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 2dbba88474..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,4 +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_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 { useI18n } from '@/hooks/web/useI18n'
 import {
   ref,
@@ -10,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'
@@ -62,6 +78,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 +218,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[deType]}`
+            }}
+          </Icon>
         </ElIcon>
         {t(`dataset.${fieldType[deType]}`) +
           `${deType === 3 ? '(' + t('dataset.float') + ')' : ''}`}
@@ -239,10 +258,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -590,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'
   }
 ]
@@ -623,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'
     }
   ]
@@ -723,7 +744,7 @@ const getMenuList = (val: boolean) => {
     : [
         {
           label: t('common.copy'),
-          svgName: 'icon_copy_filled',
+          svgName: icon_copy_filled,
           command: 'copy'
         }
       ].concat(menuList)
@@ -766,7 +787,7 @@ const getMenuList = (val: boolean) => {
                   style="margin-right: 20px"
                   @click="handleDatasetTree('folder')"
                 >
-                  <Icon name="dv-new-folder" />
+                  <Icon name="dv-new-folder"><dvNewFolder class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <el-tooltip
@@ -776,7 +797,9 @@ 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 class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -789,25 +812,26 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined" />
+                <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">
               <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 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"
-                ></Icon>
+                  ><dvSortDesc class="svg-icon"
+                /></Icon>
               </el-tooltip>
             </el-icon>
             <template #dropdown>
@@ -845,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"></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>
+                  <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">
@@ -856,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>
+                    <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')"
@@ -885,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>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ t('deDataset.create') + t('auth.dataset') }}</el-button
           >
@@ -903,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>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -914,23 +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>
+                  <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> </template
+                <template #icon>
+                  <Icon name="icon_operation-analysis_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>
+                  <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>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </template>
                 {{ t('visualization.edit') }}
               </el-button>
@@ -996,9 +1027,12 @@ 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
+                              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 6805aa9799..9e003c3fad 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 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 2410405676..ad2bdb6134 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 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>
+      <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 81b3b8d74d..8601de4930 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 class="svg-icon" /></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 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 00811afabf..9e60cd398e 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 class="svg-icon" /></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 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 74d76572eb..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
@@ -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,9 @@ 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 class="svg-icon"
+            /></Icon>
           </el-icon>
           <span class="name">{{ t('datasource.column_info') }}</span>
         </p>
@@ -647,9 +651,12 @@ 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
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[scope.row.deExtractType]}`"
+                          :is="iconFieldMap[fieldType[scope.row.deExtractType]]"
+                        ></component
                       ></Icon>
                     </el-icon>
                   </template>
@@ -661,9 +668,12 @@ 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
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[item.value]}`"
+                            :is="iconFieldMap[fieldType[item.value]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                     </span>
@@ -681,7 +691,9 @@ 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 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 62af9645b3..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="activeName === 'params' ? 8 : 6" v-if="!unShowSelect">
               <el-input
@@ -218,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>
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -229,7 +234,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="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 a4c252b5dd..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="6">
               <el-input
@@ -244,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>
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
                 </template>
               </el-button>
             </el-col>
@@ -255,7 +260,7 @@ const timeFunLists = [
 
     <el-button @click="change" text>
       <template #icon>
-        <icon name="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 a5107a3be1..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
@@ -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 class="svg-icon" /></Icon>
             </el-icon>
             <span :title="name">{{ name }}</span>
           </template>
@@ -368,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>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -387,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"></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 3aa4dc8232..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
@@ -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,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 :name="`${db.type}-ds`"></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 26338d78d8..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,13 @@
 <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'
+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 +24,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: {
@@ -693,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'
   }
 ]
@@ -760,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>
+                <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
               </template>
               {{ t('common.add') }}
             </el-button>
@@ -791,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"></Icon>
+                      <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
                     </el-icon>
 
                     <span @click.stop>
@@ -805,12 +815,14 @@ defineExpose({
                       >
                         <template #reference>
                           <el-icon class="de-delete-icon hover-icon">
-                            <Icon name="de-delete"></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>
+                            <Icon name="icon_warning_filled"
+                              ><icon_warning_filled class="svg-icon"
+                            /></Icon>
                           </el-icon>
                           <div class="tips">
                             {{ t('datasource.delete_this_item') }}
@@ -860,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>
+                    <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
                   </el-icon>
                   <handle-more
                     icon-size="24px"
@@ -888,8 +900,11 @@ defineExpose({
                     <div class="flex-align-center icon">
                       <el-icon>
                         <Icon
-                          :className="`field-icon-${fieldType[scope.row.deType]}`"
-                          :name="`field_${fieldType[scope.row.deType]}`"
+                          ><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] }}
@@ -901,7 +916,9 @@ 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 class="svg-icon"
+                        /></Icon>
                       </template>
                     </el-button>
                   </template>
@@ -1048,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>
+                  <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                 </template>
                 {{ t('datasource.get_schema') }}
               </el-button>
@@ -1081,7 +1098,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 +1184,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..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
@@ -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,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[column.fieldType]}`
+            }}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '100px' }}>
           {column.title}
@@ -483,7 +487,7 @@ defineExpose({
             <template #trigger>
               <el-button secondary>
                 <template #icon>
-                  <Icon name="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 a444747c0d..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
@@ -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 class="svg-icon" /></Icon>
       </el-icon>
     </template>
     <div class="datasource">
@@ -714,7 +717,9 @@ defineExpose({
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined"></Icon>
+                <Icon name="icon_search-outline_outlined"
+                  ><icon_searchOutline_outlined class="svg-icon"
+                /></Icon>
               </el-icon>
             </template>
           </el-input>
@@ -760,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 :name="`${data.type}-ds`"></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 9078198992..f9efc2a3cc 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,12 @@ 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]],
+              className: `svg-icon field-icon-${fieldType[column.deType]}`
+            }}
+          </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
           {column.title}
@@ -336,8 +363,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 +964,7 @@ const getMenuList = (val: boolean) => {
     : [
         {
           label: t('common.copy'),
-          svgName: 'icon_copy_filled',
+          svgName: icon_copy_filled,
           command: 'copy'
         }
       ].concat(menuList)
@@ -975,12 +1002,14 @@ const getMenuList = (val: boolean) => {
                   :style="{ marginRight: '20px' }"
                   @click="handleDatasourceTree('folder')"
                 >
-                  <Icon name="dv-new-folder" />
+                  <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 name="icon_file-add_outlined"
+                    ><icon_fileAdd_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </el-tooltip>
             </div>
@@ -994,25 +1023,26 @@ const getMenuList = (val: boolean) => {
           >
             <template #prefix>
               <el-icon>
-                <Icon name="icon_search-outline_outlined" />
+                <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">
               <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 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"
-                ></Icon>
+                  ><dvSortDesc class="svg-icon opt-icon"
+                /></Icon>
               </el-tooltip>
             </el-icon>
             <template #dropdown>
@@ -1048,7 +1078,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 class="svg-icon" :is="getDsIconName(data)"></component
+                  ></Icon>
                 </el-icon>
                 <span
                   :title="node.label"
@@ -1061,7 +1093,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 +1102,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 class="svg-icon" /></icon>
                   </el-icon>
                   <handle-more
                     @handle-command="
@@ -1097,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>
+              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
             {{ t('datasource.create') }}</el-button
           >
@@ -1107,9 +1139,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 class="svg-icon" :is="iconDatasourceMap[nodeInfo.type]"></component
               ></Icon>
             </el-icon>
             <span :title="nodeInfo.name" class="name ellipsis">
@@ -1122,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>
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
                 </el-icon>
               </template>
               <dataset-detail
@@ -1133,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>
+                  <Icon name="icon_dataset_outlined"
+                    ><icon_dataset_outlined class="svg-icon"
+                  /></Icon>
                 </template>
                 新建数据集
               </el-button>
@@ -1160,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>
+                        <Icon name="icon_edit_outlined"
+                          ><icon_edit_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       替换数据
                     </el-button>
@@ -1181,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>
+                        <Icon name="icon_new-item_outlined"
+                          ><icon_newItem_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                       追加数据
                     </el-button>
@@ -1190,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>
+                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                 </template>
                 编辑
               </el-button>
@@ -1215,7 +1252,9 @@ const getMenuList = (val: boolean) => {
             >
               <template #prefix>
                 <el-icon>
-                  <Icon name="icon_search-outline_outlined"></Icon>
+                  <Icon name="icon_search-outline_outlined"
+                    ><icon_searchOutline_outlined class="svg-icon"
+                  /></Icon>
                 </el-icon>
               </template>
             </el-input>
@@ -1243,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>
+                        <icon name="icon_succeed_filled"
+                          ><icon_succeed_filled class="svg-icon"
+                        /></icon>
                       </el-icon>
                       {{ t('dataset.completed') }}
                     </template>
@@ -1252,7 +1293,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 class="svg-icon field-icon-red"
+                        /></icon>
                       </el-icon>
                       {{ t('dataset.error') }}
                     </template>
@@ -1283,14 +1326,18 @@ const getMenuList = (val: boolean) => {
                       v-permission="['dataset']"
                     >
                       <template #icon>
-                        <Icon name="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>
+                        <Icon name="icon_describe_outlined"
+                          ><icon_describe_outlined class="svg-icon"
+                        /></Icon>
                       </template>
                     </el-button>
                   </el-tooltip>
@@ -1382,7 +1429,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 +1462,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 +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>
+                        <icon name="icon_replace_outlined"
+                          ><icon_replace_outlined class="svg-icon"
+                        /></icon>
                       </template>
                     </el-button>
                   </el-col>
@@ -1496,7 +1551,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 class="svg-icon" /></icon>
               </template>
               全部更新
             </el-button>
@@ -1529,7 +1584,9 @@ 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 class="svg-icon"
+                /></icon>
               </template>
               {{ t('dataset.update_records') }}
             </el-button>
@@ -1614,9 +1671,12 @@ 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
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[scope.row.deType]}`"
+                      :is="iconFieldMap[fieldType[scope.row.deType]]"
+                    ></component
                   ></icon>
                 </el-icon>
                 {{
@@ -1684,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>
+                  <icon name="icon_succeed_filled"><icon_succeed_filled class="svg-icon" /></icon>
                 </el-icon>
                 {{ t('dataset.completed') }}
               </template>
@@ -1696,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>
+                  <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"></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 e99bd09cf7..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
@@ -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 class="svg-icon" /></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 class="svg-icon" /></Icon>
         </ElIcon>
         &nbsp;维度
       </div>
@@ -149,8 +152,11 @@ const handleTabClick = () => {
             <div class="filter-db-row">
               <el-icon>
                 <Icon
-                  :name="`field_${fieldType[element.deType]}`"
-                  :className="`field-icon-${fieldType[element.deType]}`"
+                  ><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>
@@ -162,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>
+          <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
         </ElIcon>
         &nbsp;指标
       </div>
@@ -178,6 +184,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 +198,7 @@ const handleTabClick = () => {
     <div class="name">
       文本下拉组件
       <el-icon>
-        <Icon name="icon_view-list_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 35ebfa5ed4..528307006e 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,9 @@ const getEmptyDesc = (): string => {
         >
           <template #prefix>
             <el-icon>
-              <Icon name="icon_search-outline_outlined"></Icon>
+              <Icon name="icon_search-outline_outlined"
+                ><icon_searchOutline_outlined class="svg-icon"
+              /></Icon>
             </el-icon>
           </template>
         </el-input>
@@ -317,10 +328,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 +344,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 +390,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 class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
               <ShareHandler
@@ -403,7 +416,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 class="svg-icon" /></Icon>
                 </el-icon>
               </el-tooltip>
             </template>
@@ -416,7 +429,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 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 595dfcabc2..c13cb1fed3 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 class="svg-icon" /></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 class="svg-icon" /></Icon>
             </el-icon>
             <span class="name">{{ t('work_branch.new_using_template') }}</span>
           </div>
@@ -399,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"></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>