使用icon-park替换iconfont

babel.config.js

@@ -10,6 +10,16 @@ module.exports = {
         libraryDirectory: 'es',
         style: true,
       },
+      'antdv',
+    ],
+    [
+      'import',
+      {
+        libraryName: '@icon-park/vue-next',
+        libraryDirectory: 'es/icons',
+        camel2DashComponentName: false,
+      },
+      'iconPark',
     ],
   ],
 }

package.json

@@ -9,8 +9,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@icon-park/vue-next": "^1.2.1",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^2.0.0-rc.3",
+    "chartist": "^0.11.4",
     "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
@@ -34,6 +36,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/chartist": "^0.11.0",
     "@types/clipboard": "^2.0.1",
     "@types/crypto-js": "^4.0.1",
     "@types/jest": "^24.0.19",

public/index.html

@@ -14,7 +14,5 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-
-    <script src="//at.alicdn.com/t/font_2317509_gtjm587ludg.js"></script>
   </body>
 </html>

src/components/IconFont.vue

@@ -1,28 +0,0 @@
-<template>
-  <svg class="icon-font" aria-hidden="true">
-    <use :xlink:href="`#${type}`"></use>
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'icon-font',
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.icon-font {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-  outline: 0;
-}
-</style>

src/components/WritingBoard.vue

@@ -16,7 +16,7 @@
         color: color,
       }"
       v-if="mouseInCanvas && model === 'pen'"
-    ><IconFont class="icon" :style="{ fontSize: '36px' }" type="icon-pen" /></div>
+    ><IconWrite class="icon" size="36" /></div>
     
     <div 
       class="eraser"
@@ -27,7 +27,7 @@
         height: rubberSize + 'px',
       }"
       v-if="mouseInCanvas && model === 'eraser'"
-    ><IconFont class="icon" :style="{ fontSize: rubberSize * 0.6 + 'px' }" type="icon-eraser" /></div>
+    ><IconClearFormat class="icon" :size="rubberSize * 0.6" /></div>
   </div>
 </template>
 

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 
+import '@icon-park/vue-next/styles/index.css'
 import 'prosemirror-view/style/prosemirror.css'
 import '@/assets/styles/prosemirror.scss'
 import '@/assets/styles/global.scss'
@@ -10,8 +11,8 @@ import 'animate.css'
 
 import Contextmenu from './plugins/contextmenu'
 import ClickOutside from './plugins/clickOutside'
+import IconPark from './plugins/iconPark'
 
-import IconFont from '@/components/IconFont.vue'
 import FileInput from '@/components/FileInput.vue'
 import SvgWrapper from '@/components/SvgWrapper.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
@@ -53,8 +54,8 @@ app.component('Modal', Modal)
 
 app.directive('contextmenu', Contextmenu)
 app.directive('click-outside', ClickOutside)
+app.use(IconPark)
 
-app.component('IconFont', IconFont)
 app.component('FileInput', FileInput)
 app.component('SvgWrapper', SvgWrapper)
 app.component('CheckboxButton', CheckboxButton)

src/plugins/iconPark.ts

