更新记录

1.0.0（2025-11-13） 下载此版本

• 版本发布

平台兼容性

uni-app x(4.86)

oui-icon-unix（uni-app x 版）

一个针对 uni-app x（uvue/uts）的字体图标库，基于 iconfont 字体文件，提供丰富、轻量、易集成的图标资源。

特性

• 丰富图标库：包含 600+ 个精美图标，涵盖常用场景
• 多端兼容（uni-app x）：支持 App（Android/iOS/Harmony）、Web（H5）、微信小程序
• 灵活配置：支持自定义大小、颜色、样式
• 图片支持：除字体图标外，还支持图片图标
• 轻量高效：基于字体文件，体积小、渲染快
• 易于使用：简单的 API 设计，开箱即用

安装

# 通过 uni_modules 安装（推荐）
# 直接将 oui-icon-unix 文件夹放入 src/uni_modules/ 目录下即可

基础用法

字体图标

<template>
  <view>
    <!-- 基础用法 -->
    <oui-icon-unix name="home" />

    <!-- 自定义大小和颜色 -->
    <oui-icon-unix name="heart" size="24px" color="#ff4757" />
  </view>
</template>

<script lang="uts" setup></script>

图片图标

<template>
  <view>
    <!-- 使用图片路径 -->
    <oui-icon-unix name="/static/icons/custom-icon.png" size="24px" />
  </view>
</template>

事件处理

<template>
  <view>
    <oui-icon-unix name="setting" @click="handleClick" />
  </view>
</template>

<script lang="uts" setup>
function handleClick(e : any) {
  console.log('图标被点击', e)
}
</script>

API

Props

Events

图标列表

常用图标

<!-- 基础图标 -->
<oui-icon-unix name="home" />
<!-- 首页 -->
<oui-icon-unix name="user" />
<!-- 用户 -->
<oui-icon-unix name="setting" />
<!-- 设置 -->
<oui-icon-unix name="search" />
<!-- 搜索 -->
<oui-icon-unix name="heart" />
<!-- 喜欢 -->
<oui-icon-unix name="star" />
<!-- 星标 -->
<oui-icon-unix name="location" />
<!-- 位置 -->
<oui-icon-unix name="phone" />
<!-- 电话 -->
<oui-icon-unix name="mail" />
<!-- 邮件 -->
<oui-icon-unix name="camera" />
<!-- 相机 -->

<!-- 方向图标 -->
<oui-icon-unix name="left" />
<!-- 左箭头 -->
<oui-icon-unix name="right" />
<!-- 右箭头 -->
<oui-icon-unix name="up" />
<!-- 上箭头 -->
<oui-icon-unix name="down" />
<!-- 下箭头 -->

<!-- 操作图标 -->
<oui-icon-unix name="plus" />
<!-- 加号 -->
<oui-icon-unix name="minus" />
<!-- 减号 -->
<oui-icon-unix name="close" />
<!-- 关闭 -->
<oui-icon-unix name="check" />
<!-- 勾选 -->
<oui-icon-unix name="edit" />
<!-- 编辑 -->
<oui-icon-unix name="delete" />
<!-- 删除 -->

社交图标

<oui-icon-unix name="***" />
<!-- 微信 -->
<oui-icon-unix name="qq" />
<!-- QQ -->
<oui-icon-unix name="weibo" />
<!-- 微博 -->
<oui-icon-unix name="alipay" />
<!-- 支付宝 -->
<oui-icon-unix name="facebook" />
<!-- Facebook -->
<oui-icon-unix name="twitter" />
<!-- Twitter -->
<oui-icon-unix name="linkedin" />
<!-- LinkedIn -->
<oui-icon-unix name="github" />
<!-- GitHub -->

文件图标

<oui-icon-unix name="file" />
<!-- 文件 -->
<oui-icon-unix name="folder" />
<!-- 文件夹 -->
<oui-icon-unix name="file-text" />
<!-- 文本文件 -->
<oui-icon-unix name="file-pdf" />
<!-- PDF文件 -->
<oui-icon-unix name="file-excel" />
<!-- Excel文件 -->
<oui-icon-unix name="file-word" />
<!-- Word文件 -->
<oui-icon-unix name="file-ppt" />
<!-- PPT文件 -->
<oui-icon-unix name="file-image" />
<!-- 图片文件 -->

💡 提示：组件包含 600+ 个图标，完整图标列表请查看 uni_modules/oui-icon-unix/components/oui-icon-unix/icons.scss 文件，或在项目中使用开发者工具查看所有可用图标类名。