更新记录

1.6.1（2026-06-11） 下载此版本

新增动画效果

1.6.0（2026-06-11） 下载此版本

[1.0.0] - 2026-06-11

平台兼容性

uni-app(5.0)

其他

i-icon 图标库

225 个精心设计的 SVG 图标，涵盖通用 UI、交易金融、Element 扩展三大分类，支持丰富的动画效果，兼容 uni-app 全平台。

特性

• 225 个图标 — 覆盖通用 UI（40+）、交易金融（30+）、Element 扩展（140+）三大场景
• 纯 SVG 渲染 — 体积小、缩放不失真，无需额外字体文件
• 10 种动画 — spin / pulse / bounce / shake / fade / flash / jackInTheBox / fold / flash-green / flash-red
• 全平台兼容 — Vue / App / H5 / 微信小程序 / 支付宝小程序 / 百度小程序 / 抖音小程序 / QQ小程序
• 零依赖 — 独立 uni_modules 插件，无需引入任何第三方库
• 类型支持 — 提供完整的 TypeScript 类型定义

快速开始

安装

在 HBuilderX 中通过 uni_modules 市场搜索 i-icon 安装，或手动将 uni_modules/i-icon 目录放入项目中。

基础用法

<template>
  <view>
    <!-- 基础图标 -->
    <i-icon name="home" />

    <!-- 自定义尺寸和颜色 -->
    <i-icon name="user" size="32" color="#007AFF" />

    <!-- 带动画的图标 -->
    <i-icon name="loading" animation="spin" />

    <!-- 点击事件 -->
    <i-icon name="close" @click="handleClose" />
  </view>
</template>

Props

事件

动画

图标列表

通用 UI（40+ 个）

home search user settings close check arrow-left arrow-right arrow-up arrow-down plus minus bell star heart eye eye-off copy share filter refresh menu more edit delete scan qrcode lock unlock download upload image camera calendar clock location mail message-circle phone bookmark folder file cloud alert-circle help-circle thumbs-up cart credit-card tag play pause monitor gift

交易 / 金融（30+ 个）

wallet chart kline trend-up trend-down swap send receive deposit withdraw history order percent dollar coin safe shield flash globe link-icon bank calculator target bar-chart pie-chart activity users list grid layers compass award

UI 扩展（140+ 个）

方向指示： caret-left caret-right caret-bottom caret-top back right top bottom d-arrow-left d-arrow-right sort sort-up sort-down rank view

状态反馈： success error warning warning-outline info question loading finished remove circle-plus circle-check circle-close

媒体控制： video-camera video-camera-solid video-play video-pause camera-solid picture picture-outline mic microphone

操作工具： zoom-in zoom-out full-screen switch-button crop aim setting printer paperclip scissors headset mouse umbrella key stopwatch

设备通讯： mobile mobile-phone message chat-round chat-square chat-dot-round chat-line-square

文档文件： document document-add document-checked document-copy document-delete tickets files notebook-1 folder-opened folder-add folder-checked

电商交易： bank-card money discount price-tag sold-out sell present box shopping-cart-full s-home s-shop s-order s-data s-finance s-marketing s-platform s-tools s-check s-grid s-flag s-comment

天气时间： sunny moon lightning cloudy sunrise sunset heavy-rain date time timer alarm-clock

人物位置： male female service position place map-location discover

通用符号： link connection open turn-off set-up thumb medal trophy first-aid-kit reading

数据图表： data-line data-board data-analysis

交通出行： truck bicycle ship

建筑场所： house office-building school

餐饮美食： food coffee ice-cream dish

运动： basketball football baseball

其他： edit-outline refresh-right refresh-left collection news guide

完整示例

<template>
  <view class="demo">
    <!-- 交易面板常见用法 -->
    <view class="trade-panel">
      <view class="price-row">
        <i-icon name="trend-up" color="#00C853" animation="flash-green" />
        <text class="price-up">+5.23%</text>
      </view>
      <view class="price-row">
        <i-icon name="trend-down" color="#FF5252" animation="flash-red" />
        <text class="price-down">-2.18%</text>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="tab-bar">
      <i-icon name="s-home" size="28" color="#333" />
      <i-icon name="kline" size="28" color="#999" />
      <i-icon name="s-order" size="28" color="#999" />
      <i-icon name="user" size="28" color="#999" />
    </view>

    <!-- 按钮中的图标 -->
    <view class="btn" @click="handleRefresh">
      <i-icon name="refresh" size="16" color="#fff" animation="spin" />
      <text>刷新中...</text>
    </view>
  </view>
</template>

TypeScript 类型支持

组件提供完整的 TypeScript 类型定义，位于 types/i-icon.d.ts：

import type { IconName, AnimationType, IIconProps } from '@/uni_modules/i-icon/types/i-icon'

// 自动补全图标名称
const icon: IconName = 'trend-up'

// 自动补全动画类型  
const anim: AnimationType = 'spin'

// 图标分类常量
import { ICON_CATEGORIES } from '@/uni_modules/i-icon/types/i-icon'
console.log(ICON_CATEGORIES.UI)     // 通用 UI 图标名称数组
console.log(ICON_CATEGORIES.TRADE)  // 交易金融图标名称数组
console.log(ICON_CATEGORIES.ELEMENT) // Element 扩展图标名称数组

兼容平台

License

MIT