🎨 替换图标为 svg

components/archive/list.vue

@@ -7,7 +7,10 @@
             <el-link :href="article.articleLink" style="margin-bottom: .5rem;">
               <h4>
                 <span v-if="isPerfect(article.articlePerfect)" style="color: gold;" title="优选">
-                  <font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                       style="fill: #FFB71B;"><path
+                    d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
+                    d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
                 </span>
                 <span v-html="article.articleTitle"></span>
               </h4>
@@ -30,7 +33,7 @@
               </el-col>
               <el-col :xs="16" :sm="16" :xl="16">
                 <div>
-                  <el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
+                  <el-link target="_blank" :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
                     {{ article.articleAuthorName }}
                   </el-link>
                   <small class="d-block text-muted">{{ article.timeAgo }}</small>

components/layouts/pc/header.vue

@@ -37,10 +37,27 @@
               trigger="click"
               v-model="showPopover"
               @show="handleShowPopover">
-              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync" placeholder="搜索文章,作品集,用户">
+              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
-                <el-button slot="append" icon="el-icon-search" @click="querySearchAsync"></el-button>
+                        placeholder="搜索文章,作品集,用户">
+                <el-button slot="append" @click="querySearchAsync">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                       style="fill: rgba(0, 0, 0, 1);">
+                    <path
+                      d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                    <path
+                      d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+                  </svg>
+                </el-button>
               </el-input>
-              <el-button slot="reference" icon="el-icon-search" circle size="small"></el-button>
+              <el-button slot="reference" circle size="small">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                     style="fill: rgba(0, 0, 0, 1);">
+                  <path
+                    d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                  <path
+                    d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+                </svg>
+              </el-button>
             </el-popover>
             <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
                      href="/portfolio/post">创建作品集
@@ -51,7 +68,13 @@
             <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;">
               <el-dropdown trigger="click" @command="handleCommand">
                 <el-badge :value="notificationNumbers" class="item">
-                  <el-link rel="nofollow" :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
+                  <el-link rel="nofollow" :underline="false" style="font-size: 1.4rem;">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                         style="fill: rgba(0, 0, 0, 1);">
+                      <path
+                        d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path>
+                    </svg>
+                  </el-link>
                 </el-badge>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
@@ -93,10 +116,27 @@
               trigger="click"
               v-model="showPopover"
               @show="handleShowPopover">
-              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync" placeholder="搜索文章,作品集,用户">
+              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
-                <el-button slot="append" icon="el-icon-search" @click="querySearchAsync"></el-button>
+                        placeholder="搜索文章,作品集,用户">
+                <el-button slot="append" @click="querySearchAsync">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                       style="fill: rgba(0, 0, 0, 1);">
+                    <path
+                      d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                    <path
+                      d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+                  </svg>
+                </el-button>
               </el-input>
-              <el-button slot="reference" icon="el-icon-search" circle size="small"></el-button>
+              <el-button slot="reference" circle size="small">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                     style="fill: rgba(0, 0, 0, 1);">
+                  <path
+                    d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                  <path
+                    d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+                </svg>
+              </el-button>
             </el-popover>
             <nuxt-link to="/login">
               <el-link rel="nofollow" :underline="false" style="margin-left: 10px;">登录</el-link>

nuxt.config.js

