jaywcjlove/sfsymbolspicker

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:

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:

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:

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:

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:

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:

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:

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:

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:

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.

Package Metadata

Repository: jaywcjlove/sfsymbolspicker

Default branch: main

README: README.md