Use vue-fontawesome to show icons

package.json

@@ -19,7 +19,9 @@
     "test-dist": "hs dist"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.1.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.15",
+    "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "@fortawesome/vue-fontawesome": "^0.1.6",
     "axios": "^0.18.0",
     "codemirror": "^5.39.0",
     "global": "^4.3.2",

src/MarkdownPalettes.vue

@@ -17,8 +17,14 @@
                         unselectable="on"
                         @click="toolbarAction(item)">
                         <i
-                            :class="['fa', ensureValue(item.icon)]"
-                            unselectable="on">{{ ensureValue(item.content) }}</i>
+                            v-if="item.hasOwnProperty('class')"
+                            :class="ensureValue(item.class)"
+                            unselectable="on"
+                        >{{ ensureValue(item.content) }}</i>
+                        <font-awesome-icon
+                            v-else-if="item.hasOwnProperty('icon')"
+                            :icon="ensureValue(item.icon)"
+                        />
                     </a>
                 </li>
             </ul>
@@ -204,11 +210,21 @@
         margin: 0 5px
         height: 65%
         border-right: 1px solid #ddd
+    .mp-icon-header
+        text-align center
+        display block
+        padding 5px 0
+        font-weight 900
+        -moz-osx-font-smoothing grayscale
+        -webkit-font-smoothing antialiased
+        font-style normal
+        font-variant normal
+        text-rendering auto
+        line-height 1
 </style>
 
 <script>
-import '@fortawesome/fontawesome-free/css/solid.css'
-import '@fortawesome/fontawesome-free/css/fontawesome.css'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import Dialog from './components/Dialog/Dialog.vue'
 import PreviewArea from './components/PreviewArea.js'
