图标

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

如需跨平台使用，请参阅通用的 Icon — 它会根据平台渲染相应的原生组件。

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

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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

- yarn expo install @expo/material-symbols

- pnpm expo install @expo/material-symbols

- bun expo install @expo/material-symbols

用法

基本图标

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

BasicIcon.tsx

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

export default function BasicIcon() {
  const colors = useMaterialColors();

  return (
    <Host matchContents>
      <Icon
        source={Home}
        tint={colors.onBackground}
        contentDescription="Home"
      />
    </Host>
  );
}

带色调的图标

使用 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="Favorite"
      />
    </Host>
  );
}

带尺寸的图标

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

SizedIcon.tsx

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

export default function SizedIcon() {
  const colors = useMaterialColors();

  return (
    <Host matchContents>
      <Icon
        source={Settings}
        size={48}
        tint={colors.onBackground}
        contentDescription="Settings"
      />
    </Host>
  );
}

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

@expo/material-symbols 提供默认轴的轮廓样式。需要其他样式（rounded、sharp）、填充变体，或自定义粗细、等级或光学尺寸时，可使用其 CLI 从 Google Fonts 直接获取指定的可绘制对象并下载到你的项目中。

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 矢量可绘制对象写入你的项目。使用 require() 加载它们并传递给 Icon。

CustomIcon.tsx

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

export default function CustomIcon() {
  const colors = useMaterialColors();

  return (
    <Host matchContents>
      <Icon
        source={require('./assets/star_rounded.xml')}
        size={32}
        tint={colors.onBackground}
        contentDescription="Star"
      />
    </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

图标

安装

用法

基本图标

带色调的图标

带尺寸的图标

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

API

Component

Icon

contentDescription

modifiers

size

source

tint

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

`Icon`

`contentDescription`

`modifiers`

`size`

`source`

`tint`