@@ -47,7 +47,6 @@ export default {
   */
   css: [
     'element-ui/lib/theme-chalk/index.css',
-    '@fortawesome/fontawesome-svg-core/styles.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -59,7 +58,6 @@ export default {
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},
     {src: '~/plugins/vditor', ssr: false},
-    {src: '~/plugins/fontawesome'},
     // {src: '~/plugins/vue-cropper', ssr: false}
   ],
   /*

package.json

@@ -11,11 +11,6 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^1.0.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
     "@nuxtjs/axios": "^5.13.1",
     "babel-plugin-lodash": "^3.3.4",
     "cookieparser": "^0.1.0",
@@ -27,6 +22,7 @@
     "nuxt": "^2.15.3",
     "raw-loader": "^4.0.2",
     "save-svg-as-png": "^1.4.17",
+    "simple-icons": "^5.8.0",
     "sockjs-client": "^1.5.0",
     "stompjs": "^2.3.3",
     "vditor": "^3.8.4",

pages/article/_article_id.vue

@@ -6,7 +6,10 @@
           <div class="article__item">
             <h1 class="list__title">
               <span v-if="isPerfect" style="color: gold;" title="优选">
-                <font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+                     style="fill: #FFB71B;"><path
+                  d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
+                  d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
               </span>
               {{ article.articleTitle }}
             </h1>
@@ -17,7 +20,8 @@
               </el-col>
               <el-col :xs="9" :sm="11" :xl="11">
                 <div style="margin-left: 1rem;">
-                  <el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">{{ article.articleAuthorName }}
+                  <el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
+                    {{ article.articleAuthorName }}
                   </el-link>
                   <small class="d-block text-muted">{{ article.timeAgo }}</small>
                 </div>
@@ -73,14 +77,24 @@
               <portfolios-widget :portfolios="article.portfolios"></portfolios-widget>
             </el-col>
             <el-col v-if="user">
-              <el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
+              <el-tooltip class="item" effect="dark" content="酷" placement="top-start">
                 <el-button type="text" style="font-size: 1.2rem;" @click="thumbsUp">
-                  <font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                       style="fill: rgba(0, 0, 0, 1);">
+                    <path
+                      d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858 4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62 5.963 5.963 0 0 0 2.148.903 6.035 6.035 0 0 0 3.542-.35 6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z"></path>
+                    <path
+                      d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8 0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2 0 4.411-3.589 8-8 8z"></path>
+                  </svg>
                   {{ article.articleThumbsUpCount }}
                 </el-button>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
-                <el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
+                <el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee"
+                           style="font-size: 1.2rem;">
+                  <svg width="24" height="24">
+                    <path :d="buymeacoffee.path"></path>
+                  </svg>
                   {{ article.articleSponsorCount }}
                 </el-button>
                 <el-popconfirm
@@ -95,14 +109,23 @@
               </el-tooltip>
             </el-col>
             <el-col v-else>
-              <el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
+              <el-tooltip class="item" effect="dark" content="酷" placement="top-start">
                 <el-button type="text" style="font-size: 1.2rem;">
-                  <font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                       style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
+                    <path
+                      d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858 4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62 5.963 5.963 0 0 0 2.148.903 6.035 6.035 0 0 0 3.542-.35 6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z"></path>
+                    <path
+                      d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8 0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2 0 4.411-3.589 8-8 8z"></path>
+                  </svg>
                   {{ article.articleThumbsUpCount }}
                 </el-button>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
-                <el-button type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
+                <el-button type="text" style="font-size: 1.2rem;">
+                  <svg width="24" height="24">
+                    <path :d="buymeacoffee.path"></path>
+                  </svg>
                   {{ article.articleSponsorCount }}
                 </el-button>
               </el-tooltip>
@@ -134,6 +157,7 @@ import ShareBox from '~/components/widget/share';
 import PortfoliosWidget from '~/components/widget/portfolios';
 import EditTags from '~/components/widget/tags';
 import 'vditor/dist/css/content-theme/light.css';
+import {buymeacoffee} from "simple-icons"
 
 export default {
   name: "ArticleDetail",
@@ -218,6 +242,7 @@ export default {
   },
   data() {
     return {
+      buymeacoffee,
       loading: false,
       isShare: false,
       dialogVisible: false,

pages/user/_account.vue

@@ -14,21 +14,35 @@
           <div v-if="userExtend" style="margin-bottom: 1rem;">
             <el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog"
                      target="_blank">
-              <font-awesome-icon :icon="['fas', 'link']"></font-awesome-icon>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z"></path><path d="m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z"></path></svg>
             </el-link>
             <el-link v-if="userExtend.github" class="user-link" title="github" :underline="false"
                      :href="'https://github.com/' + userExtend.github" target="_blank">
-              <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
+              <svg width="24" height="24">
+                <g :fill="'#' + github.hex">
+                  <path :d="github.path"></path>
+                </g>
+              </svg>
             </el-link>
             <el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false"
                      :href="'https://weibo.com/n/' + userExtend.weibo" target="_blank">
-              <font-awesome-icon :icon="['fab', 'weibo']"></font-awesome-icon>
+              <svg width="24" height="24">
+                <g :fill="'#' + sinaweibo.hex">
+                  <path :d="sinaweibo.path"></path>
+                </g>
+              </svg>
             </el-link>
             <el-link v-if="userExtend.weixin" class="user-link" title="微信" :underline="false" :href="userExtend.weixin">
-              <font-awesome-icon :icon="['fab', 'weixin']" target="_blank"></font-awesome-icon>
+              <svg width="24" height="24">
+                <g :fill="'#' + wechat.hex">
+                  <path :d="wechat.path"></path>
+                </g>
+              </svg>
             </el-link>
             <el-link v-if="userExtend.qq" class="user-link" title="QQ" :underline="false" :href="userExtend.qq">
-              <font-awesome-icon :icon="['fab', 'qq']" target="_blank"></font-awesome-icon>
+              <svg width="24" height="24">
+                <path :d="tencentqq.path"></path>
+              </svg>
             </el-link>
           </div>
           <div v-if="oauth">
@@ -84,6 +98,7 @@ import isoMetropolis from "~/static/banner/isometropolis.jpg"
 import naranjas from "~/static/banner/naranjas.png"
 import retroFurnish from "~/static/banner/retro-furnish.png"
 import science from "~/static/banner/science.png"
+import {github, sinaweibo, wechat, tencentqq} from "simple-icons";
 
 export default {
   name: "User",
@@ -150,6 +165,10 @@ export default {
   },
   data() {
     return {
+      github,
+      sinaweibo,
+      wechat,
+      tencentqq,
       activeTab: this.$route.query.tab || '0',
       isFollow: false,
       backgroundImage: designTools,
@@ -378,5 +397,7 @@ h3, .h3 {
 .user-link {
   font-size: 24px;
   margin: 0 0.5rem;
+  width: 24px;
+  height: 24px;
 }
 </style>

plugins/fontawesome.js

@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import { library, config } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
-
-// This is important, we are going to let Nuxt.js worry about the CSS
-config.autoAddCss = false
-
-// You can add your icons directly in this plugin. See other examples for how you
-// can add other styles or just individual icons.
-library.add(fas)
-library.add(fab)
-library.add(far)
-
-// Register the component globally
-Vue.component('font-awesome-icon', FontAwesomeIcon)