@@ -225,7 +241,7 @@ import { getText } from './utils/i18n'
 
 export default {
     name: 'markdown-palettes',
-    components: { 'editor-dialog': Dialog, PreviewArea },
+    components: { FontAwesomeIcon, 'editor-dialog': Dialog, PreviewArea },
     mixins: [InputAreaMixin, PreviewAreaMixin, ToolbarMixin, ActionMixin],
     props: {
         value: {

src/components/ToolBarBtns/btn-bold.js

@@ -1,6 +1,8 @@
+import { faBold } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'bold',
-    icon: 'fa-bold',
+    icon: faBold,
     title: '粗体',
     action: {
         insert: ['**', '**']

src/components/ToolBarBtns/btn-code.js

@@ -1,6 +1,8 @@
+import { faCode } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'img',
-    icon: 'fa-code',
+    icon: faCode,
     title: '插入代码',
     action () {
         const selection = this.editor.getSelection()

src/components/ToolBarBtns/btn-fullscreen.js

@@ -1,6 +1,8 @@
+import { faExpandArrowsAlt } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'fullScreen',
-    icon: 'fa-expand-arrows-alt',
+    icon: faExpandArrowsAlt,
     title () { return this.fullScreen ? '取消全屏' : '全屏' },
     action: {
         event: 'fullScreen'

src/components/ToolBarBtns/btn-header.js

@@ -1,7 +1,7 @@
 export default function headerFactory (level) {
     return {
         name: 'h' + level,
-        icon: 'icon-blold',
+        class: ['mp-icon-header'],
         content: 'H' + level,
         title: level + '级标题',
         action () {

src/components/ToolBarBtns/btn-hide.js

@@ -1,6 +1,8 @@
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'hide',
-    icon () { return this.previewDisplay === 'hide' ? 'fa-eye-slash' : 'fa-eye' },
+    icon () { return this.previewDisplay === 'hide' ? faEyeSlash : faEye },
     title () { return this.previewDisplay === 'hide' ? '显示预览' : '隐藏预览' },
     action: {
         event: 'hide'

src/components/ToolBarBtns/btn-hr.js

@@ -1,6 +1,8 @@
+import { faMinus } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'hr',
-    icon: 'fa-minus',
+    icon: faMinus,
     title: '分割线',
     action: {
         insert: '\n\n------------\n'

src/components/ToolBarBtns/btn-img.js

@@ -1,6 +1,8 @@
+import { faImage } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'img',
-    icon: 'fa-image',
+    icon: faImage,
     title: '插入图片',
     action: {
         request: {

src/components/ToolBarBtns/btn-info.jsx

@@ -1,6 +1,8 @@
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'info',
-    icon: 'fa-info-circle',
+    icon: faInfoCircle,
     title: '关于',
     action () {
         this.openDialog({

src/components/ToolBarBtns/btn-italic.js

@@ -1,6 +1,8 @@
+import { faItalic } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'italic',
-    icon: 'fa-italic',
+    icon: faItalic,
     title: '斜体',
     action: {
         insert: [' _', '_ ']

src/components/ToolBarBtns/btn-link.js

@@ -1,6 +1,8 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'link',
-    icon: 'fa-link',
+    icon: faLink,
     title: '插入链接',
     action: {
         request: {

src/components/ToolBarBtns/btn-ol.js

@@ -1,6 +1,8 @@
+import { faListOl } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'ol',
-    icon: 'fa-list-ol',
+    icon: faListOl,
     title: '有序列表',
     action: {
         insert: '1. '

src/components/ToolBarBtns/btn-scrollsync.js

@@ -1,6 +1,8 @@
+import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'scrollSync',
-    icon () { return this.scrollSync ? 'fa-lock' : 'fa-lock-open' },
+    icon () { return this.scrollSync ? faLock : faLockOpen },
     title () { return this.scrollSync ? '停用滚动同步' : '启用滚动同步' },
     action: {
         event: 'scrollSync'

src/components/ToolBarBtns/btn-strikethrough.js

@@ -1,6 +1,8 @@
+import { faStrikethrough } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'strikethrough',
-    icon: 'fa-strikethrough',
+    icon: faStrikethrough,
     title: '删除线',
     action: {
         insert: ['~~', '~~']

src/components/ToolBarBtns/btn-table.js

@@ -1,6 +1,8 @@
+import { faTable } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'table',
-    icon: 'fa-table',
+    icon: faTable,
     title: '插入表格',
     action: {
         request: {

src/components/ToolBarBtns/btn-ul.js

@@ -1,6 +1,8 @@
+import { faListUl } from '@fortawesome/free-solid-svg-icons'
+
 export default {
     name: 'ul',
-    icon: 'fa-list-ul',
+    icon: faListUl,
     title: '无序列表',
     action: {
         insert: '- '

yarn.lock

@@ -1060,9 +1060,29 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-free@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.1.0.tgz#f35f5ba91366b7a58b0b6a4f22ff0907fe002219"
+"@fortawesome/fontawesome-common-types@^0.2.15":
+  version "0.2.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz#16af950653083d1e3064061de9f8e5e3b579f688"
+  integrity sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g==
+
+"@fortawesome/fontawesome-svg-core@^1.2.15":
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz#368f9fc7e8e8d8636495dc7483f97510f920ba97"
+  integrity sha512-M/sHyl4g2VBtKYkay1Z+XImMyTVcaBPmehYtPw4HKD9zg2E7eovB7Yx98aUfZjPbroGqa+IL4/+KhWBMOGlHIQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.15"
+
+"@fortawesome/free-solid-svg-icons@^5.7.2":
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.2.tgz#9ec2ed353d630092a8e19cc8aae2f716572963e5"
+  integrity sha512-iujcXMyAvIbWM8W3jkOLpvJbR+rPpdN1QyqhZeJaLRdHPH4JmuovIAYP4vx5Sa1csZVXfRD1eDWqVZ/jGM620A==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.15"
+
+"@fortawesome/vue-fontawesome@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.6.tgz#18a0f4263b90f65180fc927325ba01896276ea04"
+  integrity sha512-HAGRbrOuGDwwUmCYdpzR0hhNQ3EE30dOS4JiJKcoZ+S4M210CxyU0OXCgzIg3HzK/23rlpHbV8zi9PDDZDnuIw==
 
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   version "1.0.6"