# react-native-system-icon

React Native icon components that mirror the React Vant design language. Every icon is implemented with `react-native-svg`, so you can use them in React Native or Expo projects without web dependencies.

## Install

```bash
pnpm add react-native-system-icon react-native-svg
```

> `react-native-svg` 为 peer 依赖，需要与 `react-native-system-icon` 一起安装。

## Usage

### Using Icons

```tsx
import { Add, CartO } from 'react-native-system-icon';

export function Example() {
  return <Add size={32} color="#ff6034" />;
}
```

### 按需导入（子路径）

包为每个图标提供了子路径导出，只引入用到的图标可减小打包体积：

```tsx
import Add from 'react-native-system-icon/Add';
import CartO from 'react-native-system-icon/CartO';

export function Example() {
  return <Add size={32} color="#ff6034" />;
}
```

### Using react-native-svg Components

You can also import `react-native-svg` components and types directly from this library:

```tsx
import { Svg, Path, Rect, SvgCircle, type SvgProps } from 'react-native-system-icon';

export function CustomIcon() {
  return (
    <Svg width={100} height={100}>
      <SvgCircle cx={50} cy={50} r={40} fill="blue" />
      <Rect x={10} y={10} width={80} height={80} fill="red" />
    </Svg>
  );
}
```

> **Note**: `Circle` and `Stop` from `react-native-svg` are exported as `SvgCircle` and `SvgStop` to avoid conflicts with icon components of the same name.

### Props

All icons accept every `SvgProps` from `react-native-svg`, plus a `size` shortcut (defaults to `24`). For multi-colored glyphs, pass custom `fill` props to the underlying `Svg` elements when needed.