@@ -0,0 +1,225 @@
+import { App } from 'vue'
+import {
+  Home,
+  PlayOne,
+  Lock,
+  Unlock,
+  Search,
+  Delete,
+  Slide,
+  SettingOne,
+  Clear,
+  Format,
+  Picture,
+  FullScreen,
+  OffScreen,
+  LinkOne,
+  List,
+  OrderedList,
+  Drag,
+  Formula,
+  Helpcenter,
+  SplitCells,
+  MergeCells,
+  FlipVertically,
+  FlipHorizontally,
+  FontSize,
+  Code,
+  TextBold,
+  TextItalic,
+  TextUnderline,
+  Strikethrough,
+  Edit,
+  Quote,
+  EnterTheKeyboard,
+  Copy,
+  Clipboard,
+  Find,
+  BackgroundColor,
+  Group,
+  Ungroup,
+  FullSelection,
+  ClearFormat,
+  Back,
+  Next,
+  Fullwidth,
+  GridFour,
+  AlignTop,
+  AlignLeft,
+  AlignRight,
+  AlignBottom,
+  AlignVertically,
+  AlignHorizontally,
+  BringToFront,
+  SendToBack,
+  AlignTextLeft,
+  AlignTextRight,
+  AlignTextCenter,
+  RowHeight,
+  More,
+  Write,
+  InsertTable,
+  CuttingOne,
+  AddThree,
+  AddText,
+  Fill,
+  Tailoring,
+  Newlybuild,
+  Effects,
+  ColorFilter,
+  Up,
+  Down,
+  Left,
+  Right,
+  Plus,
+  Minus,
+  Check,
+  Close,
+  Connection,
+  BringToFrontOne,
+  SentToBack,
+  Github,
+  ChartRing,
+  ChartLine,
+  ChartHistogramOne,
+  ChartHistogram,
+  ChartProportion,
+  ChartScatter,
+  PentagonOne,
+  PageTemplate,
+  Text,
+  Rotate,
+  LeftC,
+  RightC,
+  Platte,
+  UpOne,
+  DownOne,
+} from '@icon-park/vue-next'
+
+export default {
+  install(app: App) {
+    // 插入元素
+    app.component('IconFontSize', FontSize)
+    app.component('IconPicture', Picture)
+    app.component('IconPentagonOne', PentagonOne)
+    app.component('IconConnection', Connection)
+    app.component('IconInsertTable', InsertTable)
+    app.component('IconFormula', Formula)
+
+    // 剪贴板
+    app.component('IconCopy', Copy)
+    app.component('IconClipboard', Clipboard)
+    app.component('IconCuttingOne', CuttingOne)
+
+    // 锁定与解锁
+    app.component('IconLock', Lock)
+    app.component('IconUnlock', Unlock)
+
+    // 全屏
+    app.component('IconFullScreen', FullScreen)
+    app.component('IconOffScreen', OffScreen)
+
+    // 撤销重做
+    app.component('IconBack', Back)
+    app.component('IconNext', Next)    
+    
+    // 对齐
+    app.component('IconAlignTop', AlignTop)
+    app.component('IconAlignLeft', AlignLeft)
+    app.component('IconAlignRight', AlignRight)
+    app.component('IconAlignBottom', AlignBottom)
+    app.component('IconAlignVertically', AlignVertically)
+    app.component('IconAlignHorizontally', AlignHorizontally)
+
+    // 层级
+    app.component('IconBringToFront', BringToFront)
+    app.component('IconSentToBack', SentToBack)
+    app.component('IconBringToFrontOne', BringToFrontOne)
+    app.component('IconSendToBack', SendToBack)
+
+    // 组合
+    app.component('IconGroup', Group)
+    app.component('IconUngroup', Ungroup)
+
+    // 通用元素编辑
+    app.component('IconFill', Fill)
+    app.component('IconBackgroundColor', BackgroundColor)
+    app.component('IconPlatte', Platte)
+
+    // 表格编辑
+    app.component('IconSplitCells', SplitCells)
+    app.component('IconMergeCells', MergeCells)
+    
+    // 图片编辑
+    app.component('IconTailoring', Tailoring)
+    app.component('IconColorFilter', ColorFilter)
+    app.component('IconFlipVertically', FlipVertically)
+    app.component('IconFlipHorizontally', FlipHorizontally)
+
+    // 文字编辑
+    app.component('IconText', Text)
+    app.component('IconAddText', AddText)
+    app.component('IconAlignTextLeft', AlignTextLeft)
+    app.component('IconAlignTextRight', AlignTextRight)
+    app.component('IconAlignTextCenter', AlignTextCenter)
+    app.component('IconRowHeight', RowHeight)
+    app.component('IconFullwidth', Fullwidth)
+    app.component('IconCode', Code)
+    app.component('IconTextBold', TextBold)
+    app.component('IconTextItalic', TextItalic)
+    app.component('IconTextUnderline', TextUnderline)
+    app.component('IconStrikethrough', Strikethrough)
+    app.component('IconEdit', Edit)
+    app.component('IconQuote', Quote)
+    app.component('IconList', List)
+    app.component('IconOrderedList', OrderedList)
+    app.component('IconUpOne', UpOne)
+    app.component('IconDownOne', DownOne)
+    app.component('IconFormat', Format)
+
+    // 箭头与符号
+    app.component('IconUp', Up)
+    app.component('IconDown', Down)
+    app.component('IconLeft', Left)
+    app.component('IconRight', Right)
+    app.component('IconLeftC', LeftC)
+    app.component('IconRightC', RightC)
+    app.component('IconPlus', Plus)
+    app.component('IconMinus', Minus)
+    app.component('IconCheck', Check)
+    app.component('IconClose', Close)
+    
+    // 图表
+    app.component('IconChartRing', ChartRing)
+    app.component('IconChartLine', ChartLine)
+    app.component('IconChartHistogramOne', ChartHistogramOne)
+    app.component('IconChartHistogram', ChartHistogram)
+    app.component('IconChartProportion', ChartProportion)
+    app.component('IconChartScatter', ChartScatter)
+
+    // 其他
+    app.component('IconHome', Home)
+    app.component('IconPlayOne', PlayOne)
+    app.component('IconSearch', Search)
+    app.component('IconDelete', Delete)
+    app.component('IconSlide', Slide)
+    app.component('IconSettingOne', SettingOne)
+    app.component('IconClear', Clear)
+    app.component('IconLinkOne', LinkOne)
+    app.component('IconDrag', Drag)
+    app.component('IconHelpcenter', Helpcenter)
+    app.component('IconEnterTheKeyboard', EnterTheKeyboard)
+    app.component('IconFind', Find)
+    app.component('IconFullSelection', FullSelection)
+    app.component('IconClearFormat', ClearFormat)
+    app.component('IconGridFour', GridFour)
+    app.component('IconPageTemplate', PageTemplate)
+    app.component('IconGithub', Github)
+    app.component('IconMore', More)
+    app.component('IconWrite', Write)
+    app.component('IconAddThree', AddThree)
+    app.component('IconNewlybuild', Newlybuild)
+    app.component('IconEffects', Effects)
+    app.component('IconRotate', Rotate)
+  }
+}

