Skip to content

Commit 28dea13

Browse files
committed
docs: add SFSymbol component documentation and examples
1 parent 00a5ad7 commit 28dea13

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,10 +166,39 @@ These components are standalone native views that can be used anywhere in your R
166166

167167
| Component | Description | Key Props | Notes |
168168
| --------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
169+
| `SFSymbol` | Renders SF Symbols with full customization | `name`, `size`, `color`, `weight`, `scale`, `renderingMode`, `variableValue`, `colors` | Supports all SF Symbol features including hierarchical and palette rendering |
169170
| `SwiftUIPicker` | A native picker modal with search functionality | `isPresented`, `title`, `searchPlaceholder`, `options`, `selectedValue`, `autoDismiss`, `onSelect` | Full-screen native picker with search and categorization support |
170171
| `SwiftUISheet` | A native modal sheet presentation | `isPresented`, `detents`, `onDismiss`, Children | Standalone sheet that can be used outside of SwiftUI tree |
171172
| `SwiftUISheetPicker` | A native picker presented as a bottom sheet | `isPresented`, `title`, `searchPlaceholder`, `options`, `selectedValue`, `autoDismiss`, `onSelect` | Combines sheet presentation with picker functionality for a native iOS experience |
172173

174+
#### SFSymbol Examples
175+
176+
```tsx
177+
import { SFSymbol } from "@mgcrea/react-native-swiftui";
178+
179+
// Basic usage
180+
<SFSymbol name="star.fill" />
181+
182+
// With color and size
183+
<SFSymbol name="heart.fill" color="#FF3B30" size={24} weight="semibold" />
184+
185+
// With text style sizing
186+
<SFSymbol name="gear" size="title" style={{ color: "#007AFF" }} />
187+
188+
// Hierarchical rendering (automatic shading)
189+
<SFSymbol name="folder.fill.badge.plus" renderingMode="hierarchical" color="#007AFF" />
190+
191+
// Palette rendering (multiple colors)
192+
<SFSymbol
193+
name="person.crop.circle.badge.checkmark"
194+
renderingMode="palette"
195+
colors={["#FF3B30", "#34C759", "#007AFF"]}
196+
/>
197+
198+
// Variable value (for symbols that support it)
199+
<SFSymbol name="speaker.wave.3.fill" variableValue={0.5} />
200+
```
201+
173202
## Contribute
174203

175204
We welcome contributions! If you have ideas for new components, optimizations, or bug fixes, please fork the repository and submit a pull request. We also encourage you to open issues for any bugs or feature requests.

0 commit comments

Comments
 (0)