Use vue-fontawesome to show icons (#39)

# switch to vue-fa

Author: moesoha

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({