图标

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

Android

Bundled version:

~55.0.2

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

🌐 An icon component for rendering icons in Jetpack Compose. We recommend downloading icons as XML vector drawables from Material Symbols, which is the standard approach for Android development.

安装

🌐 Installation

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.

用法

🌐 Usage

基础图标

🌐 Basic icon

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

🌐 Use require() to load an XML vector drawable downloaded from Material Symbols.

BasicIcon.tsx

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

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

带色调的图标

🌐 Icon with tint color

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

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

TintedIcon.tsx

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

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

带有尺寸的图标

🌐 Icon with size

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

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

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="Settings" />
    </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}
  tintColor="#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: ExpoModifier[]

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' }} />

`tintColor`

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')} tintColor="#007AFF" />
<Icon source={require('./assets/star.xml')} tintColor="blue" />