feat(embed): use iconfont

Author: mekery

.eslintignore

@@ -1,2 +1,3 @@
 /dist
 /src/css/katex
+/src/statics

src/components/QuasarTiptap.vue

@@ -53,6 +53,7 @@ import {
 import java from 'highlight.js/lib/languages/java'
 import javascript from 'highlight.js/lib/languages/javascript'
 import css from 'highlight.js/lib/languages/css'
+require('src/statics/iconfont/iconfont')
 
 import {
   OTitle,

src/components/buttons/OEmbedMenu.vue

@@ -7,7 +7,9 @@
         <div class="row col-3" v-for="(service, j) of group.children" :key="`service-${i}-${j}`">
           <q-item class="col-12" clickable v-close-popup @click="select(service)">
             <q-item-section avatar>
-              <img :src="`statics/service/${service.svgIcon}.svg`" v-if="service.svgIcon" />
+              <svg class="icon" aria-hidden="true" v-if="service.svgIcon">
+                <use :xlink:href="`#icon-${service.svgIcon}`"></use>
+              </svg>
               <q-icon :name="service.icon || 'apps'" :color="service.color" v-else />
             </q-item-section>
             <q-item-section>

src/components/views/OEmbedView.vue

@@ -15,7 +15,9 @@
                @paste.stop.native>
         <template v-slot:prepend>
           <div class="row items-center">
-            <img :src="`statics/service/${service.svgIcon}.svg`" v-if="service.svgIcon" />
+            <svg class="icon" aria-hidden="true" v-if="service.svgIcon">
+              <use :xlink:href="`#icon-${service.svgIcon}`"></use>
+            </svg>
             <q-icon :name="service.icon || 'apps'" :color="service.color" v-else />
             <q-tooltip anchor="top middle" self="bottom middle">{{$o.lang.embed[service.value]}}</q-tooltip>
           </div>

src/css/app.styl

@@ -7,28 +7,3 @@
 // --------------------------------------------------------------------------------
 // Menu
 // --------------------------------------------------------------------------------
-.o-menu {
-  min-width 160px !important
-
-  .q-list {
-    padding 8px 0
-    .q-item {
-      padding 8px 10px
-      min-height unset
-    }
-  }
-
-  .q-item {
-    min-height unset
-    padding 4px 8px
-
-    .q-item__section--main {
-      padding-left 8px
-    }
-  }
-
-  .q-avatar {
-    width 2rem !important
-    height 2rem !important
-  }
-}

src/css/tiptap.styl

@@ -516,36 +516,48 @@
   .q-btn, .q-tab {
     text-transform unset
   }
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
 }
 
+
 .o-menu {
-  .q-item {
-    .checked {
-      visibility hidden
-    }
-  }
-  .q-item.is-active {
-    background rgba(0, 0, 0, 0.08)
+  min-width 160px !important
 
-    .checked {
-      visibility visible
+  .q-list {
+    padding 8px 0
+    .q-item {
+      padding 8px 10px
+      min-height unset
     }
   }
 
-  .o-button {
-    cursor pointer
-    text-align center
-    padding 4px 10px
-    margin 0 4px
-    background rgba(0, 0, 0, 0.05)
-    border-radius 4px
+  .q-item {
+    min-height unset
+    padding 4px 8px
 
-    .q-icon {
-      font-size 1.2rem
+    .q-item__section--main {
+      padding-left 8px
     }
   }
-  .o-button:hover {
-    background rgba(0, 0, 0, 0.1)
+
+  .q-avatar {
+    width 2rem !important
+    height 2rem !important
+  }
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
   }
 }
 

src/extentions/Embed.js

@@ -6,7 +6,7 @@
  * @date 2020.04.29
  */
 import { Node } from 'tiptap'
-import OEmbedView from 'components/views/OEmbedView'
+import OEmbedView from 'src/components/views/OEmbedView'
 
 function getAttrs (dom) {
   const src = dom.getAttribute('src') || ''