# ui-icon+图标组件
版本：v2.3.11
图标组件用于在页面中显示各种图标，支持丰富的图标库和自定义样式。
# 基本使用
<template>
<view class="icon-demo">
<!-- 基础图标 -->
<text class="iconfont icon-home"></text>
<text class="iconfont icon-search"></text>
<text class="iconfont icon-user"></text>
<text class="iconfont icon-settings"></text>
<!-- 带颜色的图标 -->
<text class="iconfont icon-heart" style="color: #ff4444;"></text>
<text class="iconfont icon-star" style="color: #ffcc00;"></text>
<!-- 不同大小的图标 -->
<text class="iconfont icon-arrow-left" style="font-size: 20px;"></text>
<text class="iconfont icon-arrow-right" style="font-size: 30px;"></text>
<text class="iconfont icon-arrow-up" style="font-size: 40px;"></text>
</view>
</template>
<style>
/* 引入图标字体 */
@import url('https://shadow-ui3-demo.nooko.cn/static/iconfont.css');
.icon-demo {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.iconfont {
font-size: 24px;
color: #333;
}
</style>
# 图标库
ShadowUI3 内置了丰富的图标库，包含以下几大类：
# 常用图标
icon-home- 首页icon-search- 搜索icon-user- 用户icon-settings- 设置icon-heart- 心形icon-star- 星星icon-message- 消息icon-bell- 通知icon-shopping-cart- 购物车
# 方向图标
icon-arrow-left- 左箭头icon-arrow-right- 右箭头icon-arrow-up- 上箭头icon-arrow-down- 下箭头icon-back- 返回icon-forward- 前进
# 功能图标
icon-add- 添加icon-delete- 删除icon-edit- 编辑icon-save- 保存icon-share- 分享icon-download- 下载icon-upload- 上传icon-refresh- 刷新
# 社交图标
icon-weixin- 微信icon-qq- QQicon-weibo- 微博icon-taobao- 淘宝icon-douyin- 抖音icon-pinduoduo- 拼多多
# 自定义样式
# 修改图标大小
<template>
<view>
<text class="iconfont icon-home" style="font-size: 20px;"></text>
<text class="iconfont icon-home" style="font-size: 30px;"></text>
<text class="iconfont icon-home" style="font-size: 40px;"></text>
</view>
</template>
# 修改图标颜色
<template>
<view>
<text class="iconfont icon-heart" style="color: #ff4444;"></text>
<text class="iconfont icon-star" style="color: #ffcc00;"></text>
<text class="iconfont icon-check" style="color: #00cc88;"></text>
</view>
</template>
# 图标动画
<template>
<view>
<text class="iconfont icon-refresh icon-spin"></text>
<text class="iconfont icon-loading icon-spin"></text>
</view>
</template>
<style>
.icon-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
# 图标使用示例
# 在按钮中使用图标
<template>
<view>
<ui-button>
<text class="iconfont icon-search"></text>
<text>搜索</text>
</ui-button>
<ui-button type="primary">
<text class="iconfont icon-cart"></text>
<text>加入购物车</text>
</ui-button>
</view>
</template>
# 在导航栏中使用图标
<template>
<view class="navbar">
<text class="iconfont icon-back" @tap="goBack"></text>
<text class="title">页面标题</text>
<text class="iconfont icon-more" @tap="showMore"></text>
</view>
</template>
<script setup>
const goBack = () => {
uni.navigateBack()
}
const showMore = () => {
// 显示更多操作
}
</script>
<style>
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.iconfont {
font-size: 24px;
color: #333;
}
.title {
font-size: 18px;
font-weight: bold;
}
</style>
# 在列表中使用图标
<template>
<view class="list">
<view class="list-item" v-for="item in list" :key="item.id">
<text class="iconfont" :class="item.icon"></text>
<text class="item-text">{{ item.text }}</text>
<text class="iconfont icon-arrow-right"></text>
</view>
</view>
</template>
<script setup>
const list = [
{ id: 1, text: '个人资料', icon: 'icon-user' },
{ id: 2, text: '我的订单', icon: 'icon-order' },
{ id: 3, text: '收货地址', icon: 'icon-location' },
{ id: 4, text: '设置', icon: 'icon-settings' }
]
</script>
<style>
.list {
background-color: #fff;
}
.list-item {
display: flex;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.iconfont {
font-size: 20px;
color: #666;
margin-right: 15px;
}
.item-text {
flex: 1;
font-size: 16px;
}
.list-item .icon-arrow-right {
color: #ccc;
margin-right: 0;
}
</style>
# 图标搜索
您可以在 ShadowUI3 图标库 (opens new window) 中搜索和复制所需的图标代码。
# 注意事项
- 使用图标前，请确保已引入图标字体文件
- 图标名称区分大小写，请严格按照文档中的名称使用
- 可以通过修改 CSS 样式来自定义图标的大小、颜色和动画效果
- 建议在全局样式中定义
.iconfont类的基础样式，以便在整个应用中保持一致
← 布局系统