# ui-icon 图标组件
版本：v2.3.11
图标组件用于在页面中展示各种图标，ShadowUI3 提供了丰富的图标库供开发者使用。
# 基本使用
# 引入图标
在使用图标前，需要确保项目中已经引入了图标字体文件。
<!-- 图标基本用法 -->
<view class="iconfont icon-home"></view>
<!-- 图标大小控制 -->
<view class="iconfont icon-home" style="font-size: 32rpx;"></view>
<view class="iconfont icon-home" style="font-size: 48rpx;"></view>
<view class="iconfont icon-home" style="font-size: 64rpx;"></view>
<!-- 图标颜色控制 -->
<view class="iconfont icon-home" style="color: #01AAED;"></view>
<view class="iconfont icon-home" style="color: #009688;"></view>
<view class="iconfont icon-home" style="color: #FF5722;"></view>
# 图标列表
# 常用图标
| 图标名称 | 图标类名 | 说明 |
|---|---|---|
| 首页 | icon-home | 首页导航图标 |
| 搜索 | icon-sousuo | 搜索功能图标 |
| 设置 | icon-xitong | 设置功能图标 |
| 用户 | icon-jurassic_user | 用户相关图标 |
| 消息 | icon-xinxi | 消息通知图标 |
| 购物车 | icon-gouwuche_huaban | 购物车图标 |
| 收藏 | icon-shoucang | 收藏功能图标 |
| 分享 | icon-fenxiang | 分享功能图标 |
| 点赞 | icon-dianzan | 点赞功能图标 |
| 评论 | icon-liuyan1 | 评论功能图标 |
| 编辑 | icon-bianji | 编辑功能图标 |
| 删除 | icon-del | 删除功能图标 |
| 添加 | icon-tianjia | 添加功能图标 |
| 减号 | icon-iconfontmove | 减号图标 |
| 箭头左 | icon-zuo | 向左箭头图标 |
| 箭头右 | icon-you | 向右箭头图标 |
| 箭头上 | icon-shang | 向上箭头图标 |
| 箭头下 | icon-xia | 向下箭头图标 |
| 更多 | icon-weibiaoti2010103 | 更多功能图标 |
# 方向图标
| 图标名称 | 图标类名 |
|---|---|
| 向左 | icon-xiangzuo |
| 向右 | icon-youxia |
| 向上 | icon-xiangshang |
| 向下 | icon-xiangxia |
| 左上 | icon-zuoshang |
| 右上 | icon-youshang |
# 功能图标
| 图标名称 | 图标类名 |
|---|---|
| 保存 | icon-iconset0238 |
| 复制 | icon-fuzhi |
| 裁剪 | icon-caijian |
| 导入 | icon-daoru |
| 导出 | icon-tijiao |
| 放大 | icon-fangda |
| 缩小 | icon-suoxiao |
| 最大化 | icon-fangda1 |
| 最小化 | icon-suoxiao1 |
| 刷新 | icon-nizhuan |
| 重做 | icon-Group- |
# 搜索图标
可以通过关键字搜索图标，支持的搜索方式：
- 直接输入图标名称（如：首页、搜索）
- 输入图标关键字（如：房子、放大镜）
- 输入图标英文名（如：home、search）
# 图标使用技巧
- 图标大小：通过调整
font-size属性控制图标大小 - 图标颜色：通过调整
color属性控制图标颜色 - 图标组合：可以将图标与文字、按钮等元素组合使用
- 图标事件：可以为图标添加点击事件，实现交互功能
# 自定义图标
如果需要使用自定义图标，可以按照以下步骤操作：
- 将自定义图标上传到图标字体库（如：iconfont.cn）
- 下载图标字体文件
- 在项目中引入自定义图标字体
- 使用自定义图标类名
# 注意事项
- 图标类名必须以
icon-开头 - 所有图标都需要使用
iconfont基础类名 - 图标大小建议使用
rpx单位，以适应不同屏幕尺寸 - 图标颜色建议使用主题色变量，以保持样式统一