关于prefix-icon

来源：4-1 登录布局开发

weixin_慕前端5001913

2021-10-28

老师，当前版本的element-plus正在废弃Font icon，转而使用SVG icon，这样的prefix-icon属性如何使用icon图标呢，官方文档也没有给出使用方法

写回答

6回答

fly_烟雨行舟

2022-03-24

直接上代码：

<el-from>
        <div class="title">火星</div>
        <el-form-item>
          <el-input type="text">
            <template #prefix>
              <el-icon class="el-input__icon"><user /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password">
            <template #prefix>
              <el-icon class="el-input__icon"><lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-login">登录</el-button>
        </el-form-item>
</el-from>

<script>
  import { User, Lock } from '@element-plus/icons-vue'

  export default {
    name: 'Login',
    components: {
      User,
      Lock
    }
  }
</script>

雨辰悠悠

文档看的真细节

2022-07-10

共1条回复

慕粉3946981

2022-02-06

你可以查看我在 element-plus 社区中的回答

https://github.com/element-plus/element-plus/issues/5786

尧儿

2021-12-03

main.js里面统一注册icon

注意的是新的icon图标名称变了，比如 user的icon图标，之前是el-icon-user现在是直接使用user

//img.mukewang.com/szimg/61a9f23109aeba5914620737.jpg

慕盖茨3042173

解决了，感谢

2021-12-23

共1条回复

桐子酱Virginia

2023-12-27

其实也还是可以使用prefix-icon属性添加图标的，先全局注册icon，这一步参考官网：
https://element-plus.org/zh-CN/component/icon.html#%E6%B3%A8%E5%86%8C%E6%89%80%E6%9C%89%E5%9B%BE%E6%A0%87

在Vue 2里面，需要先在export default里把你要添加的icon作为data返回，如下：

data() {
        return {
            userIcon: "User",
            lockIcon: "Lock",
        }
    },

然后再给el-input的prefix-icon属性绑定userIcon和lockIcon，如下：

<el-form-item>
        <el-input placeholder="请输入账号" :prefix-icon="userIcon" />
</el-form-item>
<el-form-item>
         <el-input
               placeholder="请输入密码"
               type="password"
               show-password
               :prefix-icon="lockIcon"
          />
</el-form-item>

这样图标就可以显示出来了，注意prefix-icon前一定要加冒号！

Vue3的写法和Vue2有点不一样，具体可以参考下方链接：

https://element-plus.org/zh-CN/component/input.html#%E5%B8%A6%E5%9B%BE%E6%A0%87%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86