This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

图标

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

Android

GitHub

npm

更新日志

用于在 Jetpack Compose 中渲染图标的图标组件。我们建议从 Material Symbols 下载 XML 矢量 drawable 作为图标，这也是 Android 开发的标准做法。

安装

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.

使用

基本图标

使用 require() 加载从 Material Symbols 下载的 XML 矢量 drawable。

BasicIcon.tsx

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

export default function BasicIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/home.xml')} contentDescription="主页" />
    </Host>
  );
}

带有色调的图标

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

TintedIcon.tsx

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

export default function TintedIcon() {
  return (
    <Host matchContents>
      <Icon
        source={require('./assets/favorite.xml')}
        tint="#6200ee"
        contentDescription="收藏"
      />
    </Host>
  );
}

带有尺寸的图标

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

SizedIcon.tsx

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

export default function SizedIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/settings.xml')} size={48} 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 • Type: ColorValue

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

Example

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