更新记录

1.2.0（2026-10-15）

  • 大幅扩充图标库：线性图标由 193 个增至 279 个，填充图标由 32 个增至 91 个
  • 线性新增：几何形状（hexagon octagon pentagon diamond circle-dot）、天气自然（sunrise sunset cloud-drizzle cloud-lightning cloud-snow umbrella wind thermometer droplet snowflake leaf flame waves）、媒体（headphones radio disc shuffle repeat airplay tv laptop gamepad webcam）、设备（signal battery-low battery-full gauge hourglass infinity rocket palette magnet lightbulb trophy crown gem）、电商（store wallet banknote ticket calculator）、文件（file-minus file-check file-x file-code folder-open sticky-note receipt newspaper）及方向 / 操作 / 状态补充图标
  • 填充新增：方向箭头、校验 / 关闭 / 加减的圆形与方形、消息、日历时钟、锁、邮件、显示器 / 手机 / 平板、电池电源、奖杯王冠宝石灯泡等，均提供 -fill 后缀
  • 填充图标与线性图标名称成对覆盖，filled 属性可在线性名上直接切换实心

平台兼容性

uni-app(5.0)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ × √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ × ×

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× √ √ ×

hy-icon 纯CSS图标库

hy-icon 是一个 uni-app（Vue2 / Vue3） 的零依赖纯 CSS 图标组件：

  • 图标以 SVG 路径内联在组件内部（icons.js），不引入任何外部字体、图片或网络资源，打包体积可控、离线可用；
  • 通过 CSS mask + background-color 渲染，因此图标为矢量，可任意缩放不失真，颜色可由 color 属性或父级文字颜色（currentColor）随时切换；
  • 内置 270+ 线性图标 与 90+ 填充（实心）图标，涵盖几何、方向、操作、状态、媒体、天气、文件、设备系统、电商社交等场景；
  • 支持 size、color、rotate、spin（loading 旋转）等能力。

示例页面见本工程 pages/icon/icon.vue。

功能特性

  • 零外部依赖：无 iconfont、无图片、无 CDN，所有图形内联于 icons.js
  • 矢量渲染：基于 CSS mask，任意 size 都清晰，颜色随 color / currentColor 变化
  • 动态着色：不传 color 时继承父级 color，可与文字颜色保持一致
  • 尺寸灵活：size 传数字按 rpx，传字符串则原样使用（如 20px、1.5em）
  • 旋转与动画：rotate 任意角度、spin 无限旋转（适合 loading）
  • 线性 / 填充双风格：线性图标名后加 -fill 即为对应的实心风格（如 star → star-fill）；也可用 filled 属性强制切换
  • 易于扩展：在 components/hy-icon/icons.js 的 icons（线性）或 fillIcons（填充）中按 kebab-case 增加一条 SVG 片段即可

安装

将 hy-icon 目录放入项目的 uni_modules 目录即可，组件已支持 easycom，无需手动 import。

基本用法

<template>
    <view>
        <!-- 基础 -->
        <hy-icon name="home" />

        <!-- 尺寸与颜色 -->
        <hy-icon name="settings" :size="48" color="#3b7cff" />

        <!-- 继承父级文字颜色 -->
        <text style="color:#f43b3b">
            <hy-icon name="heart" :size="32" />
        </text>

        <!-- loading 旋转 -->
        <hy-icon name="loader" :size="40" color="#999999" spin />

        <!-- 填充风格：名称加 -fill 后缀 -->
        <hy-icon name="star-fill" :size="40" color="#f59e0b" />

        <!-- 填充风格：也可用 filled 属性强制切换 -->
        <hy-icon name="heart" :size="40" color="#f43b3b" filled />

        <!-- 旋转角度 -->
        <hy-icon name="chevron-right" :size="32" :rotate="90" />

        <!-- 点击事件 -->
        <hy-icon name="x" :size="36" @click="onClose" />
    </view>
</template>

<script>
    export default {
        methods: {
            onClose() {
                uni.showToast({ title: '关闭', icon: 'none' })
            }
        }
    }
</script>

属性 Props

属性 类型 默认值 说明
name String '' 图标名称（kebab-case），见下方图标清单；不存在时不渲染。填充图标使用 -fill 后缀
size Number / String 40 图标尺寸。数字按 rpx，字符串原样（如 20px、1.5em）
color String '' 图标颜色。为空时继承父级文字颜色（currentColor）
filled Boolean false 强制使用填充（实心）风格。name="star" + filled 等价于 name="star-fill"
spin Boolean false 是否无限旋转（常用于 loading）
rotate Number 0 旋转角度（deg），与 spin 同时使用时以外层旋转叠加动画
customStyle Object {} 透传到组件根节点的自定义样式

事件 Events

事件名 回调参数 说明
click event 点击图标时触发

图标清单

线性图标（279 个）

按场景分类（名称即 name 取值）：

几何形状

hexagon octagon pentagon diamond circle-dot circle square triangle

方向 / 导航

arrow-up arrow-down arrow-left arrow-right arrow-up-left arrow-up-right arrow-down-left arrow-down-right arrow-up-circle arrow-down-circle arrow-left-circle arrow-right-circle chevron-up chevron-down chevron-left chevron-right chevrons-up chevrons-down chevrons-left chevrons-right chevrons-up-down chevrons-left-right corner-up-left corner-up-right corner-down-left corner-down-right undo redo maximize minimize maximize-2 minimize-2 expand shrink move move-horizontal move-vertical rewind fast-forward navigation crosshair

操作

