@expo/ 物质符号
材料符号 图标库。 图标是Android XML 向量可绘制,导入为Metro资产,并通过 @expo/ui。只有您导入的图标被捆绑起来——每个图标都住在自己的子路径上(@expo/material-symbols/star.xml),所以未使用的图标从未被地铁解决.
只有 概述 样式此时已运出。 关于圆形或尖锐的样式,见 使用自定义 XML 图标。 。 。 .
安装
bun add @expo/material-symbols
使用量
每个图标都从自己的子路径导入:
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向量可画. 如果您想要超越默认的设定, 需要特定样式或轴值( 填充、 重重、 分级、 光学大小) , 这一点将会有用 .
# 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 图标) (中文(简体) ).
使用自定义 XML 图标
你可以使用自己的Android XML向量可画. 在您的工程中放置并导入 :
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的 材料符号,根据 Apache 2.0 (英语). 软件包生成使用Google Fonts元数据和由Google托管的Android XML资产.
发展
这个包裹住在 expo/material-symbols 单相机。 从回波根:
bun install
cd packages/expo-material-symbols && bun run generate # regenerate icons
cd example && bun run android # run the example app