src/views/Editor/CanvasTool/index.vue

@@ -2,20 +2,20 @@
   <div class="canvas-tool">
     <div class="left-handler">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="撤销">
-        <IconFont type="icon-undo" class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
+        <IconBack class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="重做">
-        <IconFont type="icon-redo" class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
+        <IconNext class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
       </Tooltip>
     </div>
 
     <div class="add-element-handler">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
-        <IconFont type="icon-text" class="handler-item" @click="drawText()" />
+        <IconFontSize class="handler-item" @click="drawText()" />
       </Tooltip>
       <FileInput @change="files => insertImageElement(files)">
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
-          <IconFont type="icon-image" class="handler-item" />
+          <IconPicture class="handler-item" />
         </Tooltip>
       </FileInput>
       <Popover trigger="click" v-model:visible="shapePoolVisible">
@@ -23,7 +23,7 @@
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
-          <IconFont type="icon-shape" class="handler-item" />
+          <IconPentagonOne class="handler-item" />
         </Tooltip>
       </Popover>
       <Popover trigger="click" v-model:visible="linePoolVisible">
@@ -31,21 +31,24 @@
           <LinePool @select="line => drawLine(line)" />
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条">
-          <IconFont type="icon-line" class="handler-item" />
+          <IconConnection class="handler-item" />
         </Tooltip>
       </Popover>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格">
-        <IconFont type="icon-table" class="handler-item" />
+        <IconInsertTable class="handler-item" />
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
-        <IconFont type="icon-piechart" class="handler-item" />
+        <IconChartProportion class="handler-item" />
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式">
+        <IconFormula class="handler-item" />
       </Tooltip>
     </div>
 
     <div class="right-handler">
-      <IconFont type="icon-minus" class="handler-item viewport-size" @click="scaleCanvas('-')" />
+      <IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
       <span class="text">{{canvasScalePercentage}}</span>
