symbolpicker
Expert guidance on SymbolPicker, a native SwiftUI SF Symbol.
Setup & Installation
Install command
clawhub install szpakkamil/symbolpickerIf the CLI is not installed:
Install command
npx clawhub@latest install szpakkamil/symbolpickerOr install with OpenClaw CLI:
Install command
openclaw skills install szpakkamil/symbolpickeror paste the repo link into your assistant's chat
Install command
https://github.com/openclaw/skills/tree/main/skills/szpakkamil/symbolpickerWhat This Skill Does
SymbolPicker is a SwiftUI component for selecting SF Symbols on iOS, iPadOS, macOS, and visionOS. It mimics Apple's native picker interface and supports color binding, filled or outlined icon styles, and configurable dismissal behavior.
It replicates Apple's native SF Symbol picker UI, including search and color selection, without requiring developers to implement the sheet, bindings, and icon grid from scratch.
When to Use It
- Letting users choose an icon for a custom task category
- Selecting a symbol and color for a habit tracker entry
- Picking shortcut icons in a launcher or home screen app
- Customizing icons for bookmarks or saved notes
- Building a symbol browser inside a SwiftUI design tool
View original SKILL.md file
# SymbolPicker Skill
## Overview
This skill provides expert guidance on `SymbolPicker`, a native, customizable SwiftUI component for selecting SF Symbols on iOS, iPadOS, macOS, and visionOS. It mimics Apple’s native interface while offering extensive customization for colors, styles (filled/outlined), and behavior.
## Agent Behavior (Follow These Rules)
1. **Identify Platform Targets:** SymbolPicker adapts to each platform (sheet on iOS, popover on iPad/Mac/visionOS). Always verify the target platform.
2. **Prioritize Modifiers:** Direct users to the relevant `SymbolPicker` modifiers (e.g., `.symbolPickerSymbolsStyle`, `.symbolPickerDismiss`) for customization.
3. **Handle Colors Correctly:** When discussing color selection, clarify if the user wants to use `[Double]` (RGBA), SwiftUI `Color`, or `SymbolColor`.
4. **Emphasize Accessibility:** Highlight that SymbolPicker supports VoiceOver and Dynamic Type out of the box.
5. **Contextual Examples:** Provide concise code snippets showing the `.symbolPicker` modifier applied to a view (usually a Button or Image), with bindings for presentation and selection.
6. **Cross-Platform Consistency:** Remind users that the API is unified across platforms.
## Project Settings
- **Deployment Targets:** iOS 14.0+, iPadOS 14.0+, macOS 11.0+, visionOS 1.0+.
- **Swift Version:** Swift 5.9+.
- **Xcode:** Xcode 15.0+.
## Quick Decision Tree
1. **Setting up a basic symbol picker?**
* Basic installation and concepts → `references/SymbolPicker.md`
* To apply the modifier to a view → `references/SymbolPickerView.md`
2. **Picking symbols with color?**
* To use different color binding types → `references/SymbolPickerView.md`
* To understand the `SymbolColor` model → `references/SymbolColor.md`
3. **Customizing appearance or behavior?**
* Switching between filled/outlined icons → `references/SymbolPickerModifiers.md` (`.symbolPickerSymbolsStyle`)
* Controlling dismissal behavior → `references/SymbolPickerModifiers.md` (`.symbolPickerDismiss`)
## Triage-First Playbook
- **"The picker isn't showing up."**
* Check if `.symbolPicker(isPresented: ...)` is attached to a view that is part of the hierarchy.
* Ensure the `isPresented` binding is being toggled true.
- **"I want filled icons instead of outlines."**
* Use `.symbolPickerSymbolsStyle(.filled)`.
- **"How do I close the picker immediately after selecting a symbol?"**
* Use `.symbolPickerDismiss(type: .onSymbolSelect)`.
## Core Patterns Reference
### Basic Usage
```swift
@State private var isPresented = false
@State private var icon = "star"
Button("Pick Icon") { isPresented = true }
.symbolPicker(isPresented: $isPresented, symbolName: $icon)
```
### With Color Selection
```swift
@State private var isPresented = false
@State private var icon = "star.fill"
@State private var color: Color = .red
Button("Pick Icon & Color") { isPresented = true }
.symbolPicker(isPresented: $isPresented, symbolName: $icon, color: $color)
.symbolPickerSymbolsStyle(.filled)
.symbolPickerDismiss(type: .onSymbolSelect)
```
## Integration Quick Guide
1. **Add Package Dependency**: `https://github.com/SzpakKamil/SymbolPicker.git` (Min version 1.0.0).
2. **Import**: `import SymbolPicker`.
3. **Requirements**: iOS 14.0+, macOS 11.0+, visionOS 1.0+.
## Reference Files
Load these files as needed for specific topics:
- **`SymbolPicker.md`** - General overview, setup, and core benefits.
- **`SymbolPickerView.md`** - Detailed information on the picker view and its initializers.
- **`SymbolPickerModifiers.md`** - Customization of style (filled/outlined) and dismissal behavior.
- **`SymbolColor.md`** - Guide to using the `SymbolColor` enum and color bindings.
- **`SetUp.md`** - Step-by-step installation instructions.
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Letting users choose an icon for a custom task category
- 1Letting users choose an icon for a custom task category
- 2Selecting a symbol and color for a habit tracker entry
- 3Picking shortcut icons in a launcher or home screen app
- 4Customizing icons for bookmarks or saved notes
- 5Building a symbol browser inside a SwiftUI design tool
Expert guidance on SymbolPicker, a native SwiftUI SF Symbol.
Security Audits
These signals reflect official OpenClaw status values. A Suspicious status means the skill should be used with extra caution.