el-icon-user

### Element UI `el-icon-user` 图标用法与样式

在使用 Element UI 的 `el-icon-user` 图标时，可以通过简单的 HTML 标签来实现。为了确保图标能够正常显示，除了安装并配置好 Element UI 外部库外，还需确保已正确引入 CSS 文件[^2]。

#### 基本用法

可以直接通过 `<i>` 标签配合类名的方式调用该图标：

<i class="el-icon-user"></i>

如果希望调整图标的大小或颜色，则可以在原有基础上增加自定义样式属性：

.el-icon-user {
    font-size: 24px;
    color: blue;
}

对于更复杂的场景下应用此图标，比如结合按钮组件一起展示用户名字旁边的小头像效果，可以这样做：

<template>
  <div>
    <!-- 使用 el-button 组件 -->
    <el-button type="primary">
      用户中心 <i class="el-icon-user"></i>
    </el-button>

    <!-- 或者单独作为装饰性元素 -->
    <span>欢迎回来,</span><i class="el-icon-user"></i>&nbsp;<strong>{{ userName }}</strong>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const userName = ref('张三');
</script>

上述代码片段展示了如何将 `el-icon-user` 集成到不同的上下文中，并且提供了修改其外观的方法。