-      <IconFont type="icon-plus" class="handler-item viewport-size" @click="scaleCanvas('+')" />
+      <IconPlus class="handler-item viewport-size" @click="scaleCanvas('+')" />
     </div>
   </div>
 </template>

src/views/Editor/EditorHeader/index.vue

@@ -10,7 +10,7 @@
 
     <div class="right">
       <div class="menu-item icon">
-        <IconFont type="icon-github-fill" />
+        <IconGithub />
       </div>
     </div>
   </div>

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -45,10 +45,10 @@
           <div class="text">【{{element.elType}}】{{element.animationType}}</div>
           <div class="handler">
             <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
-              <IconFont type="icon-play-circle" class="handler-btn" @click="runAnimation(element.elId, element.type)" />
+              <IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.type)" />
             </Tooltip>
             <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
-              <IconFont type="icon-delete" class="handler-btn" @click="deleteAnimation(element.elId)" />
+              <IconDelete class="handler-btn" @click="deleteAnimation(element.elId)" />
             </Tooltip>
           </div>
         </div>

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -2,38 +2,38 @@
   <div class="element-positopn-panel">
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconFont type="icon-layer-top" /></Button>
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconFont type="icon-layer-bottom" /></Button>
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconFont type="icon-layer-up" /></Button>
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconFont type="icon-layer-down" /></Button>
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack /></Button>
       </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconFont type="icon-align-left" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
-        <Button style="flex: 1;" @click="alignElementToCanvas('horizontal')"><IconFont type="icon-align-vertical-center" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('horizontal')"><IconAlignVertically /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas('right')"><IconFont type="icon-align-right" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('right')"><IconAlignRight /></Button>
       </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas('top')"><IconFont type="icon-align-top" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('top')"><IconAlignTop /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
-        <Button style="flex: 1;" @click="alignElementToCanvas('vertical')"><IconFont type="icon-align-horizontal-center" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('vertical')"><IconAlignHorizontally /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas('bottom')"><IconFont type="icon-align-bottom" /></Button>
+        <Button style="flex: 1;" @click="alignElementToCanvas('bottom')"><IconAlignBottom /></Button>
       </Tooltip>
     </ButtonGroup>
 
@@ -75,10 +75,10 @@
         />
         <template v-if="['image', 'shape'].includes(handleElement.type)">
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
-            <IconFont type="icon-lock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
+            <IconLock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
           </Tooltip>
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
-            <IconFont type="icon-unlock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
+            <IconUnlock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
           </Tooltip>
         </template>
         <div style="flex: 1;" v-else></div>
@@ -106,10 +106,17 @@
       <div class="row">
         <div style="flex: 3;">旋转：</div>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
-          <IconFont type="icon-rotate-left" class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
+          <IconRotate class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
-          <IconFont type="icon-rotate-right" class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
+          <IconRotate 
+            class="icon-btn" 
+            @click="updateRotate45('+')" 
+            :style="{
+              flex: 2,
+              transform: 'rotateY(180deg)',
+            }" 
+          />
         </Tooltip>
         <div style="flex: 1;"></div>
         <InputNumber 

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -35,7 +35,7 @@
             </template>
           </div>
         </template>
-        <Button class="no-padding" style="flex: 1;"><IconFont type="icon-down" /></Button>
+        <Button class="no-padding" style="flex: 1;"><IconDown /></Button>
       </Popover>
     </ButtonGroup>
 

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -6,6 +6,7 @@
         :value="richTextAttrs.fontname"
         @change="value => emitRichTextCommand('fontname', value)"
       >
+        <template #suffixIcon><IconFontSize /></template>
         <SelectOption v-for="font in availableFonts" :key="font.en" :value="font.en">
           <span :style="{ fontFamily: font.en }">{{font.zh}}</span>
         </SelectOption>
@@ -15,6 +16,7 @@
         :value="richTextAttrs.fontsize"
         @change="value => emitRichTextCommand('fontsize', value)"
       >
