feat: 添加`vite-plugin-svg-icons`插件，添加svg组件

package.json

@@ -22,6 +22,7 @@
     "sass-loader": "^13.3.2",
     "unplugin-auto-import": "^0.17.1",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^2.9.16"
+    "vite": "^2.9.16",
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }

src/assets/icons/people.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701478531535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3176" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.417 645.512c-16.389-2.68-16.761-49.14-16.761-49.14s48.154-49.142 58.65-115.225c28.228 0 45.66-70.249 17.433-94.968 1.176-26.016 36.292-204.264-141.455-204.264-177.743 0-142.631 178.246-141.455 204.264-28.232 24.719-10.8 94.968 17.431 94.968 10.5 66.084 58.651 115.226 58.651 115.226s-0.375 46.46-16.769 49.139c-52.778 8.664-249.884 98.296-249.884 196.572h664.05c-0.002-98.276-197.106-187.908-249.891-196.572z" fill="" p-id="3177"></path><path d="M695.108 634.039c-15.458-2.522-15.808-46.332-15.808-46.332s45.404-46.347 55.3-108.657c26.62 0 43.06-66.252 16.444-89.557 1.107-24.533 34.214-192.617-133.391-192.617-16.81 0-31.594 1.694-44.601 4.765 72.709 49.332 51.5 160.548 50.593 180.678 28.226 24.719 10.79 94.97-17.442 94.97-8.133 51.232-38.896 92.28-52.313 108.144-0.845 2.36-1.977 7.656-1.977 7.656s-2.27 16.047-0.98 28.456c2.38 9.989 6.449 18.971 13.392 20.107 49.388 8.113 254.088 119.557 247.528 198.728H930.74c0-92.682-185.862-198.175-235.633-206.341z" fill="" p-id="3178"></path></svg>

src/components/SvgIcon/index.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from 'vue'
+
+const Props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '#ffffff',
+  },
+  size: {
+    type: Number,
+    default: 12,
+  },
+  rgap: {
+    type: Number,
+    default: 0
+  }
+})
+
+const symbolId = computed(() => `#${Props.prefix}-${Props.name}`)
+
+const getStyle = computed(() => {
+  const { size, rgap } = Props
+  let pixel = `${size}px`
+  let styles = {
+    width: pixel,
+    height: pixel,
+    fontSize: pixel,
+  }
+
+  if (rgap) {
+    styles['paddingRight'] = `${rgap}px`
+  }
+
+  return styles
+})
+
+</script>
+
+<template>
+  <i class="el-iconx" :style="getStyle">
+    <svg aria-hidden="true">
+      <use :xlink:href="symbolId" :fill="color" />
+    </svg>
+  </i>
+</template>
+
+<style lang="scss" scoped>
+.el-iconx {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+
+  svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    vertical-align: middle;
+  }
+}
+</style>

src/components/layouts/Header.vue

@@ -1,12 +1,20 @@
 <script setup>
 import { ref } from 'vue';
-import { Search } from '@element-plus/icons-vue'
+import { Search, Promotion, Avatar } from '@element-plus/icons-vue'
+import { useUser } from '~/store/user.js'
+
+import SvgIcon from '~/components/SvgIcon/index.vue'
+
+const user = useUser()
 
 const keyword = ref('')
 </script>
 
 <template>
   <div class="header-container flex-row flex-aic flex-jc-sb">
+    <svg aria-hidden="true">
+      <use href="../../assets/icons/people.svg" fill="#000000" />
+    </svg>
     <div class="logo">ny-logo</div>
     <div class="header__content flex-row flex-aic flex-jc-sb">
       <el-input v-model="keyword" class="searchbox" placeholder="VR拍摄" :suffix-icon="Search" />
@@ -15,7 +23,19 @@ const keyword = ref('')
         <el-button type="primary">最新</el-button>
       </el-button-group>
       <div class="header__content__right">
-        <el-button type="primary">icon-yx会员</el-button>
+        <el-button class="vip-btn">
+          <SvgIcon name="crown" :size="19" :rgap="3" color="#523618" />
+          忆象会员
+        </el-button>
+        <!-- NOTE: 邀请好友&发布 用户登录才有 -->
+        <template v-if="user.name">
+          <el-button type="primary">
+            <SvgIcon name="people" :size="19" color="#ffffff" />
+            邀请好友
+          </el-button>
+          <el-button type="primary" :icon="Promotion">发布</el-button>
+        </template>
+
         <el-button type="primary">登录/注册</el-button>
       </div>
     </div>
@@ -33,6 +53,13 @@ const keyword = ref('')
   &__content {
     width: 0;
     flex: 1;
+
+    &__right {
+      .vip-btn {
+        background-color: rgba(255, 234, 203, 1);
+        color: #523618;
+      }
+    }
   }
 
   .logo {
@@ -50,5 +77,6 @@ const keyword = ref('')
       background-color: #F4F4F4;
     }
   }
+
 }
 </style>

src/main.js

@@ -3,12 +3,18 @@ import 'normalize.css'
 import '~/styles/variable.scss'
 import '~/styles/index.scss'
 import 'dayjs/locale/zh-cn'
+
 import Router from '~/router/index'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
-const app = createApp(App)
+// NOTE: register svg-icons
+import 'virtual:svg-icons-register'
 
+const pinia = createPinia()
+const app = createApp(App)
 
 app.use(Router)
+app.use(pinia)
 
 app.mount('#app')

src/store/user.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+
+export const useUser = defineStore('user', {
+  state: () => ({
+    name: undefined,
+    userinfo: null,
+  }),
+  getters: {},
+  actions: {
+    // NOTE: 获取用户信息
+    getUser() {
+
+
+    }
+  }
+})

vite.config.js

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -22,6 +23,10 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+      symbolId: 'icon-[dir]-[name]',
+    }),
     AutoImport({
       resolvers: [ElementPlusResolver({
         importStyle: "sass"
@@ -31,6 +36,6 @@ export default defineConfig({
       resolvers: [ElementPlusResolver({
         importStyle: "sass"
       })]
-    }),
+    })
   ]
 })