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)
- Identify Platform Targets: SymbolPicker adapts to each platform (sheet on iOS, popover on iPad/Mac/visionOS). Always verify the target platform.
- Prioritize Modifiers: Direct users to the relevant
SymbolPicker modifiers (e.g., .symbolPickerSymbolsStyle, .symbolPickerDismiss) for customization.
- Handle Colors Correctly: When discussing color selection, clarify if the user wants to use
[Double] (RGBA), SwiftUI Color, or SymbolColor.
- Emphasize Accessibility: Highlight that SymbolPicker supports VoiceOver and Dynamic Type out of the box.
- 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.
- 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
-
Setting up a basic symbol picker?
- Basic installation and concepts →
references/SymbolPicker.md
- To apply the modifier to a view →
references/SymbolPickerView.md
-
Picking symbols with color?
- To use different color binding types →
references/SymbolPickerView.md
- To understand the
SymbolColor model → references/SymbolColor.md
-
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
@State private var isPresented = false
@State private var icon = "star"
Button("Pick Icon") { isPresented = true }
.symbolPicker(isPresented: $isPresented, symbolName: $icon)
With Color Selection
@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
- Add Package Dependency:
https://github.com/SzpakKamil/SymbolPicker.git (Min version 1.0.0).
- Import:
import SymbolPicker.
- 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.