更新记录

1.0.4（2026-10-15）

重构心形命名与几何：heart 改为空心轮廓、heart-fill 为实心（原 heart-outline 名称取消），两者共用同一构造（两瓣圆 + 切线段收尖），外轮廓与填充完全一致、顶部缺口自然，图标总数仍为 90
修复图标在较小尺寸下位置错乱：组件引入固定内部坐标系（基准 100）绘制图元，再由外层容器整体等比 scale 缩放，避免逐图元按像素换算产生的累积取整误差

平台兼容性

uni-app(5.0)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√	√

其他

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

hy-css-icon 纯CSS图标库（全平台）

一个完全不依赖 SVG、字体文件、图片与网络资源的图标组件。所有图标均由 <view> 的盒子模型（background-color / border / border-radius / transform）绘制，因此可在 uni-app 全部平台（H5、各小程序、App-vue、App-nvue）稳定运行。

uni-app x（uvue）请使用配套插件 hy-css-icon-x。

特性

纯 CSS 绘制：不引入 iconfont、SVG 路径或 base64 图片，零网络请求
全平台可用：包括 nvue 原生渲染在内，不依赖 CSS mask
矢量缩放：基于比例渲染，任意 size 不失真
动态着色：color 为空时继承父级 currentColor，随文字颜色变化
支持 rotate 任意角度旋转与 spin 匀速旋转（loading）
内置 90 个常用几何 / 符号 / 操作 / 功能类图标
图标名不存在时安全降级为不渲染

平台支持

平台	支持
H5 / Web	√
App（vue 页面）	√
App（nvue 页面）	√
微信 / 支付宝 / 字节 / 百度 / 快手 / QQ / 京东等小程序	√
鸿蒙 / 快应用	√
uni-app x	使用 `hy-css-icon-x`

安装

插件市场导入 hy-css-icon，或直接将 uni_modules/hy-css-icon 复制到项目根目录。组件支持 easycom，无需手动注册。

基本用法

<template>
    <view>
        <!-- 默认尺寸与颜色（继承文字颜色） -->
        <hy-css-icon name="check" />

        <!-- 指定尺寸（rpx）与颜色 -->
        <hy-css-icon name="close" :size="48" color="#f43b3b" />

        <!-- 旋转 90 度 -->
        <hy-css-icon name="arrow-right" :size="40" :rotate="90" />

        <!-- 匀速旋转（loading） -->
        <hy-css-icon name="sun" :size="40" color="#3b7cff" spin />

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

Props

属性	类型	默认值	说明
`name`	String	`''`	图标名，见下方清单；不存在时不渲染
`size`	Number \| String	`48`	图标尺寸。数字按 `rpx` 处理；也可传 `'40px'` / `'80rpx'`
`color`	String	`''`	图标颜色，为空时使用 `currentColor`（继承父级文字颜色）
`rotate`	Number \| String	`0`	旋转角度（deg）
`spin`	Boolean	`false`	是否匀速旋转（旋转时忽略 `rotate`）
`customStyle`	String	`''`	追加到根节点的内联样式

事件

事件	说明	回调参数
`click`	点击图标	原生事件对象

图标清单（90）

基础符号：plus minus close check equal slash percent ellipsis more-vertical menu

方向箭头：arrow-up arrow-down arrow-left arrow-right arrow-up-right arrow-down-left

折线指示：chevron-up chevron-down chevron-left chevron-right

实心三角：caret-up caret-down caret-left caret-right

几何图形：triangle square square-fill circle circle-fill dot circle-dot diamond diamond-fill grid

媒体控制：play pause stop record

圆形组合：plus-circle minus-circle check-circle close-circle info alert

方形组合：plus-square minus-square check-square close-square

常用场景：home user search settings gear star star-fill clock calendar list

编辑与文件：trash edit download upload refresh folder file copy link save image

通信与媒体：mail comment bookmark camera map-pin credit-card bell battery

其他：heart heart-fill power sun lock unlock filter share code terminal fullscreen zoom-in zoom-out

说明

图标尺寸按比例换算为像素渲染，nvue 与各小程序均已适配。
若需在 nvue 下继承文字颜色，请显式传入 color（部分原生渲染环境对 currentColor 支持有限）。
nvue（App 原生渲染）注意：
- Android 端对超出根节点 size 边界的部分会裁剪，因此图标图元均已内收在可视范围内；如自行扩展图元请勿越界。
- 折角（chevron）采用「双边着色方块」绘制，依赖按边设置边框颜色，需 HBuilderX 3.1.0+。
- 实心三角（triangle / caret-* / 箭头 / play）采用零尺寸盒子的边框绘制，极少数原生渲染器可能不绘制零尺寸元素；如遇不显示可改用 App-vue / H5 / 小程序 / uni-app x。
- spin 依赖 @keyframes 动画，部分 nvue 版本仅支持 transition，动画可能无效。
组件覆盖几何 / 符号类图标与部分常见功能图标（以简化几何形态绘制）；高度写实的插画类图标不属于纯 CSS 绘制能力范围。