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.