0
点赞
收藏
分享

微信扫一扫

element-plus icon 图标最新使用指南

small_Sun 2022-01-20 阅读 173

1:安装

yarn add @element-plus/icons
或者
npm install @element-plus/icons

2: 使用

基础用法(element-plus官网也有说明),可以全局注册组件或者在单个组件中引用,全局注册可以查看vue3全局注册组件
<!-- 用 el-icon 为 SVG 提供属性 -->
// 添加is-loading可以看到图标旋转了起来,但是应该只能在le-icon标签中使用,直接使用在图标组件中无效
<el-icon :size="size" :color="color is-loading">
  <edit />
</el-icon>
<!-- 或者单独使用,不从祖先节点继承任何属性 -->
<edit />

<script lang="ts">
  import { Edit } from '@element-plus/icons'

  export default defineComponent({
    components: {
      // 全名
      [Edit.name]: Edit,
      // 或者以缩写的方式,
      Edit,
    },
  })
</script>
全局使用
全局注册
// main.js
import * as ElementIcon from '@element-plus/icons'
const App = createApp(app)
for(const icon in ElementIcon) {
    App.component(icon, ElementIcon[icon])
}
使用:
一: 直接使用组件名称
<template>
	<Calendar />
	或者
	<el-icon class="is-loading">  // 使用标签可以加is-loading 实现旋转
        <Calendar />
    </el-icon>
</template>
二: 在el-input中使用
<el-input prefix-icon="Lock"></el-input>  // 在el-input中使用不需要加:并且名字需要跟在main.js中的一致
使用阿里矢量图标时建议在template 中使用
<el-input prefix-icon="Lock">
	<template #suffix>
		<i class="iconfont icon-eyeOpen"></i>
	</template>
</el-input>

存在不对的地方,可在评论区指出来,这里只是本人自己的使用方法跟习惯

举报

相关推荐

0 条评论