✨(component): 新增 avatar 组件 default 插槽与 icon 属性, 支持文字与图标头像

package/component/src/component/avatar/index.less

@@ -1,18 +1,14 @@
 .layui-avatar {
-  margin: 0;
-  padding: 0;
   font-size: 14px;
   font-variant: tabular-nums;
-  font-feature-settings: tnum;
   border-radius: var(--global-border-radius);
   box-sizing: border-box;
-  color: #000000d9;
-  line-height: 1.5715;
+  color: #ffffff;
   list-style: none;
   position: relative;
   display: inline-block;
+  background: #eeeeee;
   overflow: hidden;
-  color: #fff;
   white-space: nowrap;
   text-align: center;
   width: 32px;
@@ -49,7 +45,6 @@
   & > img {
     width: 100%;
     height: 100%;
-    background: #ccc;
     display: block;
     object-fit: cover;
   }

package/component/src/component/avatar/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, useSlots } from "vue";
+import { LayIcon } from "@layui/icons-vue";
 export default {
   name: "LayAvatar",
 };
@@ -7,16 +8,19 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+
 export interface LayAvatarProps {
   src?: string;
   size?: "xs" | "sm" | "md" | "lg";
   radius?: boolean;
+  icon?: string;
   alt?: string;
 }
 
 const props = withDefaults(defineProps<LayAvatarProps>(), {
   size: "md",
   radius: false,
+  icon: "layui-icon-username"
 });
 
 const classes = computed(() => {
@@ -30,10 +34,13 @@ const slot = useSlots();
 </script>
 
 <template>
-  <span v-if="!slot.default" :class="classes">
-    <img :alt="alt" :src="src" />
-  </span>
-  <span :class="classes" v-else>
+  <span :class="classes" v-if="slot.default">
     <slot></slot>
   </span>
+  <span v-else-if="src" :class="classes">
+    <img :alt="alt" :src="src" />
+  </span>
+  <span v-else :class="classes">
+    <lay-icon :type="icon"></lay-icon>
+  </span>
 </template>