# @basenative/icons 中文文档

规范地址：https://npmcn.com/package/%40basenative/icons/

版本：3\.3\.0
npm 元数据更新时间：2026-11-03T01:38:25.018Z
中文译文更新时间：2026-11-07T23:55:56.212Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40basenative/icons
原文对照：https://npmcn.com/package/%40basenative/icons/?lang=original
项目主页：https://github.com/DuganLabs/BaseNative/tree/main/packages/icons#readme
源码仓库：https://github.com/DuganLabs/BaseNative

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：18.6 kB，35 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-10-18T05:29:21.888Z
- 最新版本发布：2026-11-03T01:38:24.684Z
- 近 30 天下载量：1969（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

SVG 图标集和 BaseNative 应用程序的 FOUC 重置样式表

## 安装

```sh
npm install @basenative/icons
```

也可以使用：`pnpm add @basenative/icons`、`yarn add @basenative/icons`、`bun add @basenative/icons`

## README

# @ asinative/ icons( 秒数)

> BaseNative UI 组件最小 SVG 图标集

部分 [基础](https://github.com/DuganLabs/basenative) 生态系统——一个基于信号的网络运行时间超过本土的HTML.

## 安装

```bash
npm install @basenative/icons
```

## 快速启动

```js
// Inline an SVG icon in a server-rendered template
import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { join, dirname } from 'node:path';

const __dirname = dirname(fileURLToPath(import.meta.url));

function icon(name) {
  return readFileSync(
    join(__dirname, 'node_modules/@basenative/icons/src', `${name}.svg`),
    'utf-8'
  );
}

const html = `
  <button type="button">
    ${icon('plus')} Add item
  </button>
`;
```

## 带有 @ aslative/ server

```js
import { render } from '@basenative/server';
import { readFileSync } from 'node:fs';

const plusIcon = readFileSync('./node_modules/@basenative/icons/src/plus.svg', 'utf-8');

const html = render('<button>{{ icon }} Add</button>', { icon: plusIcon });
```

## 可用图标

图标居住于 `src/` 简单 `.svg` 文档。 每个 SVG 大小为内置使用并继承 `currentColor`。 。 。 .

| 文件 | 说明 |
| --- | --- |
| `activity.svg` | 脉冲/活性饲料 |
| `bar-chart.svg` | 条形图/报告 |
| `calendar.svg` | 日历/ 预定任务 |
| `check.svg` | 检查标记/ 确认 |
| `chevron-down.svg` | 下下切夫龙的倒下 |
| `chevron-left.svg` | 左切夫龙 / 后 |
| `chevron-right.svg` | 右切夫龙 / 前置 |
| `clock.svg` | 时钟/ 时间 |
| `dashboard.svg` | Dashboard 网格 / 今天视图 |
| `file-text.svg` | 文件/估计数 |
| `mail.svg` | 信封/ 电子邮件 |
| `map-pin.svg` | 位置标 |
| `megaphone.svg` | 麦克风/运动 |
| `menu.svg` | 汉堡菜单 |
| `message-square.svg` | 用信件行聊天泡 |
| `minus.svg` | 减/ 删除/倒塌 |
| `package.svg` | 方框/库存 |
| `phone.svg` | 电话话筒 |
| `plug.svg` | 插件/ 插件和集成 |
| `plus.svg` | 加/ 加/扩展 |
| `remove.svg` | X / 结案/解雇 |
| `search.svg` | 放大玻璃/ 搜索 |
| `settings.svg` | 齿轮/ 设置 |
| `shield.svg` | 盾牌/信任和保护 |
| `star.svg` | 明星/评论和评分 |
| `trending-up.svg` | 上升图/机会 |
| `truck.svg` | 卡车/车辆 |
| `user-plus.svg` | 有附加/新铅的人 |
| `users.svg` | 人/客户 |

## 样式

图标继承 `color` 从母元素通过 `currentColor` 缩放 `em`编号 :`font-size`。应用类或内置宽度/高度来控制大小 :

```css
.icon { width: 1em; height: 1em; vertical-align: middle; }
```

## 许可证

阿帕奇 - 2.0

## 常见问题

### @basenative/icons 是什么？

SVG 图标集和 BaseNative 应用程序的 FOUC 重置样式表

### 如何安装 @basenative/icons？

在项目目录运行 npm install @basenative/icons，或使用 pnpm add / yarn add / bun add。

### @basenative/icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @basenative/icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @basenative/icons 可以商用吗？

@basenative/icons 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @basenative/icons 的下载量有多少？

根据 npm 官方下载统计，@basenative/icons 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,969 次，日均约 66 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @basenative/icons 还在维护吗？

最新版本 3\.3\.0 发布于 2026/11/03（5 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/10/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。