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

平台原生图标。在 Android 上，它渲染为 Material Symbol XML 矢量可绘制对象（推荐来源：@expo/material-symbols）。在 iOS 上，它渲染为 SF Symbol。

🌐 A platform-native icon. On Android, it renders a Material Symbol XML vector drawable (recommended source: @expo/material-symbols). On iOS, it renders an SF Symbol.

注意： Icon 在网页上无法显示。

安装

🌐 Installation

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

可选择安装 @expo/material-symbols 以在 Android 上使用打包图标。若需不同风格或自定义坐标轴，请参阅 Jetpack Compose 图标页面上的自定义样式 — 无需安装。

🌐 Optionally, install @expo/material-symbols to use the bundled icons on Android. For a different style or custom axes, see Custom styles on the Jetpack Compose Icon page — no install needed.

用法

🌐 Usage

带有 Icon.select 的跨平台图标

🌐 Cross-platform icon with Icon.select

Icon.select 为当前平台选择正确的资源。将它与 @expo/ui/babel-plugin（由 babel-preset-expo 自动加载）配对，这样 Metro 就可以按平台对未使用的部分进行 tree-shake。

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

export default function IconSelectExample() {
  return (
    <Host matchContents>
      <Icon
        name={Icon.select({
          ios: 'star.fill',
          android: import('@expo/material-symbols/star.xml'),
        })}
        size={32}
        color="orange"
      />
    </Host>
  );
}

提升了 Icon.select

🌐 Hoisted Icon.select

在多个调用点重复使用同一个图标时，提升 Icon.select 调用。

🌐 Hoist the Icon.select call when reusing the same icon across multiple call sites.

import { Host, Row, Icon } from '@expo/ui';

const STAR = Icon.select({
  ios: 'star.fill',
  android: import('@expo/material-symbols/star.xml'),
});

export default function HoistedIconExample() {
  return (
    <Host matchContents>
      <Row spacing={4}>
        <Icon name={STAR} size={20} color="gold" />
        <Icon name={STAR} size={20} color="gold" />
        <Icon name={STAR} size={20} color="gold" />
      </Row>
    </Host>
  );
}

特定平台的文件

🌐 Platform-specific files

在 .android.tsx 文件中，直接导入 XML 资源。在 .ios.tsx 文件中，将 SF Symbol 名称作为字符串传递。

🌐 Inside an .android.tsx file, import the XML asset directly. Inside an .ios.tsx file, pass the SF Symbol name as a string.

import StarIcon from '@expo/material-symbols/star.xml';
import { Host, Icon } from '@expo/ui';

export default function StarRow() {
  return (
    <Host matchContents>
      <Icon name={StarIcon} size={24} />
    </Host>
  );
}

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

export default function StarRow() {
  return (
    <Host matchContents>
      <Icon name="star.fill" size={24} />
    </Host>
  );
}

应用接口

🌐 API

import { Icon } from '@expo/ui';

Component

const STAR = Icon.select({
  ios: 'star.fill',
  android: import('@expo/material-symbols/star.xml'),
});

<Icon name={STAR} size={24} color="orange" />

<Icon
  name={Icon.select({
    ios: 'star.fill',
    android: import('@expo/material-symbols/star.xml'),
  })}
  size={24}
/>

<Icon
  name={{
    ios: 'star.fill',
    android: require('@expo/material-symbols/star.xml'),
  }}
  size={24}
/>

import StarIcon from '@expo/material-symbols/star.xml';

<Icon name={StarIcon} size={24} />

<Icon name="star.fill" size={24} />

Component Methods

const STAR = Icon.select({
  ios: 'star.fill',
  android: import('@expo/material-symbols/star.xml'),
});

<Icon name={STAR} size={24} />

Interfaces

Types