This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

信息 有关跨平台使用，请参阅通用 Icon —— 它会根据平台呈现相应的原生组件。

一个用于在 Jetpack Compose 中渲染 Material Symbol XML 矢量图的图标组件。推荐的来源是 @expo/material-symbols —— 它将 Google 的 Material Symbols 作为单独的资源子路径提供，因此 Metro 只会打包你实际导入的图标。对于其他样式（圆角、锐角、填充）或自定义轴，该包的 CLI 可以将任何变体直接下载到你的项目中。

🌐 An icon component for rendering Material Symbol XML vector drawables in Jetpack Compose. The recommended source is @expo/material-symbols — it ships Google's Material Symbols as individual asset subpaths, so Metro only bundles the icons you actually import. For other styles (rounded, sharp, filled) or custom axes, the package's CLI downloads any variant directly into your project.

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

可选择安装 @expo/material-symbols 来使用打包的图标。若使用不同的样式或自定义坐标轴，请参见 自定义样式 — 无需安装。

🌐 Optionally, install @expo/material-symbols to use the bundled icons. For a different style or custom axes, see Custom styles — no install needed.

用法

🌐 Usage

基础图标

🌐 Basic icon

直接从 @expo/material-symbols 的子路径导入任何图标 —— 每个图标都会解析为 Icon 可以原生渲染的 Metro 资源。对于你添加到项目中的本地 XML 文件，请改用 require()（参见下面的 自定义样式）。

🌐 Import any icon directly from its own subpath of @expo/material-symbols — each icon resolves to a Metro asset that Icon can render natively. For local XML files you add to your project, use require() instead (see Custom styles below).

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Home from '@expo/material-symbols/home.xml';

export default function BasicIcon() {
  return (
    <Host matchContents>
      <Icon source={Home} contentDescription="Home" />
    </Host>
  );
}

带色调的图标

🌐 Icon with tint color

使用 tint 属性为图标应用颜色覆盖。

🌐 Use the tint prop to apply a color overlay to the icon.

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Favorite from '@expo/material-symbols/favorite.xml';

export default function TintedIcon() {
  return (
    <Host matchContents>
      <Icon source={Favorite} tint="#6200ee" contentDescription="Favorite" />
    </Host>
  );
}

带有尺寸的图标

🌐 Icon with size

使用 size 属性指定 dp 的自定义大小。

🌐 Specify a custom size in dp using the size prop.

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Settings from '@expo/material-symbols/settings.xml';

export default function SizedIcon() {
  return (
    <Host matchContents>
      <Icon source={Settings} size={48} contentDescription="Settings" />
    </Host>
  );
}

通过 @expo/material-symbols CLI 自定义样式

🌐 Custom styles via @expo/material-symbols CLI

@expo/material-symbols 提供带有默认坐标轴的 outlined 风格。当你需要不同的风格（rounded、sharp）、填充变体，或自定义粗细、等级或光学尺寸时，可以使用它的 CLI 将特定的可绘制资源直接从 Google Fonts 提取到你的项目中。

CLI 会将可直接使用的 XML 矢量图写入你的项目。使用 require() 加载它们，然后传递给 Icon。

🌐 The CLI writes ready-to-use XML vector drawables into your project. Load them with require() and pass them to Icon.

import { Host, Icon } from '@expo/ui/jetpack-compose';

export default function CustomIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/star-rounded.xml')} size={32} contentDescription="Star" />
    </Host>
  );
}

应用接口

🌐 API

import { Icon } from '@expo/ui/jetpack-compose';

Component

import { Icon } from 'expo-ui';

<Icon source={require('./assets/home.xml')} />

<Icon
  source={require('./assets/settings.xml')}
  size={24}
  tint="#007AFF"
  contentDescription="Settings icon"
/>

<Icon
  source={require('./assets/star.xml')}
  size={32}
  modifiers={[
    padding(8),
    background('lightgray')
  ]}
/>

<Icon
  source={require('./assets/settings.xml')}
  contentDescription="Settings icon"
/>

<Icon
  source={require('./assets/icon.xml')}
  modifiers={[
    padding(8),
    background('lightgray')
  ]}
/>

<Icon source={require('./assets/settings.xml')} size={24} />

<Icon source={require('./assets/home.xml')} />
<Icon source={{ uri: 'file:///path/to/icon.xml' }} />

<Icon source={require('./assets/star.xml')} tint="#007AFF" />
<Icon source={require('./assets/star.xml')} tint="blue" />
<Icon source={require('./assets/multicolor.xml')} tint={null} />