layui/example/docs/zh-CN/components/icon.md
2022-02-01 21:48:39 +08:00

43 KiB

::: anchor :::

::: title 基础使用 :::

::: demo 使用 lay-icon 标签, 创建图标组件

:::

::: title 图标颜色 :::

::: demo 使用 color 属性设置颜色

           

:::

::: title 图标尺寸 :::

::: demo 使用 size 属性设置尺寸

:::

::: title 图标组件 :::


::: describe 在 0.2.4 版本后, 图标支持组件化的调用方式, 首先你需要安装 @layui/icons-vue 依赖。 :::

npm install @layui/icons-vue

::: describe 接下来, 你可以像之前使用组件一样去创建图标。 :::

<template>
  <!-- 组件图标 -->
  <AlignCenterIcon></AlignCenterIcon>
  <DiamondIcon></DiamondIcon>
</template>

<script setup>
  import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
</script>

::: title 图标列表 :::

  • 实心
    &#xe68f;
    layui-icon-heart-fill
  • 空心
    &#xe68c;
    layui-icon-heart
  • 亮度/晴
    &#xe748;
    layui-icon-light
  • 时间/历史
    &#xe68d;
    layui-icon-time
  • 蓝牙
    &#xe689;
    layui-icon-bluetooth
  • @艾特
    &#xe687;
    layui-icon-at
  • 静音
    &#xe685;
    layui-icon-mute
  • 录音/麦克风
    &#xe6dc;
    layui-icon-mike
  • 密钥/钥匙
    &#xe683;
    layui-icon-key
  • 礼物/活动
    &#xe627;
    layui-icon-gift
  • 邮箱
    &#xe618;
    layui-icon-email
  • RSS
    &#xe808;
    layui-icon-rss
  • WiFi
    &#xe7e0;
    layui-icon-wifi
  • 退出/注销
    &#xe682;
    layui-icon-logout
  • Android 安卓
    &#xe684;
    layui-icon-android
  • Apple IOS 苹果
    &#xe680;
    layui-icon-ios
  • Windows
    &#xe67f;
    layui-icon-windows
  • 穿梭框
    &#xe691;
    layui-icon-transfer
  • 客服
    &#xe626;
    layui-icon-service
  • &#xe67e;
    layui-icon-subtraction
  • &#xe624;
    layui-icon-addition
  • 滑块
    &#xe714;
    layui-icon-slider
  • 打印
    &#xe66d;
    layui-icon-print
  • 导出
    &#xe67d;
    layui-icon-export
  • &#xe610;
    layui-icon-cols
  • 退出全屏
    &#xe758;
    layui-icon-screen-restore
  • 全屏
    &#xe622;
    layui-icon-screen-full
  • 半星
    &#xe6c9;
    layui-icon-rate-half
  • 星星-空心
    &#xe67b;
    layui-icon-rate
  • 星星-实心
    &#xe67a;
    layui-icon-rate-solid
  • 手机
    &#xe678;
    layui-icon-cellphone
  • 验证码
    &#xe679;
    layui-icon-vercode
  • 微信
    &#xe677;
    layui-icon-login-wechat
  • QQ
    &#xe676;
    layui-icon-login-qq
  • 微博
    &#xe675;
    layui-icon-login-weibo
  • 密码
    &#xe673;
    layui-icon-password
  • 用户名
    &#xe66f;
    layui-icon-username
  • 刷新-粗
    &#xe9aa;
    layui-icon-refresh-3
  • 授权
    &#xe672;
    layui-icon-auz
  • 左向右伸缩菜单
    &#xe66b;
    layui-icon-spread-left
  • 右向左伸缩菜单
    &#xe668;
    layui-icon-shrink-right
  • 雪花
    &#xe6b1;
    layui-icon-snowflake
  • 提示说明
    &#xe702;
    layui-icon-tips
  • 便签
    &#xe66e;
    layui-icon-note
  • 主页
    &#xe68e;
    layui-icon-home
  • 高级
    &#xe674;
    layui-icon-senior
  • 刷新
    &#xe669;
    layui-icon-refresh
  • 刷新
    &#xe666;
    layui-icon-refresh-1
  • 旗帜
    &#xe66c;
    layui-icon-flag
  • 主题
    &#xe66a;
    layui-icon-theme
  • 消息-通知
    &#xe667;
    layui-icon-notice
  • 网站
    &#xe7ae;
    layui-icon-website
  • 控制台
    &#xe665;
    layui-icon-console
  • 表情-惊讶
    &#xe664;
    layui-icon-face-surprised
  • 设置-空心
    &#xe716;
    layui-icon-set
  • 模板
    &#xe656;
    layui-icon-template-1
  • 应用
    &#xe653;
    layui-icon-app
  • 模板
    &#xe663;
    layui-icon-template
  • &#xe6c6;
    layui-icon-praise
  • &#xe6c5;
    layui-icon-tread
  • &#xe662;
    layui-icon-male
  • &#xe661;
    layui-icon-female
  • 相机-空心
    &#xe660;
    layui-icon-camera
  • 相机-实心
    &#xe65d;
    layui-icon-camera-fill
  • 菜单-水平
    &#xe65f;
    layui-icon-more
  • 菜单-垂直
    &#xe671;
    layui-icon-more-vertical
  • 金额-人民币
    &#xe65e;
    layui-icon-rmb
  • 金额-美元
    &#xe659;
    layui-icon-dollar
  • 钻石-等级
    &#xe735;
    layui-icon-diamond
  • &#xe756;
    layui-icon-fire
  • 返回
    &#xe65c;
    layui-icon-return
  • 位置-地图
    &#xe715;
    layui-icon-location
  • 办公-阅读
    &#xe705;
    layui-icon-read
  • 调查
    &#xe6b2;
    layui-icon-survey
  • 表情-微笑
    &#xe6af;
    layui-icon-face-smile
  • 表情-哭泣
    &#xe69c;
    layui-icon-face-cry
  • 购物车
    &#xe698;
    layui-icon-cart-simple
  • 购物车
    &#xe657;
    layui-icon-cart
  • 下一页
    &#xe65b;
    layui-icon-next
  • 上一页
    &#xe65a;
    layui-icon-prev
  • 上传-空心-拖拽
    &#xe681;
    layui-icon-upload-drag
  • 上传-实心
    &#xe67c;
    layui-icon-upload
  • 下载-圆圈
    &#xe601;
    layui-icon-download-circle
  • 组件
    &#xe857;
    layui-icon-component
  • 文件-粗
    &#xe655;
    layui-icon-file-b
  • 用户
    &#xe770;
    layui-icon-user
  • 发现-实心
    &#xe670;
    layui-icon-find-fill
  • loading
    &#xe63d;
    layui-icon-loading
  • loading
    &#xe63e;
    layui-icon-loading-1
  • 添加
    &#xe654;
    layui-icon-add-1
  • 播放
    &#xe652;
    layui-icon-play
  • 暂停
    &#xe651;
    layui-icon-pause
  • 音频-耳机
    &#xe6fc;
    layui-icon-headset
  • 视频
    &#xe6ed;
    layui-icon-video
  • 语音-声音
    &#xe688;
    layui-icon-voice
  • 消息-通知-喇叭
    &#xe645;
    layui-icon-speaker
  • 删除线
    &#xe64f;
    layui-icon-fonts-del
  • 代码
    &#xe64e;
    layui-icon-fonts-code
  • HTML
    &#xe64b;
    layui-icon-fonts-html
  • 字体加粗
    &#xe62b;
    layui-icon-fonts-strong
  • 删除链接
    &#xe64d;
    layui-icon-unlink
  • 图片
    &#xe64a;
    layui-icon-picture
  • 链接
    &#xe64c;
    layui-icon-link
  • 表情-笑-粗
    &#xe650;
    layui-icon-face-smile-b
  • 左对齐
    &#xe649;
    layui-icon-align-left
  • 右对齐
    &#xe648;
    layui-icon-align-right
  • 居中对齐
    &#xe647;
    layui-icon-align-center
  • 字体-下划线
    &#xe646;
    layui-icon-fonts-u
  • 字体-斜体
    &#xe644;
    layui-icon-fonts-i
  • Tabs 选项卡
    &#xe62a;
    layui-icon-tabs
  • 单选框-选中
    &#xe643;
    layui-icon-radio
  • 单选框-候选
    &#xe63f;
    layui-icon-circle
  • 编辑
    &#xe642;
    layui-icon-edit
  • 分享
    &#xe641;
    layui-icon-share
  • 删除
    &#xe640;
    layui-icon-delete
  • 表单
    &#xe63c;
    layui-icon-form
  • 手机-细体
    &#xe63b;
    layui-icon-cellphone-fine
  • 聊天 对话 沟通
    &#xe63a;
    layui-icon-dialogue
  • 文字格式化
    &#xe639;
    layui-icon-fonts-clear
  • 窗口
    &#xe638;
    layui-icon-layer
  • 日期
    &#xe637;
    layui-icon-date
  • 水 下雨
    &#xe636;
    layui-icon-water
  • 代码-圆圈
    &#xe635;
    layui-icon-code-circle
  • 轮播组图
    &#xe634;
    layui-icon-carousel
  • 翻页
    &#xe633;
    layui-icon-prev-circle
  • 布局
    &#xe632;
    layui-icon-layouts
  • 工具
    &#xe631;
    layui-icon-util
  • 选择模板
    &#xe630;
    layui-icon-templeate-1
  • 上传-圆圈
    &#xe62f;
    layui-icon-upload-circle
  • &#xe62e;
    layui-icon-tree
  • 表格
    &#xe62d;
    layui-icon-table
  • 图表
    &#xe62c;
    layui-icon-chart
  • 图标 报表 屏幕
    &#xe629;
    layui-icon-chart-screen
  • 引擎
    &#xe628;
    layui-icon-engine
  • 下三角
    &#xe625;
    layui-icon-triangle-d
  • 右三角
    &#xe623;
    layui-icon-triangle-r
  • 文件
    &#xe621;
    layui-icon-file
  • 设置-小型
    &#xe620;
    layui-icon-set-sm
  • 减少-圆圈
    &#xe616;
    layui-icon-reduce-circle
  • 添加-圆圈
    &#xe61f;
    layui-icon-add-circle
  • 404
    &#xe61c;
    layui-icon-404
  • 关于
    &#xe60b;
    layui-icon-about
  • 箭头 向上
    &#xe619;
    layui-icon-up
  • 箭头 向下
    &#xe61a;
    layui-icon-down
  • 箭头 向左
    &#xe603;
    layui-icon-left
  • 箭头 向右
    &#xe602;
    layui-icon-right
  • 圆点
    &#xe617;
    layui-icon-circle-dot
  • 搜索
    &#xe615;
    layui-icon-search
  • 设置-实心
    &#xe614;
    layui-icon-set-fill
  • 群组
    &#xe613;
    layui-icon-group
  • 好友
    &#xe612;
    layui-icon-friends
  • 回复 评论 实心
    &#xe611;
    layui-icon-reply-fill
  • 菜单 隐身 实心
    &#xe60f;
    layui-icon-menu-fill
  • 记录
    &#xe60e;
    layui-icon-log
  • 图片-细体
    &#xe60d;
    layui-icon-picture-fine
  • 表情-笑-细体
    &#xe60c;
    layui-icon-face-smile-fine
  • 列表
    &#xe60a;
    layui-icon-list
  • 发布 纸飞机
    &#xe609;
    layui-icon-release
  • 对 OK
    &#xe605;
    layui-icon-ok
  • 帮助
    &#xe607;
    layui-icon-help
  • 客服
    &#xe606;
    layui-icon-chat
  • top 置顶
    &#xe604;
    layui-icon-top
  • 收藏-空心
    &#xe600;
    layui-icon-star
  • 收藏-实心
    &#xe658;
    layui-icon-star-fill
  • 关闭-实心
    &#x1007;
    layui-icon-close-fill
  • 关闭-空心
    &#x1006;
    layui-icon-close
  • 正确
    &#x1005;
    layui-icon-ok-circle
  • 添加-圆圈-细体
    &#xe608;
    layui-icon-add-circle-fine

::: title 图标属性 :::

::: table

属性 描述 默认值
type 图标 layui-icon-home
prefix 前缀 layui-icon
color 颜色 --
size 尺寸 --

:::

::: comment :::

::: previousNext iconfont :::