Skip to content

Commit 8a43055

Browse files
committed
Add live demo GIF and expand icon documentation
Added example.gif to showcase interactive features in the README. Expanded documentation to detail the 400+ available SF Symbols, their categories, and provided guidance on browsing the complete icon list in src/icons.ts.
1 parent 7066306 commit 8a43055

File tree

2 files changed

+65
-10
lines changed

2 files changed

+65
-10
lines changed

README.md

Lines changed: 65 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,18 @@ export function App() {
8888

8989
---
9090

91+
## 🎬 Live Demo
92+
93+
<div align="center">
94+
95+
![Demo](./example.gif)
96+
97+
*Interactive example showcasing color, weight, and scale customization with 400+ available SF Symbols*
98+
99+
</div>
100+
101+
---
102+
91103
## 📚 Usage
92104

93105
### 🎨 Simple Rendering
@@ -104,28 +116,71 @@ import { SFSymbolView, SFIcons } from 'react-native-nitro-sfsymbols';
104116

105117
### 📏 Available Symbols
106118

107-
The library includes **100+ curated SF Symbol names**:
119+
The library includes **400+ curated SF Symbol names** organized into 23 categories:
108120

109121
```tsx
110-
// 🌦️ Weather
122+
// 🌦️ Weather (15 icons)
111123
SFIcons.THERMOMETER_SUN_FILL
112-
SFIcons.CLOUD_FILL
113-
SFIcons.WIND
124+
SFIcons.CLOUD_RAIN_FILL
125+
SFIcons.WIND_SNOW
114126

115-
// 🎮 UI Controls
127+
// 🎮 UI Controls (25 icons)
116128
SFIcons.HEART_FILL
117129
SFIcons.STAR_FILL
118-
SFIcons.CHECKMARK
119-
SFIcons.XMARK
130+
SFIcons.CHECKMARK_CIRCLE_FILL
131+
SFIcons.XMARK_CIRCLE_FILL
120132

121-
// 🧭 Navigation
133+
// 🧭 Navigation (30 icons)
122134
SFIcons.CHEVRON_LEFT
123-
SFIcons.ARROW_RIGHT
135+
SFIcons.ARROW_UP_RIGHT
136+
SFIcons.ARROW_CLOCKWISE
124137
SFIcons.LOCATION_FILL
138+
139+
// 📁 Files (25 icons)
140+
SFIcons.FOLDER_FILL
141+
SFIcons.FILE_FILL
142+
SFIcons.TRASH_FILL
143+
144+
// ... and 400+ more!
125145
```
126146

127147
> [!TIP]
128-
> Browse all 5000+ SF Symbols at [developer.apple.com/sf-symbols](https://developer.apple.com/sf-symbols/)
148+
> **Complete Icon List:** See [`src/icons.ts`](./src/icons.ts) for the full TypeScript enum with all **400+ available symbols** organized by category.
149+
150+
## 🎯 Complete Iconography
151+
152+
> [!IMPORTANT]
153+
> 📖 **Browse All 400+ Icons**: Open [`src/icons.ts`](./src/icons.ts) for the comprehensive, type-safe enum of all available SF Symbols organized into 23 categories:
154+
>
155+
> - 🌦️ Weather (15 icons)
156+
> - 🧭 Navigation & Arrows (30 icons)
157+
> - 🎮 UI Controls (25 icons)
158+
> - 📱 Media & Playback (20 icons)
159+
> - 📤 Share & Action (15 icons)
160+
> - 💬 Communication (20 icons)
161+
> - 🔍 Search & Settings (15 icons)
162+
> - 👤 User & Account (20 icons)
163+
> - 🔐 Security & Protection (15 icons)
164+
> - 📁 File & Document (25 icons)
165+
> - 🛒 Commerce & Shopping (20 icons)
166+
> - ❤️ Activity & Health (31 icons)
167+
> - 🔔 Notification & Alert (12 icons)
168+
> - 🗺️ Maps & Location (20 icons)
169+
> - ⏰ Time & Date (15 icons)
170+
> - 🔷 Shapes & Symbols (20 icons)
171+
> - 📐 Grid & Layout (12 icons)
172+
> - ✏️ Text & Editing (18 icons)
173+
> - 🖼️ Image & Media (15 icons)
174+
> - 🔊 Audio & Music (12 icons)
175+
> - 🔧 Utilities & Tools (20 icons)
176+
> - 🔢 Numbers & Symbols (10 icons)
177+
> - 🎛️ Additional UI Elements (15 icons)
178+
>
179+
> **👉 [View Complete List with All 400+ Icons →](./src/icons.ts)**
180+
181+
---
182+
183+
## 📚 Usage
129184

130185
### ⚖️ Weight Customization
131186

example.gif

1000 KB
Loading

0 commit comments

Comments
 (0)