update

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^5.1.8",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^2.0.0-rc.3",
     "clipboard": "^2.0.6",

src/components/FileInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-input" @click="handleClick()">
+  <div class="file-input" @click="handleClick()">
     <slot></slot>
     <input 
       class="file-input"
@@ -16,7 +16,7 @@
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
-  name: 'upload-input',
+  name: 'file-input',
   props: {
     accept: {
       type: String,

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">
-.icon-font {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-  outline: none;
-}
-</style>

src/main.ts

@@ -7,12 +7,10 @@ import '@/assets/styles/prosemirror.scss'
 import '@/assets/styles/global.scss'
 import 'animate.css'
 
-import IconFont from '@/components/IconFont.vue'
 import contextmenu from './plugins/contextmenu'
 import clickOutside from './plugins/clickOutside'
 
 const app = createApp(App)
-app.component('IconFont', IconFont)
 app.use(contextmenu)
 app.use(clickOutside)
 app.use(store)

src/views/Editor/CanvasTool/index.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <IconFont class="handler-item" :class="{ 'disable': !canUndo }" type="icon-undo" @click="undo()" />
+      <UndoOutlined class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
-      <IconFont class="handler-item" :class="{ 'disable': !canRedo }" type="icon-redo" @click="redo()" />
+      <RedoOutlined class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
     </div>
 
     <div class="add-element-handler">
-      <IconFont class="handler-item" type="icon-font-size" @click="createElement('text')" />
+      <FontSizeOutlined class="handler-item" @click="createElement('text')" />
-      <UploadInput @change="files => insertImageElement(files)">
+      <FileInput @change="files => insertImageElement(files)">
-        <IconFont class="handler-item" type="icon-image" />
+        <PictureOutlined class="handler-item" />
-      </UploadInput>
+      </FileInput>
-      <IconFont class="handler-item" type="icon-star" @click="createElement('shape')" />
+      <StarOutlined class="handler-item" @click="createElement('shape')" />
-      <IconFont class="handler-item" type="icon-line" @click="createElement('line')" />
+      <LineOutlined class="handler-item" @click="createElement('line')" />
-      <IconFont class="handler-item" type="icon-table" />
+      <TableOutlined class="handler-item" />
-      <IconFont class="handler-item" type="icon-piechart" />
+      <PieChartOutlined class="handler-item" />
     </div>
 
     <div class="right-handler">
-      <IconFont class="handler-item viewport-size" type="icon-minus" @click="scaleCanvas('-')" />
+      <MinusOutlined class="handler-item viewport-size" @click="scaleCanvas('-')" />
       <span class="text">{{canvasScalePercentage}}</span>
-      <IconFont class="handler-item viewport-size" type="icon-plus" @click="scaleCanvas('+')" />
+      <PlusOutlined class="handler-item viewport-size" @click="scaleCanvas('+')" />
     </div>
   </div>
 </template>
@@ -33,12 +33,34 @@ import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useCreateElement from '@/hooks/useCreateElement'
 
-import UploadInput from '@/components/UploadInput.vue'
+import FileInput from '@/components/FileInput.vue'
+import {
+  UndoOutlined,
+  RedoOutlined,
+  FontSizeOutlined,
+  PictureOutlined,
+  StarOutlined,
+  LineOutlined,
+  TableOutlined,
+  PieChartOutlined,
+  MinusOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'canvas-tool',
   components: {
-    UploadInput,
+    FileInput,
+    UndoOutlined,
+    RedoOutlined,
+    FontSizeOutlined,
+    PictureOutlined,
+    StarOutlined,
+    LineOutlined,
+    TableOutlined,
+    PieChartOutlined,
+    MinusOutlined,
+    PlusOutlined,
   },
   setup() {
     const store = useStore<State>()

src/views/Editor/EditorHeader/index.vue

@@ -11,7 +11,7 @@
 
     <div class="right">
       <div class="menu-item icon">
-        <IconFont class="icon" type="icon-github-fill" />
+        <GithubOutlined />
       </div>
     </div>
   </div>
@@ -19,9 +19,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { GithubOutlined } from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'editor-header',
+  components: {
+    GithubOutlined,
+  },
 })
 </script>
 
@@ -45,7 +49,7 @@ export default defineComponent({
   margin: 0 10px;
   cursor: pointer;
 
-  .icon {
+  &.icon {
     font-size: 20px;
     color: #666;
   }