首页 > 其他分享 >如何使用element-plus中的icon

如何使用element-plus中的icon

时间:2022-11-11 11:58:42浏览次数:72  
标签:E5% element plus 使用 图标 icon

全局安装和自动按需安装后的使用方法:

到官网图标集合:

https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88

点击图标复制,直接在页面中使用:例如第一个:

<el-icon><Plus /></el-icon>

手动按需安装的使用方法:

先在script里引入icon和图标

<script setup lang='ts'>
import { ElIcon } from "element-plus";
import { Loading } from "@element-plus/icons-vue";
</script>

然后使用

<template>
    <div>
        <el-icon>
            <Loading />
        </el-icon>
    </div>
</template>

 

标签:E5%,element,plus,使用,图标,icon
From: https://www.cnblogs.com/lovewhatIlove/p/16872376.html

相关文章

  • nuxt3引入element-plus的三种方法
    1、全部引入安装element-plus依赖npminstallelement-plus--save在nuxt3项目中plugins下新建一个element-plus.client.ts文件 在element-plus.client.ts文件中输......
  • 迎合mybatisPlus分页
    //写在BaseController类里的通用分页方法protected<T>Page<T>startPagePlus(){PageDomainpageDomain=TableSupport.buildPageRequest();IntegerpageNum......
  • MybatisPlus Caused by: java.sql.BatchUpdateException: Field 'id' doesn't have a
    在使用MybatisPlus时,使用saveBatch()批量保存数据的时候报错Causedby:java.sql.BatchUpdateException:Field'id'doesn'thaveadefaultvalue,这是因为MybatisPlus不......
  • iconfont图标显示错误
    前段时间同事发现引用的iconfont图标显示错误了。在iconfont官网上的图标跟项目中引用的图标不一致。代码相同,但是引用过来的图标就是不一样。看着出错的图标跟我引用的一......
  • vue-element-admin install error
    vue-element-admininstallerror#安装nodejsdnfmoduleresetnodejsdnfmoduleinstallnodejs:16npminstall-gpnpmvi~/.npmrc粘贴以下3行registry=http:/......
  • elementui中el-checkbox 选中时的详细介绍
    checkbox-group把多个checkbox管理为一组(需要注意的坑)很多时候我们需要会遇见这样的场景。比如用户需要选择多个值.这个时候我们需要把多个checkbox放置在checkbox......
  • ApiContainer
    1packagecom.-.it.regioc.container;23importcn.hutool.core.collection.CollectionUtil;4importcom.huawei.it.regioc.bean.apiconfig.ApiTemplate;5i......
  • SpringBoot 整合mybatis-plus
    SpringBoot整合mybatis-plus1、导入Maven依赖<dependencies><!--web依赖--><dependency><groupId>org.springframework.boot</groupId>......
  • vue3:elementPlus的dailog组件title标题位置设置
     按照官网打开弹出窗想要的是这种效果但自己出现的是下面这种,title跑中间了,body区唯一一个控件,也跑到下面了   设置el-dialog__header高度后,高度的确发生了变......
  • Android Menu工具栏菜单选项显示Icon图标
    将此段代码放到Acitivity@SuppressLint("RestrictedApi")overridefunonCreateOptionsMenu(menu:Menu?):Boolean{ if(menuisMenuBuilder){ menu.setOptional......