+        <template #suffixIcon><IconAddText /></template>
         <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
           {{fontsize}}
         </SelectOption>
@@ -31,7 +33,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
           <Button class="text-color-btn" style="flex: 1;">
-            <IconFont type="icon-font-colors" />
+            <IconText />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
           </Button>
         </Tooltip>
@@ -45,7 +47,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
           <Button class="text-color-btn" style="flex: 1;">
-            <IconFont type="icon-highlight" />
+            <IconBackgroundColor />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
           </Button>
         </Tooltip>
@@ -59,7 +61,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
           <Button class="text-color-btn" style="flex: 1;">
-            <IconFont type="icon-bg-colors" />
+            <IconFill />
             <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
           </Button>
         </Tooltip>
@@ -72,28 +74,28 @@
           style="flex: 1;"
           :checked="richTextAttrs.bold"
           @click="emitRichTextCommand('bold')"
-        ><IconFont type="icon-bold" /></CheckboxButton>
+        ><IconTextBold /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.em"
           @click="emitRichTextCommand('em')"
-        ><IconFont type="icon-italic" /></CheckboxButton>
+        ><IconTextItalic /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.underline"
           @click="emitRichTextCommand('underline')"
-        ><IconFont type="icon-underline" /></CheckboxButton>
+        ><IconTextUnderline /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.strikethrough"
           @click="emitRichTextCommand('strikethrough')"
-        ><IconFont type="icon-strikethrough" /></CheckboxButton>
+        ><IconStrikethrough /></CheckboxButton>
       </Tooltip>
     </CheckboxButtonGroup>
 
@@ -103,34 +105,34 @@
           style="flex: 1;"
           :checked="richTextAttrs.superscript"
           @click="emitRichTextCommand('superscript')"
-        ><IconFont type="icon-superscript" /></CheckboxButton>
+        ><IconUpOne /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下标">
         <CheckboxButton
           style="flex: 1;"
           :checked="richTextAttrs.subscript"
           @click="emitRichTextCommand('subscript')"
-        ><IconFont type="icon-subscript" /></CheckboxButton>
+        ><IconDownOne /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="行内代码">
         <CheckboxButton
           style="flex: 1;"
           :checked="richTextAttrs.code"
           @click="emitRichTextCommand('code')"
-        ><IconFont type="icon-code" /></CheckboxButton>
+        ><IconCode /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="引用">
         <CheckboxButton
           style="flex: 1;"
           :checked="richTextAttrs.blockquote"
           @click="emitRichTextCommand('blockquote')"
-        ><IconFont type="icon-blockquote" /></CheckboxButton>
+        ><IconQuote /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清除格式">
         <CheckboxButton
           style="flex: 1;"
           @click="emitRichTextCommand('clear')"
-        ><IconFont type="icon-clear" /></CheckboxButton>
+        ><IconFormat /></CheckboxButton>
       </Tooltip>
     </CheckboxButtonGroup>
 
@@ -143,13 +145,13 @@
       @change="e => emitRichTextCommand('align', e.target.value)"
     >
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <RadioButton value="left" style="flex: 1;"><IconFont type="icon-text-align-left" /></RadioButton>
+        <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-        <RadioButton value="center" style="flex: 1;"><IconFont type="icon-text-align-center" /></RadioButton>
+        <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <RadioButton value="right" style="flex: 1;"><IconFont type="icon-text-align-right" /></RadioButton>
+        <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
       </Tooltip>
     </RadioGroup>
 
@@ -159,14 +161,14 @@
           style="flex: 1;" 
           :checked="richTextAttrs.bulletList"
           @click="emitRichTextCommand('bulletList')"
-        ><IconFont type="icon-unorderedlist" /></CheckboxButton>
+        ><IconList /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
         <CheckboxButton 
           style="flex: 1;" 
           :checked="richTextAttrs.orderedList"
           @click="emitRichTextCommand('orderedList')"
-        ><IconFont type="icon-orderedlist" /></CheckboxButton>
+        ><IconOrderedList /></CheckboxButton>
       </Tooltip>
     </CheckboxButtonGroup>
 
