# @expo/material-symbols 中文文档

规范地址：https://npmcn.com/package/%40expo/material-symbols/

版本：0\.1\.1
npm 元数据更新时间：2026-09-23T11:26:32.616Z
中文译文更新时间：2026-11-14T05:25:22.256Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40expo/material-symbols
原文对照：https://npmcn.com/package/%40expo/material-symbols/?lang=original
项目主页：https://github.com/expo/material-symbols#readme
源码仓库：https://github.com/expo/material-symbols

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

- 包体积（解压后）：4.3 MB，7703 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-04-27T19:36:31.302Z
- 最新版本发布：2026-04-29T14:52:15.324Z
- 近 30 天下载量：465080（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

博览会的材料符号图标,通过@expo/ui提供.

## 安装

```sh
npm install @expo/material-symbols
```

也可以使用：`pnpm add @expo/material-symbols`、`yarn add @expo/material-symbols`、`bun add @expo/material-symbols`

## README

# @expo/ 物质符号

[材料符号](https://fonts.google.com/icons) 图标库。 图标是Android XML 向量可绘制,导入为Metro资产,并通过 `@expo/ui`。只有您导入的图标被捆绑起来——每个图标都住在自己的子路径上(`@expo/material-symbols/star.xml`),所以未使用的图标从未被地铁解决.

只有 **概述** 样式此时已运出。 关于圆形或尖锐的样式,见 [使用自定义 XML 图标](https://npmcn.com/package/%40expo/material-symbols/#readme-using-custom-xml-icons)。 。 。 .

## 安装

```bash
bun add @expo/material-symbols
```

## 使用量

每个图标都从自己的子路径导入:

```tsx
import { Host, Icon } from "@expo/ui/jetpack-compose";
import Star from "@expo/material-symbols/star.xml";
import Home from "@expo/material-symbols/home.xml";

<Host matchContents>
  <Icon source={Star} size={32} tint="#007AFF" />
</Host>;
```

-   **`size`** — dp 图标大小
-   **`tint`** 任何反应原生 `ColorValue` (hex,取名颜色等. 覆盖运行时 XML 的填充颜色 .
-   **`<Host matchContents>`** 需要 – 没有它, Confose 主机大小为 0×0 .

## 如何运作

-   `update-icons.ts` 从 Google 字体下载最新的物质符号元数据.
-   `generate.ts` 使用该元数据从 Google 的资产主机中获取官方列出的 Android XML 向量可提取值(`icons/*.xml`)并写出一幅平相 `.xml.d.ts` 旁边的每一个,所以 TypeScript 可以验证子路径.
-   包裹 `exports` 地图点 `./*.xml` 时间 `./icons/*.xml`这样 `import Star from "@expo/material-symbols/star.xml"` 解决资产,Metro返回数字资产ID.
-   这个 `@expo/ui` `<Icon>` 组件解决资产,使其通过Jetpack Compose本土化.
-   图标及其 `.d.ts` 文件在发布时通过 `prepublishOnly` 并装入了Npm柏油丸。 他们被骗了,快跑 `bun run generate` 克隆后插入 `icons/` 地方发展.

## CLI: 添加单个图标

这个 `add-material-symbols` CLI下载材料符号图标为Android XML向量可画. 如果您想要超越默认的设定, 需要特定样式或轴值( 填充、 重重、 分级、 光学大小) , 这一点将会有用 .

```bash
# By name (defaults: outlined, weight 400, no fill, grade 0, 24px)
npx add-material-symbols search

# Multiple icons at once
npx add-material-symbols search star home

# Rounded style
npx add-material-symbols --style rounded search star

# Sharp + filled
npx add-material-symbols --style sharp --fill favorite

# Custom weight
npx add-material-symbols --weight 300 star

# From a Google Fonts URL (preserves the axes you picked in the UI)
npx add-material-symbols "https://fonts.google.com/icons?selected=Material+Symbols+Outlined:check_box:FILL@1;wght@300;GRAD@0;opsz@24"

# Custom output directory
npx add-material-symbols -o ./my-icons search
```

| 选项 | 说明 | 默认 |
| --- | --- | --- |
| `-o, --output <dir>` | 输出目录 | `./assets` |
| `-s, --style <style>` | 图标样式 : `outlined`, (中文(简体) ), `rounded`, (中文(简体) ), `sharp` | `outlined` |
| `-f, --fill` | 使用已填充的变体 |  |
| `-w, --weight <wght>` | 体重:100-700 | `400` |
| `-g, --grade <grad>` | 年级: -25、0、200 | `0` |
| `--opsz <size>` | 光学尺寸: 20、24、40、48 | `24` |
| `-h, --help` | 显示帮助 |  |

输出为可直接导入的可随时使用的 XML 向量绘图(参见 [使用自定义 XML 图标](https://npmcn.com/package/%40expo/material-symbols/#readme-using-custom-xml-icons)) (中文(简体) ).

## 使用自定义 XML 图标

你可以使用自己的Android XML向量可画. 在您的工程中放置并导入 :

```tsx
import { Host, Icon } from "@expo/ui/jetpack-compose";

const MyIcon = require("./assets/my-icon.xml");

<Host matchContents>
  <Icon source={MyIcon} size={32} />
</Host>;
```

这适用于圆形、尖锐或自定义的材料符号样式——您可以通过 Google Fonts 直接下载Android可绘制的 XML `add-material-symbols`,或提供自己的XML资产.

## 贷项

这些图标来自Google的 [材料符号](https://github.com/google/material-design-icons),根据 [Apache 2.0 (英语)](https://www.apache.org/licenses/LICENSE-2.0). 软件包生成使用Google Fonts元数据和由Google托管的Android XML资产.

## 发展

这个包裹住在 [`expo/material-symbols`](https://github.com/expo/material-symbols) 单相机。 从回波根:

```bash
bun install
cd packages/expo-material-symbols && bun run generate  # regenerate icons
cd example && bun run android                          # run the example app
```

## 常见问题

### @expo/material-symbols 是什么？

博览会的材料符号图标,通过@expo/ui提供\.

### 如何安装 @expo/material-symbols？

在项目目录运行 npm install @expo/material-symbols，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 add-material-symbols，可以用 npx add-material-symbols 直接运行。

### @expo/material-symbols 支持 TypeScript 吗？

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

### @expo/material-symbols 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @expo/material-symbols 可以商用吗？

@expo/material-symbols 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @expo/material-symbols 的下载量有多少？

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

### @expo/material-symbols 还在维护吗？

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