build: use oh-vue-icons for icons

Renovamen · Dec 6, 2020 · 0b4b50c · 0b4b50c · vercel · Dec 6, 2020
1 parent 9151816
commit 0b4b50c
Show file tree

Hide file tree

Showing 19 changed files with 123 additions and 73 deletions.
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -27,22 +27,22 @@ module.exports = {
       {
         text: 'Home',
         link: '/',
-        icon: 'fab fa-fort-awesome'
+        icon: 'fa/brands/fort-awesome'
       },
       {
         text: 'Tags',
         link: '/tags/',
-        icon: 'fas fa-tag'
+        icon: 'fa/tag'
       },
       {
         text: 'Links',
         link: '/links/',
-        icon: 'fas fa-satellite-dish'
+        icon: 'fa/satellite-dish'
       },
       {
         text: 'Docs',
         link: '/docs/',
-        icon: 'fas fa-book'
+        icon: 'fa/book'
       }
     ],
     sidebar: {

diff --git a/example/.vuepress/enhanceApp.js b/example/.vuepress/enhanceApp.js
@@ -0,0 +1,4 @@
+import 'oh-vue-icons/icons/fa/brands/fort-awesome'
+import 'oh-vue-icons/icons/fa/tag'
+import 'oh-vue-icons/icons/fa/satellite-dish'
+import 'oh-vue-icons/icons/fa/book'
diff --git a/packages/theme-gungnir/components/ArticleHeader.vue b/packages/theme-gungnir/components/ArticleHeader.vue
@@ -15,25 +15,32 @@
       <h3 v-if="articleInfo.frontmatter.subtitle" class="subtitle">{{$page.frontmatter.subtitle}}</h3>
 
       <div class="icons">
-        <i v-if="articleInfo.frontmatter.author || $themeConfig.author || $site.title"
-          class="far fa-user">
+
+        <div class="icon" v-if="articleInfo.frontmatter.author || $themeConfig.author || $site.title">
+          <v-icon name="fa/regular/user" scale="0.9" />
           <span>{{ articleInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
-        </i>
+        </div>
 
-        <i v-if="articleInfo.frontmatter.date" class="far fa-calendar">
+        <div class="icon" v-if="articleInfo.frontmatter.date">
+          <v-icon name="fa/regular/calendar" scale="0.9" />
           <span>{{ articleInfo.frontmatter.date | formatDateValue }}</span>
-        </i>
+        </div>
 
-        <i v-if="articleInfo.readingTime" class="far fa-clock">
+        <div class="icon" v-if="articleInfo.readingTime">
+          <v-icon name="fa/regular/clock" scale="0.9" />
           <span>{{ articleInfo.readingTime.minutes }} min</span>
-        </i>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import { formatDate } from '@theme/utils/time'
+// icons
+import 'oh-vue-icons/icons/fa/regular/user'
+import 'oh-vue-icons/icons/fa/regular/calendar'
+import 'oh-vue-icons/icons/fa/regular/clock'
 
 export default {
   props: {
@@ -95,14 +102,14 @@ export default {
   padding-top 0
   padding-bottom 0
   .icons
-    i
+    .icon
       display inline-block
       line-height 1.5rem
       color var(--text-color-sub)
       &:not(:last-child)
         margin-right 1rem
       span
-        margin-left 0.5rem
+        margin-left 0.3rem
         font-size 13px
         font-weight normal
   .tags

diff --git a/packages/theme-gungnir/components/Common.vue b/packages/theme-gungnir/components/Common.vue
@@ -192,16 +192,11 @@ export default {
       font-weight bold
       // margin-top -5px
     & >>> .sns-wrapper
-      margin -10px auto 0
+      margin 0 auto
       text-align center
-      font-size 11px
       position relative
-      a
-        font-size 13px
-        .fa-stack
-          width 25px
-          .fa-circle
-            display none
-          .icon-sns
-            color var(--text-color)
+      .icon-stack
+        min-width 25px
+        .icon-sns
+          color var(--text-color)
 </style>
diff --git a/packages/theme-gungnir/components/DropdownLink.vue b/packages/theme-gungnir/components/DropdownLink.vue
@@ -5,7 +5,7 @@
   >
     <a class="dropdown-title" @click="toggle">
       <span class="title faa-parent animated-hover">
-        <i v-if="item.icon" :class="item.icon" class="faa-wrench" style="font-size: 15px" />
+        <v-icon v-if="item.icon" :name="item.icon" class="faa-wrench" scale="0.9" />
         {{ item.text }}
       </span>
       <span

diff --git a/packages/theme-gungnir/components/Home.vue b/packages/theme-gungnir/components/Home.vue
@@ -29,17 +29,17 @@
           </div>
         </div>
 
-        <SNS class="hide-on-mobile" />
+        <SNS class="hide-on-mobile" large />
 
         <button class="img-prev hide-on-mobile" @click="switchImage(-1)">
-          <i class="fas fa-chevron-left"></i>
+          <v-icon name="fa/chevron-left" />
         </button>
         <button class="img-next hide-on-mobile" @click="switchImage(1)">
-          <i class="fas fa-chevron-right"></i>
+          <v-icon name="fa/chevron-right" />
         </button>
 
         <div class="arrow faa-float animated hide-on-mobile" @click="scrollToPost()"> 
-          <i class="fas fa-chevron-down"></i>
+          <v-icon name="fa/chevron-down" scale="1.8" />
         </div>
 
       </div>
@@ -53,6 +53,10 @@
 import PostList from '@theme/components/PostList'
 import SNS from '@theme/components/SNS'
 import { throttle } from '@theme/utils/time'
+// icons
+import 'oh-vue-icons/icons/fa/chevron-left'
+import 'oh-vue-icons/icons/fa/chevron-right'
+import 'oh-vue-icons/icons/fa/chevron-down'
 
 export default {
   components: {
@@ -266,8 +270,6 @@ export default {
         border none
         outline none
         transition(.6s ease)
-        i
-          font-size 16px
         &:hover
           color #fff
           background-color rgba(0, 0, 0, .6)
@@ -284,7 +286,7 @@ export default {
         left 50%
         margin-left -14px
         cursor pointer
-        i
+        .v-icon
           font-size 28px
           color #ffffff
           transition(.4s ease)

diff --git a/packages/theme-gungnir/components/Menu.vue b/packages/theme-gungnir/components/Menu.vue
@@ -17,20 +17,20 @@
             <div class="menu-btn-child-wrapper">
                 <ToggleMode class="menu-btn-child" />
                 <div class="menu-btn-child" @click="goToBottom">
-                    <i class="fas fa-chevron-down"></i>
+                    <v-icon name="fa/chevron-down" />
                 </div>
                 <div class="menu-btn-child" @click="goToTop">
-                    <i class="fas fa-chevron-up"></i>
+                    <v-icon name="fa/chevron-up" />
                 </div>
                 <div
                     v-if="$page.frontmatter.catalog"
                     class="menu-btn-child menu-toc-btn"
                     @click="$emit('toggle-catalog')"
                 >
-                    <i class="fas fa-list-ul"></i>
+                    <v-icon name="fa/list-ul" />
                 </div>
                 <div class="menu-btn-child menu-btn-sidebar" @click="$emit('toggle-sidebar')">
-                    <i class="far fa-window-restore"></i>
+                    <v-icon name="ri/side-bar-line" scale="1.1" />
                 </div>
             </div>
         </div>
@@ -39,6 +39,12 @@
 
 <script>
 import ToggleMode from '@theme/components/ToggleMode'
+// icons
+import 'oh-vue-icons/icons/fa/chevron-down'
+import 'oh-vue-icons/icons/fa/chevron-up'
+import 'oh-vue-icons/icons/fa/list-ul'
+import 'oh-vue-icons/icons/ri/side-bar-line'
+
 export default {
     components: {
         ToggleMode

diff --git a/packages/theme-gungnir/components/NavLink.vue b/packages/theme-gungnir/components/NavLink.vue
@@ -1,13 +1,13 @@
 <template>
   <router-link class="nav-link faa-parent animated-hover" :to="link"
                v-if="!isExternal(link)" :exact="exact">
-    <i v-if="item.icon" :class="item.icon" class="faa-wrench" style="font-size: 15px" />
+    <v-icon v-if="item.icon" :name="item.icon" class="faa-wrench" scale="0.9" />
     {{ item.text }}
   </router-link>
   <a v-else class="nav-link external" :href="link"
      :target="isMailto(link) || isTel(link) ? null : '_blank'"
      :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'">
-    <i v-if="item.icon" :class="item.icon" class="faa-wrench" style="font-size: 15px" />
+    <v-icon v-if="item.icon" :name="item.icon" class="faa-wrench" scale="0.9" />
     {{ item.text }}
   </a>
 </template>
@@ -41,4 +41,4 @@ export default {
     isTel
   }
 }
-</script>
+</script>
diff --git a/packages/theme-gungnir/components/NavLinks.vue b/packages/theme-gungnir/components/NavLinks.vue
@@ -14,7 +14,7 @@
         @click="$emit('toggle-search')"
         style="cursor: pointer;"
       >
-        <i class="fa fa-search faa-wrench" style="font-size: 15px" />
+        <v-icon name="fa/search" scale="0.9" class="faa-wrench"/>
         Search
       </a>
     </div>
@@ -25,6 +25,8 @@
 import DropdownLink from '@theme/components/DropdownLink'
 import NavLink from '@theme/components/NavLink'
 import { resolveNavLinkItem } from '@theme/utils/utils'
+// icon
+import 'oh-vue-icons/icons/fa/search'
 
 export default {
   components: {
@@ -101,7 +103,7 @@ export default {
     line-height 2rem
     text-transform uppercase
     margin-left 25px
-    i
+    .v-icon
       width 18px
     &:first-child
       margin-left 0

diff --git a/packages/theme-gungnir/components/PageEdit.vue b/packages/theme-gungnir/components/PageEdit.vue
@@ -2,7 +2,7 @@
   <footer class="page-edit">
     <div v-if="editLink" class="edit-link">
       <a :href="editLink" target="_blank" rel="noopener noreferrer">
-        <i class="fas fa-pencil-alt" style="font-size: 15px" />
+        <v-icon name="fa/pencil-alt" scale="0.9"/>
         {{ editLinkText }}
       </a>
     </div>
@@ -17,6 +17,8 @@
 <script>
 import isNil from 'lodash/isNil'
 import { endingSlashRE, outboundRE } from '@theme/utils/utils'
+// icon
+import 'oh-vue-icons/icons/fa/pencil-alt'
 
 export default {
   name: 'PageEdit',

diff --git a/packages/theme-gungnir/components/SNS.vue b/packages/theme-gungnir/components/SNS.vue
@@ -7,26 +7,37 @@
             target="_blank"
             rel="noopener noreferrer"
         >
-            <span class="fa-stack fa-lg">
-                <i class="fas fa-circle fa-stack-2x"></i>
-                <i class="fa-stack-1x fa-inverse icon-sns" :class="snsIcon(platform)"></i>
-            </span>
+            <v-icon class="icon-stack">
+                <v-icon v-if="large" name="fa/circle" scale="2.3" class="icon-circle"/>
+                <v-icon :name="snsIcon(platform)" scale="1.1" inverse class="icon-sns"/>
+            </v-icon>
         </a>
         <a
             v-if="$themeConfig.rss"
             href="/rss.xml"
             target="_blank"
             rel="noopener noreferrer"
         >
-            <span class="fa-stack fa-lg">
-                <i class="fas fa-circle fa-stack-2x"></i>
-                <i class="fa-stack-1x fa-inverse fas fa-rss icon-sns"></i>
-            </span>
+            <v-icon class="icon-stack">
+                <v-icon v-if="large" name="fa/circle" scale="2.3" class="icon-circle"/>
+                <v-icon name="fa/rss" scale="1.15" inverse class="icon-sns"/>
+            </v-icon>
         </a>
     </div>
 </template>
 
 <script>
+// icons
+import 'oh-vue-icons/icons/fa/circle'
+import 'oh-vue-icons/icons/fa/rss'
+import 'oh-vue-icons/icons/fa/brands/github-alt'
+import 'oh-vue-icons/icons/fa/brands/linkedin-in'
+import 'oh-vue-icons/icons/fa/brands/facebook-f'
+import 'oh-vue-icons/icons/fa/brands/twitter'
+import 'oh-vue-icons/icons/ri/zhihu-line'
+import 'oh-vue-icons/icons/fa/brands/weibo'
+import 'oh-vue-icons/icons/fa/envelope'
+
 const platform_links = {
     'github': 'https://github.com/',
     'linkedin': 'https://www.linkedin.com/in/',
@@ -38,16 +49,19 @@ const platform_links = {
 }
 
 const platform_icons = {
-    'github': 'fab fa-github-alt',
-    'linkedin': 'fab fa-linkedin-in',
-    'facebook': 'fab fa-facebook-f',
-    'twitter': 'fab fa-twitter',
-    'zhihu': 'fab fa-zhihu',
-    'weibo': 'fab fa-weibo',
-    'email': 'fas fa-envelope'
+    'github': 'fa/brands/github-alt',
+    'linkedin': 'fa/brands/linkedin-in',
+    'facebook': 'fa/brands/facebook-f',
+    'twitter': 'fa/brands/twitter',
+    'zhihu': 'ri/zhihu-line',
+    'weibo': 'fa/brands/weibo',
+    'email': 'fa/envelope'
 }
 
 export default {
+    props: {
+        large: Boolean
+    },
     methods: {
         snsLink(user, platform) {
             return platform_links[platform] + user
@@ -65,14 +79,13 @@ export default {
 .sns-wrapper
     margin-top 270px
     padding 0
-    font-size 14px
-    .fa-stack
-        width 50px
+    .icon-stack
+        min-width 50px
         transition(all ease 0.4s)
         &:hover
             position relative
             cursor pointer
             transform(translateY(-0.35em))
-        .fa-circle
+        .icon-circle
             color rgba(0, 0, 0, .5)
 </style>