@@ -175,14 +177,14 @@
     <div class="row">
       <div style="flex: 2;">行间距：</div>
       <Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
-        <template #suffixIcon><IconFont type="icon-column-height" /></template>
+        <template #suffixIcon><IconRowHeight /></template>
         <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
       </Select>
     </div>
     <div class="row">
       <div style="flex: 2;">字间距：</div>
       <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
-        <template #suffixIcon><IconFont type="icon-column-width" /></template>
+        <template #suffixIcon><IconFullwidth /></template>
         <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
       </Select>
     </div>

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -2,32 +2,32 @@
   <div class="multi-position-panel">
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('left')"><IconFont type="icon-align-left" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('left')"><IconAlignLeft /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
-        <Button style="flex: 1;" @click="alignActiveElement('horizontal')"><IconFont type="icon-align-vertical-center" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('horizontal')"><IconAlignVertically /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('right')"><IconFont type="icon-align-right" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('right')"><IconAlignRight /></Button>
       </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('top')"><IconFont type="icon-align-top" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('top')"><IconAlignTop /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
-        <Button style="flex: 1;" @click="alignActiveElement('vertical')"><IconFont type="icon-align-horizontal-center" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('vertical')"><IconAlignHorizontally /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('bottom')"><IconFont type="icon-align-bottom" /></Button>
+        <Button style="flex: 1;" @click="alignActiveElement('bottom')"><IconAlignBottom /></Button>
       </Tooltip>
     </ButtonGroup>
 
     <Divider />
 
     <ButtonGroup class="row">
-      <Button :disabled="!canCombine" @click="combineElements()" style="flex: 1;"><IconFont type="icon-group" />组合</Button>
-      <Button :disabled="canCombine" @click="uncombineElements()" style="flex: 1;"><IconFont type="icon-ungroup" />取消组合</Button>
+      <Button :disabled="!canCombine" @click="combineElements()" style="flex: 1;"><IconGroup style="margin-right: 3px;" />组合</Button>
+      <Button :disabled="canCombine" @click="uncombineElements()" style="flex: 1;"><IconUngroup style="margin-right: 3px;" />取消组合</Button>
     </ButtonGroup>
   </div>
 </template>

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -36,7 +36,7 @@
       <FileInput @change="files => uploadBackgroundImage(files)">
         <div class="background-image">
           <div class="content" :style="{ backgroundImage: `url(${background.value})` }">
-            <IconFont type="icon-plus" />
+            <IconPlus />
           </div>
         </div>
       </FileInput>

src/views/Editor/Toolbar/common/ColorButton.vue

@@ -1,7 +1,7 @@
 <template>
   <Button class="color-btn">
     <div class="color-block" :style="{ backgroundColor: color }"></div>
-    <IconFont type="icon-down" class="color-btn-icon" />
+    <IconPlatte class="color-btn-icon" />
   </Button>
 </template>
 
@@ -29,7 +29,7 @@ export default {
   margin-left: 8px;
   flex: 1;
 }
-svg.color-btn-icon {
+.color-btn-icon {
   width: 30px;
   font-size: 12px;
   margin-top: 2px;

src/views/Screen/index.vue

@@ -45,14 +45,14 @@
     </Modal>
 
     <div class="tools">
-      <IconFont class="tool-btn" type="icon-left-circle" @click="execPrev()" />
-      <IconFont class="tool-btn" type="icon-right-circle" @click="execNext()" />
-      <IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" />
+      <IconLeftC class="tool-btn" @click="execPrev()" />
+      <IconRightC class="tool-btn" @click="execNext()" />
+      <IconSearch class="tool-btn" @click="slideThumbnailModelVisible = true" />
       <Popover trigger="click" v-model:visible="writingBoardToolVisible">
         <template #content>
           <WritingBoardTool @close="writingBoardToolVisible = false" />
         </template>
-        <IconFont class="tool-btn" type="icon-edit" />
+        <IconWrite class="tool-btn" />
       </Popover>
     </div>
   </div>