element-plus 最新SvgIcon图标最新使用指南
1:安装yarn add @element-plus/icons或者npm install @element-plus/icons2: 使用基础用法(element-plus官网也有说明),可以全局注册组件或者在单个组件中引用,全局注册可以查看vue3全局注册组件<!-- 用 el-icon 为 SVG 提供属性 -->// 添加is-loading可以看到图标旋转了起来,但是应该只能
·
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>
存在不对的地方,可在评论区指出来,这里只是本人自己的使用方法跟习惯
更多推荐
已为社区贡献1条内容
所有评论(0)