SymbolPicker

What This Skill Does

The SymbolPicker skill is a powerful developer utility designed to streamline the integration of native SF Symbol selection within SwiftUI applications. It bridges the gap between Apple's native design language and custom developer requirements, providing a seamless, platform-agnostic UI component. By utilizing the SymbolPicker skill, developers can offer their users a highly customizable, accessible, and intuitive way to select symbols directly within their apps across iOS, iPadOS, macOS, and visionOS. It eliminates the need for boilerplate code by handling the complexities of symbol presentation, filtering, and state management, ensuring the UI remains consistent with Apple’s design guidelines while offering flexibility in color handling and symbol styling.

Installation

To integrate this skill into your OpenClaw environment, use the following terminal command: clawhub install openclaw/skills/skills/szpakkamil/symbolpicker

Ensure your project meets the minimum requirements: Swift 5.9+, Xcode 15.0+, and the minimum deployment targets of iOS 14.0, iPadOS 14.0, macOS 11.0, or visionOS 1.0. Once installed, the skill allows you to inject the .symbolPicker modifier into any view that supports standard SwiftUI button interactions.

Use Cases

This skill is perfect for applications requiring user-generated icons or category labeling, such as custom note-taking apps, activity trackers, or project management tools. It excels in scenarios where developers need to provide high-quality iconography without sacrificing the look and feel of a native Apple experience. Additionally, it is highly recommended when specific styling preferences are required, such as enforcing filled versus outlined symbols or restricting color palettes using the SymbolColor model.

Example Prompts

1. "How do I set up a basic SymbolPicker in my SwiftUI app to change a user's avatar icon?"
2. "I need to force the SymbolPicker to only show filled icons and automatically dismiss the sheet after a selection is made."
3. "Can you show me how to bind the selected symbol and its color to my view model when using the SymbolPicker?"

Tips & Limitations

• Platform Consistency: Remember that the UI adapts to the hosting platform automatically. While it renders as a sheet on iOS, expect a popover on macOS and visionOS; adjust your layout anchoring accordingly.
• Accessibility: The picker is built with accessibility in mind, supporting VoiceOver and Dynamic Type. Ensure your app's surrounding UI also adheres to these standards to maintain a consistent user experience.
• Color Bindings: Be precise when selecting your color binding type; mixing raw RGBA values with Color objects can lead to inconsistent rendering if not handled through the SymbolColor wrapper provided by the skill.
• Dismissal Behavior: Use the .symbolPickerDismiss modifier to explicitly define user flow. Defaulting to onSymbolSelect often provides a more professional feel than requiring manual interaction.