# SFSymbolsPicker
**Repository Path**: mirrors_jaywcjlove/SFSymbolsPicker
## Basic Information
- **Project Name**: SFSymbolsPicker
- **Description**: A SwiftUI view component for selecting SF Symbols in your macOS and iOS apps.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2025-09-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
SFSymbolsPicker
===
A modern SwiftUI component for selecting SF Symbols in your macOS and iOS applications. Provides an intuitive interface with search functionality, pagination, and multi-language support.
## Features
- 🎯 **Easy Integration**: Simple SwiftUI component that works out of the box
- 🔍 **Smart Search**: Real-time search with fuzzy matching algorithms
- 📱 **Cross-Platform**: Native support for both macOS (popover) and iOS (sheet)
- ⚡ **Performance Optimized**: Lazy loading with pagination for smooth scrolling
- 🎨 **Customizable**: Flexible API for custom button styles and panel sizes
## Installation
### Swift Package Manager
Add SFSymbolsPicker to your project using Xcode:
1. In Xcode, go to `File` → `Add Package Dependencies...`
2. Enter the repository URL: `https://github.com/jaywcjlove/SFSymbolsPicker.git`
3. Click `Add Package`
Or add it to your `Package.swift` file:
```swift
dependencies: [
.package(url: "https://github.com/jaywcjlove/SFSymbolsPicker.git", from: "1.0.0")
]
```
## Usage
### Basic Usage
Use the default picker button that displays a popover on macOS and a sheet on iOS:
```swift
import SFSymbolsPicker
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection, autoDismiss: false)
}
}
```
### Using the `.sfSymbolsPicker` Modifier
Use the `.sfSymbolsPicker` modifier to add symbol selection functionality to any view:
```swift
import SwiftUI
struct ContentView: View {
@State private var isPresented = false
@State private var selectedSymbol = "star"
var body: some View {
Button("Select Symbol") {
isPresented = true
}
.sfSymbolsPicker(isPresented: $isPresented, selection: $selectedSymbol)
}
}
```
### Advanced Modifier Configuration
Configure the `.sfSymbolsPicker` modifier with additional parameters:
```swift
struct AdvancedView: View {
@State private var isPresented = false
@State private var selectedSymbol = "heart.fill"
var body: some View {
VStack {
Image(systemName: selectedSymbol)
.font(.system(size: 50))
.foregroundColor(.red)
.onTapGesture {
isPresented = true
}
.sfSymbolsPicker(
isPresented: $isPresented,
selection: $selectedSymbol,
prompt: "Search icons...",
autoDismiss: true,
panelSize: CGSize(width: 400, height: 350),
navigationTitle: "Choose Icon"
)
Text("Tap the icon to select a new symbol")
.font(.caption)
.foregroundColor(.secondary)
}
}
}
```
### Custom Button Style
Customize the picker button with your own content:
```swift
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection, autoDismiss: false) {
HStack {
Image(systemName: selection)
Text("Choose Symbol")
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
}
```
### Panel Size Customization
Customize the picker panel size on macOS using the `panelSize` modifier:
```swift
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection)
.panelSize(.init(width: 400, height: 300))
}
}
```
### Search Functionality
The picker includes built-in search functionality with real-time filtering:
```swift
SFSymbolsPicker(
selection: $selection,
prompt: String(localized: "Search symbols...")
)
```
## Custom Picker Implementation
For advanced use cases, you can build your own custom picker using the underlying components.
### Custom Picker for macOS
Create a custom symbol picker with popover presentation on macOS:
```swift
struct CustomSymbolsPicker: View {
@ObservedObject var vm: SFSymbolsPickerViewModel = .init(prompt: "", autoDismiss: true)
@State var selection: String = "star.bubble"
@State var isPresented: Bool = false
var body: some View {
#if os(macOS)
VStack(spacing: 23) {
Button("Select a symbol") {
isPresented.toggle()
}
.popover(isPresented: $isPresented) {
SFSymbolsPickerPanel(selection: $selection)
.environmentObject(vm)
.frame(width: 320, height: 280)
.navigationTitle("Pick a symbol")
}
Image(systemName: selection)
.font(.system(size: 34))
.padding()
}
.frame(width: 320)
.frame(minHeight: 230)
#endif
}
}
```
### Custom Picker for iOS
Create a custom symbol picker with sheet presentation on iOS:
```swift
struct CustomSymbolsPicker: View {
@ObservedObject var vm: SFSymbolsPickerViewModel = .init(prompt: "", autoDismiss: true)
@State var selection: String = "star.bubble"
@State var isPresented: Bool = false
var body: some View {
#if os(iOS)
NavigationView {
VStack {
Button("Select a symbol") {
isPresented.toggle()
}
Image(systemName: selection)
.font(.system(size: 34))
.sheet(isPresented: $isPresented) {
NavigationStack {
SFSymbolsPickerPanel(selection: $selection)
.environmentObject(vm)
.navigationTitle("Pick a symbol")
}
}
}
.navigationTitle("SF Symbols Picker")
}
#endif
}
}
```
## License
Licensed under the MIT License.