From 717d928176bdc4d67fcc85bcaa9e95b153b90dbf Mon Sep 17 00:00:00 2001
From: Soha Jin <soha@lohu.info>
Date: Wed, 20 Mar 2019 09:16:21 -0700
Subject: [PATCH] Use vue-fontawesome to show icons (#39)

# switch to vue-fa
---
 package.json                                  |  4 ++-
 src/MarkdownPalettes.vue                      | 26 +++++++++++++++----
 src/components/ToolBarBtns/btn-bold.js        |  4 ++-
 src/components/ToolBarBtns/btn-code.js        |  4 ++-
 src/components/ToolBarBtns/btn-fullscreen.js  |  4 ++-
 src/components/ToolBarBtns/btn-header.js      |  2 +-
 src/components/ToolBarBtns/btn-hide.js        |  4 ++-
 src/components/ToolBarBtns/btn-hr.js          |  4 ++-
 src/components/ToolBarBtns/btn-img.js         |  4 ++-
 src/components/ToolBarBtns/btn-info.jsx       |  4 ++-
 src/components/ToolBarBtns/btn-italic.js      |  4 ++-
 src/components/ToolBarBtns/btn-link.js        |  4 ++-
 src/components/ToolBarBtns/btn-ol.js          |  4 ++-
 src/components/ToolBarBtns/btn-scrollsync.js  |  4 ++-
 .../ToolBarBtns/btn-strikethrough.js          |  4 ++-
 src/components/ToolBarBtns/btn-table.js       |  4 ++-
 src/components/ToolBarBtns/btn-ul.js          |  4 ++-
 yarn.lock                                     | 26 ++++++++++++++++---
 18 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 55b07d5..fe56f39 100644
--- a/package.json
+++ b/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",
diff --git a/src/MarkdownPalettes.vue b/src/MarkdownPalettes.vue
index 4a76181..abce755 100644
--- a/src/MarkdownPalettes.vue
+++ b/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: {
diff --git a/src/components/ToolBarBtns/btn-bold.js b/src/components/ToolBarBtns/btn-bold.js
index 89e7673..18e1aa6 100644
--- a/src/components/ToolBarBtns/btn-bold.js
+++ b/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: ['**', '**']
diff --git a/src/components/ToolBarBtns/btn-code.js b/src/components/ToolBarBtns/btn-code.js
index b79942a..2293c92 100644
--- a/src/components/ToolBarBtns/btn-code.js
+++ b/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()
diff --git a/src/components/ToolBarBtns/btn-fullscreen.js b/src/components/ToolBarBtns/btn-fullscreen.js
index 607e783..2287d05 100644
--- a/src/components/ToolBarBtns/btn-fullscreen.js
+++ b/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'
diff --git a/src/components/ToolBarBtns/btn-header.js b/src/components/ToolBarBtns/btn-header.js
index 5424fca..8b8a72b 100644
--- a/src/components/ToolBarBtns/btn-header.js
+++ b/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 () {
diff --git a/src/components/ToolBarBtns/btn-hide.js b/src/components/ToolBarBtns/btn-hide.js
index c00f747..a33dc86 100644
--- a/src/components/ToolBarBtns/btn-hide.js
+++ b/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'
diff --git a/src/components/ToolBarBtns/btn-hr.js b/src/components/ToolBarBtns/btn-hr.js
index cb42414..1f3326c 100644
--- a/src/components/ToolBarBtns/btn-hr.js
+++ b/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'
diff --git a/src/components/ToolBarBtns/btn-img.js b/src/components/ToolBarBtns/btn-img.js
index 9f516f9..1260c18 100644
--- a/src/components/ToolBarBtns/btn-img.js
+++ b/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: {
diff --git a/src/components/ToolBarBtns/btn-info.jsx b/src/components/ToolBarBtns/btn-info.jsx
index 5bce6e0..dcbe4dc 100644
--- a/src/components/ToolBarBtns/btn-info.jsx
+++ b/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({
diff --git a/src/components/ToolBarBtns/btn-italic.js b/src/components/ToolBarBtns/btn-italic.js
index c074f5d..b8c4b3f 100644
--- a/src/components/ToolBarBtns/btn-italic.js
+++ b/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: [' _', '_ ']
diff --git a/src/components/ToolBarBtns/btn-link.js b/src/components/ToolBarBtns/btn-link.js
index 046f424..9a910d6 100644
--- a/src/components/ToolBarBtns/btn-link.js
+++ b/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: {
diff --git a/src/components/ToolBarBtns/btn-ol.js b/src/components/ToolBarBtns/btn-ol.js
index d28c039..aa92605 100644
--- a/src/components/ToolBarBtns/btn-ol.js
+++ b/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. '
diff --git a/src/components/ToolBarBtns/btn-scrollsync.js b/src/components/ToolBarBtns/btn-scrollsync.js
index 48dbad3..d806f62 100644
--- a/src/components/ToolBarBtns/btn-scrollsync.js
+++ b/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'
diff --git a/src/components/ToolBarBtns/btn-strikethrough.js b/src/components/ToolBarBtns/btn-strikethrough.js
index ffdc4fe..8135ec2 100644
--- a/src/components/ToolBarBtns/btn-strikethrough.js
+++ b/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: ['~~', '~~']
diff --git a/src/components/ToolBarBtns/btn-table.js b/src/components/ToolBarBtns/btn-table.js
index 4738874..37d140c 100644
--- a/src/components/ToolBarBtns/btn-table.js
+++ b/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: {
diff --git a/src/components/ToolBarBtns/btn-ul.js b/src/components/ToolBarBtns/btn-ul.js
index 4a484e5..de3a644 100644
--- a/src/components/ToolBarBtns/btn-ul.js
+++ b/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: '- '
diff --git a/yarn.lock b/yarn.lock
index c4560d2..218dece 100644
--- a/yarn.lock
+++ b/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"