Transform IconPark SVG icons into React Native components using react-native-svg.
Original Project: IconPark · GitHub
npm install react-native-iconpark react-native-svg
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']} />
| 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.
Apache-2.0
使用 react-native-svg 将 IconPark SVG 图标包装为 React Native 组件。
npm install react-native-iconpark react-native-svg
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 官方文档。
Apache-2.0