文档
BlogChangelogStar Us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

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

图标

一个用于显示图标的 Jetpack Compose 图标组件。

Android
Included in Expo Go

GitHub

npm

更新日志

Recommended version:
~57.0.0
如需跨平台使用，请查看通用的 Icon — 它会根据平台渲染相应的原生组件。

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

使用 Material 3 图标组件渲染的 Wifi、蓝牙、邮件和人物图标

安装

Terminal
- npx expo install @expo/ui

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

可选地，安装 @expo/material-symbols 以使用内置图标。若要使用不同样式或自定义轴，请参见 自定义样式——无需安装。

Terminal
- npx expo install @expo/material-symbols

用法

基础图标

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

BasicIcon.tsx
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="主页" />
    </Host>
  );
}

带 tint 颜色的图标

使用 tint 属性为图标应用颜色叠加。

TintedIcon.tsx
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="收藏" />
    </Host>
  );
}

带尺寸的图标

使用 size 属性以 dp 为单位指定自定义尺寸。

SizedIcon.tsx
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="设置" />
    </Host>
  );
}

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

@expo/material-symbols 默认提供带有默认轴的 outlined 样式。当你需要其他样式（rounded、sharp）、填充版本，或自定义字重、等级或光学尺寸时，可以使用其 CLI 直接从 Google Fonts 获取特定 drawable 到你的项目中。

Terminal
# 按名称下载图标（默认：outlined，字重 400，24px）
- npx @expo/material-symbols star home

# 圆角样式
- npx @expo/material-symbols --style rounded star home

# 锐角 + 填充
- npx @expo/material-symbols --style sharp --fill favorite

# 粘贴 fonts.google.com/icons 中的 URL，以保留你在那里选择的各个轴
- npx @expo/material-symbols "https://fonts.google.com/icons?selected=Material+Symbols+Outlined:check_box:FILL@1;wght@300;GRAD@0;opsz@24"
选项描述默认值
-o, --output <dir>输出目录./assets
-s, --style <style>图标样式：outlined、rounded、sharpoutlined
-f, --fill使用填充版本
-w, --weight <wght>字重：100–700400
-g, --grade <grad>等级：-25、0、2000
--opsz <size>光学尺寸：20、24、40、4824

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

CustomIcon.tsx
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="星标" />
    </Host>
  );
}

API

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

Component

Icon

Android

Type: React.Element<IconProps>

Displays an icon from an XML vector drawable or other image source.

The Icon component renders vector graphics and images with support for tinting, sizing, and accessibility features. On Android, it natively supports XML vector drawables loaded via Metro bundler using require().

Example

Basic usage:

import { Icon } from 'expo-ui';

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

Example

With styling:

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

Example

With modifiers:

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

IconProps

contentDescription

Android
Optional • Type: string

Accessibility label for the icon. Used by screen readers to describe the icon to users.

Example

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

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the component. Allows you to apply layout and styling modifiers to the icon.

Example

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

size

Android
Optional • Type: number

The size of the icon in density-independent pixels (dp). If not specified, the icon will use its intrinsic size.

Example

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

source

Android
Type: ImageSourcePropType

The source of the icon. Can be a URI string or the result of require(). On Android, supports XML vector drawables loaded via Metro bundler.

Example

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

tint

Android
Optional • Literal type: union

The tint color to apply to the icon. Accepts hex strings, named colors, or RGB arrays.

  • When omitted, the icon inherits the color from the surrounding LocalContentColor (e.g. the toolbar/FAB content color).
  • When set to null, no tint is applied — the icon is drawn with its original colors (Color.Unspecified). Use this for multicolored icons.

Example

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

Acceptable values are: ColorValue | null