图标

一个用于显示图标的 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 会直接将任意变体下载到你的项目中。

安装

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`、`sharp`	`outlined`
`-f, --fill`	使用填充版本
`-w, --weight <wght>`	字重：`100`–`700`	`400`
`-g, --grade <grad>`	等级：`-25`、`0`、`200`	`0`
`--opsz <size>`	光学尺寸：`20`、`24`、`40`、`48`	`24`

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`

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`

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`

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`

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`

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`

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

图标

安装

用法

基础图标

带 tint 颜色的图标

带尺寸的图标

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

API

Component

Icon

contentDescription

modifiers

size

source

tint

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

`Icon`

`contentDescription`

`modifiers`

`size`

`source`

`tint`