更新记录

1.0.4（2026-10-15）

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

平台兼容性

uni-app x(5.07)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	√	√	√	√

其他

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

hy-css-icon-x 纯CSS图标库（uni-app x）

hy-css-icon-x 是一个基于 uni-app x（uvue + UTS） 的图标组件。所有图标均由 <view> 的盒子模型（background-color / border / border-radius / transform）绘制，不依赖 SVG、字体文件、图片与网络资源，在 uni-app x 的各原生渲染平台稳定运行。

与 uni-app（Vue2 / Vue3）版 hy-css-icon 的差异：本组件脚本采用 <script setup lang="uts"> 写法，并使用 uni.rpx2px 做尺寸换算。

功能特性

纯 CSS 绘制：不引入 iconfont、SVG 路径或 base64 图片，零网络请求
原生渲染友好：不依赖 CSS mask，App-Android / App-iOS / App-Harmony 均可运行
矢量缩放：基于比例渲染，任意 size 不失真
动态着色：color 为空时使用 currentColor
支持 rotate 任意角度旋转与 spin 匀速旋转（loading）
内置 90 个常用几何 / 符号 / 操作 / 功能类图标
图标名不存在时安全降级为不渲染

平台支持

平台	支持
App-Android / App-iOS / App-Harmony	√
Web	√
微信小程序	√
uni-app（Vue2 / Vue3、nvue）	使用 `hy-css-icon`

安装

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

基本用法

<template>
    <view>
        <!-- 默认尺寸与颜色 -->
        <hy-css-icon-x name="check" />

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

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

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

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

Props

属性	类型	默认值	说明
`name`	string	`''`	图标名，见下方清单；不存在时不渲染
`size`	number	`48`	图标尺寸（rpx）
`color`	string	`''`	图标颜色，为空时使用 `currentColor`
`rotate`	number	`0`	旋转角度（deg）
`spin`	boolean	`false`	是否匀速旋转（旋转时忽略 `rotate`）
`customStyle`	string	`''`	追加到根节点的内联样式

事件

事件	说明	回调参数
`click`	点击图标	`UniPointerEvent`

图标清单（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

示例

见 example/example.uvue，包含尺寸 / 颜色 / 旋转 / 动画实时预览与点击复制图标名。

说明

图标尺寸按 rpx 换算为像素渲染。
折角（chevron）采用「双边着色方块」正交拼接，顶点平滑斜接；实心三角（triangle / caret-* / 箭头 / play）采用零尺寸盒子的边框绘制。
spin 依赖关键帧动画，个别平台需确认 @keyframes 支持情况。
组件覆盖几何 / 符号类图标与部分常见功能图标（以简化几何形态绘制）；高度写实的插画类图标不属于纯 CSS 绘制能力范围。