tiptab editor > Adds icons with font awesome

components/editor/BubbleMenu.vue

@@ -13,35 +13,35 @@
         :class="{ 'is-active': isActive.bold() }"
         @click="commands.bold()"
       >
-        bold
+        <icon name="bold" size="small" />
       </button>
       <button
         class="menububble__button"
         :class="{ 'is-active': isActive.italic() }"
         @click="commands.italic()"
       >
-        italic
+        <icon name="italic" size="small" />
       </button>
       <button
         class="menububble__button"
         :class="{ 'is-active': isActive.code() }"
         @click="commands.code()"
       >
-        code
+        <icon name="code" size="small" />
       </button>
       <button
         class="menububble__button"
         :class="{ 'is-active': isActive.strike() }"
         @click="commands.strike()"
       >
-        strike
+        <icon name="strikethrough" size="small" />
       </button>
       <button
         class="menububble__button"
         :class="{ 'is-active': isActive.underline() }"
         @click="commands.underline()"
       >
-        underline
+        <icon name="underline" size="small" />
       </button>
       <button
         class="menububble__button"
@@ -72,9 +72,11 @@
 
 <script>
 import { EditorMenuBubble } from 'tiptap'
+import Icon from '~/components/shared/Icon'
 export default {
   components: {
-    EditorMenuBubble
+    EditorMenuBubble,
+    Icon
   },
   props: {
     editor: {

components/shared/Icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <i class="icon fas" :class="[`fa-${name}`, `icon-size-${size}`]"> </i>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      default: ''
+    },
+    size: {
+      size: 'normal'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .icon {
+    &-size {
+      &-small {
+        font-size: 15px;
+      }
+      &-normal {
+        font-size: 18px;
+      }
+      &-large {
+        font-size: 21px;
+      }
+    }
+  }
+</style>

nuxt.config.js

@@ -13,6 +13,9 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ],
+    script: [
+      { src: 'https://kit.fontawesome.com/d33a83f69c.js' }
     ]
   },
   /*