关于prefix-icon

Question

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

Answer 1

fly_烟雨行舟 2022-03-24 23:38:56

直接上代码：

<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>

• 雨辰悠悠 #1

  文档看的真细节

Answer 2

慕粉3946981 2022-02-06 17:16:35

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

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

Answer 3

尧儿 2021-12-03 18:33:13

main.js里面统一注册icon

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

• 慕盖茨3042173 #1

  解决了，感谢

Answer 4

桐子酱Virginia 2023-12-27 23:34:46

其实也还是可以使用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

Answer 5

古宋适 2021-11-01 20:49:50

官网文档有关于怎么在输入框上使用 icon的：Input 输入框 | Element Plus (gitee.io)

不过我使用 prefix-icon 属性不行，使用插槽的方式就可以，有点奇怪

• 提问者 weixin_慕前端5001913 #1

  是的，今天才看到有插槽的写法，不过我没用最新版的elementplus，prefix-icon还能使用，估计最新版全面废除font-icon了吧

Answer 6

河畔一角 2021-10-28 17:38:20

请参考官方文档：https://element-plus.gitee.io/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8svg%E5%9B%BE%E6%A0%87

官方已经给了使用示例和说明。

<el-icon> <apple /> </el-icon>

使用el-con包裹svg图标。

• 提问者 weixin_慕前端5001913 #1

  这是svg图标的基础用法，我是想知道如何将它用到el-input的prefix-icon属性里

• 河畔一角 #2

  svg不能用在prefix-icon里面，class里面只能用图标字体