📦 MegaWall3 / react-native-iconpark

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110# React Native IconPark

[English](#english) | [简体中文](#简体中文)

---

## English

Transform IconPark SVG icons into React Native components using `react-native-svg`.

**Original Project:** [IconPark](https://iconpark.oceanengine.com/official) · [GitHub](https://github.com/bytedance/IconPark)

### Installation

```bash
npm install react-native-iconpark react-native-svg
```

### Usage

```tsx
import { Home, Camera, User } from 'react-native-iconpark';

// Basic
<Home size={24} />

// Outline theme (default)
<Camera theme="outline" size={32} fill="#000" />

// Filled theme
<User theme="filled" size={32} fill="#333" />

// Two-tone theme
<Camera theme="two-tone" size={32} fill={['#333', '#2F88FF']} />

// Multi-color theme
<Camera theme="multi-color" size={32} fill={['#333', '#2F88FF', '#FFF', '#43CCF8']} />
```

### Props

| Prop | Type | Default |
|------|------|---------|
| `size` | `number \| string` | `24` |
| `fill` | `string \| string[]` | `'#333'` |
| `theme` | `'outline' \| 'filled' \| 'two-tone' \| 'multi-color'` | `'outline'` |
| `strokeWidth` | `number` | `4` |
| `strokeLinecap` | `'butt' \| 'round' \| 'square'` | `'round'` |
| `strokeLinejoin` | `'miter' \| 'round' \| 'bevel'` | `'round'` |
| `style` | `ViewStyle` | - |

For more details, please refer to [IconPark Official Documentation](https://github.com/bytedance/IconPark).

### License

Apache-2.0

---

## 简体中文

使用 `react-native-svg` 将 IconPark SVG 图标包装为 React Native 组件。

**原项目：** [IconPark](https://iconpark.oceanengine.com/official) · [GitHub](https://github.com/bytedance/IconPark)

### 安装

```bash
npm install react-native-iconpark react-native-svg
```

### 使用

```tsx
import { Home, Camera, User } from 'react-native-iconpark';

// 基础用法
<Home size={24} />

// 线性主题（默认）
<Camera theme="outline" size={32} fill="#000" />

// 填充主题
<User theme="filled" size={32} fill="#333" />

// 双色主题
<Camera theme="two-tone" size={32} fill={['#333', '#2F88FF']} />

// 多色主题
<Camera theme="multi-color" size={32} fill={['#333', '#2F88FF', '#FFF', '#43CCF8']} />
```

### 属性

| 属性 | 类型 | 默认值 |
|------|------|--------|
| `size` | `number \| string` | `24` |
| `fill` | `string \| string[]` | `'#333'` |
| `theme` | `'outline' \| 'filled' \| 'two-tone' \| 'multi-color'` | `'outline'` |
| `strokeWidth` | `number` | `4` |
| `strokeLinecap` | `'butt' \| 'round' \| 'square'` | `'round'` |
| `strokeLinejoin` | `'miter' \| 'round' \| 'bevel'` | `'round'` |
| `style` | `ViewStyle` | - |

更多详情请参考 [IconPark 官方文档](https://github.com/bytedance/IconPark)。

### 许可证

Apache-2.0