更新记录

1.0.2（2026-11-11） 下载此版本

修复

• 修复 size 单位不一致的问题：数字和纯数字字符串此前按 px 渲染，现统一按 rpx。
• size 正则改为 /^\d+(\.\d+)?$/，避免空字符串被拼接成 px、小数缺少单位的问题。

说明

• size="40" 现在等价于 size="40rpx"；如需 px，请显式写 size="40px"。

升级提示

• 原来依赖 size="40" 按 40px 渲染的页面，升级后会变成 40rpx（视觉缩小一半）。如需保持原大小，请改为 size="80rpx"，或显式写 size="40px"。

1.0.1（2026-11-11） 下载此版本

修复

• 修正图标数据中的命名不一致，使 name 与 font_class 保持一致：
  • like → like-fill
  • refresh → refresh-fill
  • notification_fill → notificationfill
• 修正 dwon 拼写错误，name 与 font_class 统一为 down。

新增

• 图标数据新增 aliases 字段，组件查找时自动匹配别名：

  • dwon → down
  • like → like-fill
  • refresh → refresh-fill
  • notification_fill → notificationfill

  旧写法仍然可用，不需要修改现有页面。

变更

• package.json 的 uni_modules.dependencies 声明依赖 y-scss。
• 完善 README：补充属性说明、图标列表、尺寸规则、主题颜色和常见问题。

平台兼容性

uni-app(5.0)

y-icon

y-icon 是面向 uni-app（Vue 3） 的字体图标组件，基于本地 iconfont.ttf，内置 29 个常用图标。组件用一个 <text> 节点渲染图标，支持名称、尺寸、颜色配置，默认颜色跟随 y-scss 的明暗主题。

• 当前版本：1.0.2
• 依赖：y-scss（提供默认颜色变量 --y-title）
• 主要使用环境：微信小程序（Vue 3）
• 图标数量：29

特性

• 无图片请求：字体图标，按文字渲染，体积小、缩放清晰。
• 按名称使用：type="search" 即可，内置 29 个常用图标。
• 尺寸灵活：数字和纯数字字符串按 rpx，带单位的字符串按原值。
• 跟随主题：默认 color: rgb(var(--y-title))，自动适配 y-scss 的明暗主题。
• 旧名兼容：数据层提供 aliases，dwon、like、refresh、notification_fill 仍可使用。

兼容性

安装

1. 将 y-icon 目录放入项目的 uni_modules/ 下。
2. 同时安装 y-scss（默认颜色依赖其 --y-title 变量）。
3. 依赖已在 package.json 的 uni_modules.dependencies 中声明为 ["y-scss"]。

y-scss 的安装、引入方式和主题变量用法，请参考插件市场文档： https://ext.dcloud.net.cn/plugin?id=30683

组件通过 easycom 自动注册，无需手动 import。

快速开始

<template>
  <view class="d-flex ai-center gap-16">
    <y-icon type="search" size="40rpx" />
    <y-icon type="heart-fill" size="32" color="#D32F2F" />
    <y-icon type="right" size="24rpx" color="rgb(var(--y-main))" />
  </view>
</template>

属性

尺寸规则

数字和纯数字字符串统一按 rpx 处理，size="40" 与 size="40rpx" 等价；只有显式写 px 才会按 px 渲染。

图标列表

颜色与主题

组件默认样式：

.y-icon {
  color: rgb(var(--y-title));
}

• 引入 y-scss 后，图标颜色自动跟随明暗主题的标题色。
• 未引入 y-scss 时，--y-title 未定义，color 回退为继承父级颜色。
• 可用 color 覆盖，例如 color="#D32F2F"、color="rgb(var(--y-main))"。
• 组件使用内联 style 设置颜色和字号，优先级高于普通 CSS；需要从外部覆盖时请使用 !important 或直接传 color。

插槽

<y-icon type="search">搜索</y-icon>

传入默认插槽时，会显示插槽内容而不是图标字符，适合临时替换或“图标 + 文字”场景。组件根节点是 <text>，插槽内只应放文本，不要放 <view>。

常见问题

Q：图标不显示？ A：先确认 type 是否在「图标列表」中（拼写错误会显示空白）；再确认 iconfont.ttf 是否随组件一起打包到了目标平台。

Q：type="down" 能用吗？ A：可以。当前版本已把 dwon 修正为 down，同时保留 dwon 作为别名；like、refresh、notification_fill 也可以作为旧名使用。

Q：size="40" 和 size="40rpx" 有区别吗？ A：没有，两者都按 40rpx 处理。数字和纯数字字符串统一按 rpx；如果确实需要 px，请显式写 size="40px"。

Q：暗色模式下图标颜色没变？ A：默认颜色来自 --y-title，需要引入 y-scss 并确保 page 上定义了主题变量；如果传了 color，以 color 为准。

Q：支持多色图标吗？ A：字体图标是单色字体，只能通过 color 改整体颜色；多色图标请使用 SVG 或图片。

Q：可以只用图标、不装 y-scss 吗？ A：可以，但默认颜色会回退为继承父级颜色。建议保留 y-scss，或在 color 中显式传色值。

更新日志

见 changelog.md。

许可

本项目未声明开源许可证。如需商用、分发或二次发布，请先与作者确认授权方式。