x plus minus check search menu more-horizontal more-vertical refresh-cw refresh-ccw refresh-cw-dot rotate-cw rotate-ccw edit edit-2 edit-3 trash trash-2 copy save share download upload filter sliders external-link link link-2 unlink clipboard clipboard-check clipboard-list paperclip scissors crop scan mouse-pointer toggle-left toggle-right

状态 / 提示

info alert-circle alert-circle-2 alert-triangle alert-octagon check-circle x-circle plus-circle minus-circle help-circle bell bell-off eye eye-off lock unlock shield shield-off loader loading check-square x-square plus-square minus-square message-plus user-circle smile frown meh

媒体

play play-circle pause pause-circle stop stop-circle skip-back skip-forward rewind fast-forward volume volume-1 volume-2 volume-x music disc radio headphones image camera video video-off film mic mic-off shuffle repeat airplay tv laptop gamepad webcam fullscreen cast

天气 / 自然

sun sunrise sunset cloud-drizzle cloud-lightning cloud-snow umbrella wind thermometer droplet snowflake leaf flame waves

文件 / 文档

file file-text file-plus file-minus file-check file-x file-code folder folder-plus folder-minus folder-open archive book book-open bookmark sticky-note receipt newspaper inbox layers package box

设备 / 系统

home user users user-plus user-minus user-check user-x settings grid list calendar clock star heart tag flag map map-pin phone phone-call mail message-circle message-square send wifi wifi-off signal bluetooth battery battery-low battery-full battery-charging power gauge hourglass infinity moon cloud cloud-off cloud-rain globe code terminal database server cpu monitor smartphone tablet watch printer hard-drive download-cloud upload-cloud key log-in log-out anchor feather rocket palette magnet lightbulb trophy crown gem award

电商 / 社交 / 数据

shopping-cart shopping-bag credit-card dollar-sign wallet banknote gift ticket store calculator truck thumbs-up thumbs-down at-sign hash compass zap target trending-up trending-down pie-chart bar-chart bar-chart-2 activity percent briefcase coffee

填充图标（91 个）

在线性名称后加 -fill 后缀：

  • 几何形状：circle-fill square-fill triangle-fill hexagon-fill octagon-fill pentagon-fill diamond-fill star-fill heart-fill bookmark-fill
  • 方向 / 导航：arrow-up-fill arrow-down-fill arrow-left-fill arrow-right-fill navigation-fill filter-fill zap-fill
  • 操作：check-fill x-fill plus-fill minus-fill send-fill
  • 状态 / 提示：check-circle-fill x-circle-fill plus-circle-fill minus-circle-fill info-fill alert-circle-fill alert-triangle-fill check-square-fill x-square-fill plus-square-fill minus-square-fill message-plus-fill bell-fill shield-fill user-circle-fill
  • 媒体：play-fill pause-fill stop-fill play-circle-fill pause-circle-fill stop-circle-fill video-fill image-fill camera-fill volume-fill mic-fill headphones-fill
  • 文件 / 文档：file-fill file-text-fill folder-fill book-fill book-open-fill archive-fill layers-fill box-fill package-fill clipboard-fill
  • 设备 / 系统：home-fill user-fill mail-fill lock-fill unlock-fill calendar-fill clock-fill monitor-fill smartphone-fill tablet-fill printer-fill battery-fill power-fill moon-fill cloud-fill map-pin-fill map-fill tag-fill flag-fill trophy-fill crown-fill gem-fill award-fill lightbulb-fill
  • 消息 / 社交：message-circle-fill message-square-fill thumbs-up-fill thumbs-down-fill eye-fill
  • 电商 / 金融：shopping-bag-fill credit-card-fill gift-fill

自定义扩展

在 uni_modules/hy-icon/components/hy-icon/icons.js 的 icons 对象中追加一条即可，值为 24×24 viewBox 的 SVG 内部片段：

export const icons = {
    // ...
    'my-icon': '<circle cx="12" cy="12" r="9"></circle><line x1="12" y1="7" x2="12" y2="12"></line>'
}

组件会自动注入 viewBox="0 0 24 24" 等根属性：线性图标注入 fill="none"、stroke="black"、stroke-width="2"、圆角线帽等；填充图标注入 fill="black"、fill-rule="evenodd"（因此可在同一条 path 内通过子路径挖孔）。因此片段内只需书写形状本身，stroke / fill 的颜色不影响显示（mask 只取形状）。

填充图标同样在 icons.js 的 fillIcons 对象中追加即可，键名建议以 -fill 结尾：

export const fillIcons = {
    // ...
    'my-icon-fill': '<path d="M12 2 2 22h20z"></path>'
}

平台支持

平台 支持情况 说明
H5 / PC √ 浏览器原生支持 CSS mask
App（Android / iOS / HarmonyOS，vue 页面） √ 基于系统 WebView
微信 / 支付宝 / 头条 / 百度 / 快手 / QQ / 飞书 / 小红书小程序 √ 基于小程序 WebView
App（nvue 页面） x nvue 不支持 CSS mask，请使用 vue 页面
uni-app x / uvue x 原生渲染不支持 CSS mask

注意事项

  1. 组件使用 CSS mask-image 指向内联 SVG data URI 实现，必须运行在 WebView 渲染环境（vue 页面 / H5 / 小程序）；nvue 与 uni-app x 原生渲染不支持。
  2. name 传入不存在的图标名时组件不渲染任何内容，请在开发时核对名称（演示页可一键复制名称）。
  3. size 传数字时按 rpx 处理；若需固定像素请传字符串，如 size="24px"。
  4. 深色模式下若未指定 color，图标会自动跟随父级文字颜色（currentColor），无需额外配置。
  5. 本组件不涉及输入框，无 input / textarea 兼容性问题。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。