add: svgicon

blog/package.json

@@ -24,8 +24,10 @@
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.7.0",
+    "fast-glob": "^3.2.12",
     "prettier": "^2.7.1",
     "sass": "^1.56.1",
-    "vite": "^3.2.3"
+    "vite": "^3.2.3",
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }

blog/src/assets/svg/SvgIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="symbolId" rel="external nofollow" />
+  </svg>
+</template>
+
+<script>
+// svg 组件
+export default {
+  name: 'svg-icon',
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    symbolId() {
+      return `#icon-${this.name}`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

blog/src/assets/svg/icons/gitee.svg

@@ -0,0 +1,3 @@
+<svg t="1668133640826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="200" height="200">
+  <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="1215"></path>
+</svg>

blog/src/assets/svg/icons/github.svg

@@ -0,0 +1,3 @@
+<svg t="1668133820349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1353" width="200" height="200">
+  <path d="M512.465 98.744c-236.05-2.401-429.41 187.034-431.998 423.242 0.894 183.912 120.176 346.283 295.332 402.018 21.6 3.93 29.451-9.04 29.451-20.436v-71.916c-120.17 25.545-145.7-56.59-145.7-56.59a112.364 112.364 0 0 0-47.914-62.089c-39.272-25.937 3.141-25.545 3.141-25.545a90.702 90.702 0 0 1 65.978 43.624c25.358 43.993 81.26 59.548 125.678 34.976a91.569 91.569 0 0 1 27.487-56.59c-95.825-10.615-196.36-46.768-196.36-209.067a163.13 163.13 0 0 1 43.591-114.358 148.652 148.652 0 0 1 4.32-111.609c15.896-35.223 36.525-11.397 117.815 43.229a419.24 419.24 0 0 1 216.002 0c82.471-54.626 117.82-43.229 117.82-43.229a148.657 148.657 0 0 1 4.32 111.61 163.145 163.145 0 0 1 45.945 113.57c0 162.695-101.321 198.458-196.36 209.067a98.273 98.273 0 0 1 29.452 78.594v115.933c0 13.752 7.856 24.756 29.457 20.43 174.63-56.071 293.466-218.106 294.545-401.622C941.878 285.778 748.52 96.343 512.465 98.744" fill="#231F20" p-id="1354"></path>
+</svg>

blog/src/components/UserInfo.vue

@@ -2,6 +2,8 @@
   <el-card shadow="hover">
     <div class="avatar">
       <el-avatar :size="100" :src="avatar" />
+      <svg-icon name="gitee"></svg-icon>
+      <svg-icon name="github"></svg-icon>
     </div>
   </el-card>
 </template>

blog/src/main.js

@@ -4,7 +4,11 @@ import router from '@/router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import '@/assets/scss/index.scss'
+import 'virtual:svg-icons-register'
+import SvgIcon from './assets/svg/SvgIcon.vue'
 
 const app = createApp(App)
 
+app.component('svg-icon', SvgIcon)
+
 app.use(router).use(ElementPlus).mount('#app')

blog/vite.config.js

@@ -1,9 +1,18 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    createSvgIconsPlugin({
+      // 指定需要缓存的图标文件夹
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg/icons')],
+      // 指定symbolId格式
+      symbolId: 'icon-[name]'
+    })
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src') // 利用@代替src