图表加载提交

src/components/svg-icon/svg.vue

@@ -1,54 +1,53 @@
 <template>
-  <!-- svg 渲染本地SVG的静态资源 -->
+    <svg :class="svgClass" aria-hidden="true">
-  <svg :width="size" :height="size"  :class="` ${className}` ">
+        <use :xlink:href="iconName"></use>
-    <use :xlink:href="`#icon-${name}`" ></use>
+        <title v-if="!!title">{{ title }}</title>
-  </svg>
+    </svg>
 </template>
+
 <script>
-export default{
+export default {
-    props:{
+    name: 'SvgIcon',
-        // SVG 文件名称
+    props: {
-        name:{
+        iconClass: {
-            type:String,
+            type: String,
-            required:true,
+            required: true
         },
-        // 额外类名
+        className: {
-        className:{
+            type: String
-            type:String,
-            default:"",
         },
-        // SVG 大小
+        title: {
-        size:{
+            type: String,
-            type:Number,
+            default: ''
-            default:50,
         }
     },
-    data(){
+    mounted(){
-        return{
+        console.log(8888,this.iconClass)
-
+    },
+    computed: {
+        iconName() {
+            debugger
+            return `#icon-${this.iconClass}`
+        },
+        svgClass() {
+            if (this.className) {
+                return 'svg-icon ' + this.className
+            } else {
+                return 'svg-icon'
+            }
         }
     }
 }
-// import { computed } from "vue";
-// const props=defineProps({
-//   // SVG 文件名称
-//   name:{
-//     type:String,
-//     required:true,
-//   },
-//   // 额外类名
-//   className:{
-//     type:String,
-//     default:"",
-//   },
-//   // SVG 大小
-//   size:{
-//     type:Number,
-//     default:50,
-//   }
- 
-// })
 </script>
-<style scoped lang="less">
 
+<style lang="scss" scoped>
+.svg-icon {
+    width: 1.1em;
+    height: 1.1em;
+    margin-left: 0.35em;
+    margin-right: 0.35em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
 </style>

src/page/index/top/index.vue

@@ -133,6 +133,7 @@ import topColor from './top-color.vue';
 import topLang from './top-lang.vue';
 import topFull from './top-full.vue';
 import topSetting from '../setting.vue';
+// import topLogin from '../top-login.vue'
 import { getUserInfo as getUerDetailInfo } from '@/api/system/user';
 import { getUserInfo as getUerOauthInfo } from '@/api/user';
 import { validatenull } from '@/utils/validate';

src/page/index/top/top-login.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="top_login">
     <!-- 111 -->
+     <svgs :iconClass="'system-management'"></svgs>
   </div>
 </template>
 
 <script>
-import svg from '@/components/svg-icon/svg.vue';
+import svgs from '@/components/svg-icon/svg.vue';
 export default {
     name: 'top-login',
     components:{
-      svg
+      svgs
     }
 }
 </script>