You probably know SF Symbols from Apple allowing you to use icons and symbols directly in your application without having to import any image.
SymbolPicker allows you to offer a view to your users to select a symbol very easily.
Standard | Search | Limited |
---|---|---|
![]() |
![]() |
![]() |
Nowaday we only support Swift Package Manager. You can use build-in UI tool for XCode with this search words: SymbolPicker
or you can add it directly with this following command :
.package(url: "https://github.com/Kelvas09/SymbolPicker.git", from: "1.0.0")
First of all you have to import the library SymbolPicker
:
import SymbolPicker
You then have the option of using the SymbolPickerView
. This view represents the list of selectable symbols.
The latter is not embedded in a NavigationView. If you want to display it with a title, you have to do it yourself:
...
NavigationView {
SymbolPickerView(selectedSymbol: $selectedSymbol, selectedColor: .orange)
.navigationTitle("Symbols")
.navigationBarTitleDisplayMode(.inline)
}
...
Here is a complete example:
//
// ContentView.swift
// SymbolPickerSample
//
// Created by Kévin Sibué on 13/01/2023.
//
import SwiftUI
import SymbolPicker
struct ContentView: View {
@State
var selectedSymbol: Symbol?
@State
var displaySymbolPicker: Bool = false
var body: some View {
VStack {
VStack {
Image(systemName: selectedSymbol?.value ?? "")
.font(.largeTitle)
}
.padding(8)
Button {
displaySymbolPicker = true
} label: {
Text("Select standard symbols")
}
.buttonStyle(.borderedProminent)
}
.padding()
.sheet(isPresented: $displaySymbolPicker) {
NavigationView {
SymbolPickerView(selectedSymbol: $selectedSymbol, selectedColor: .orange)
.navigationTitle("Symbols")
.navigationBarTitleDisplayMode(.inline)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
When a user selects a symbol, it is highlighted. By default the selection color is blue
but you can change this value when creating the view:
SymbolPickerView(selectedSymbol: $selectedSymbol, selectedColor: .orange)
By default the search for symbols is allowed in the picker, it is however possible to change this setting when creating the view:
SymbolPickerView(selectedSymbol: $selectedSymbol, searchEnabled: false)
⚠️ WARNING Search is only possible when SymbolPickerView
is embed on NavigationView
.
SymbolPickerView
embeds SymbolProvider
protocol with a default implementation: DefaultSymbolProvider
. This class allows to retrieve all existing symbols.
When you build an SymbolPickerView
, by default it uses this class to get the list of symbols to display.
If you want to use your own symbol list, you can create your own class by implementing the SymbolProvider
protocol :
import Foundation
import SymbolPicker
final class LimitedSymbolProvider: SymbolProvider {
func getAll() -> [Symbol] {
return [
Symbol(value: "xmark"),
Symbol(value: "square.and.arrow.down"),
Symbol(value: "highlighter"),
Symbol(value: "paperplane.fill"),
Symbol(value: "calendar.day.timeline.left"),
]
}
}
And then use it in the creation of the view:
...
NavigationView {
SymbolPickerView(selectedSymbol: $selectedSymbol, selectedColor: .orange, symbolProvider: LimitedSymbolProvider())
.navigationTitle("Symbols")
.navigationBarTitleDisplayMode(.inline)
}
...
If you are interested in this package you will probably also be interested in an emoji picker: EmojiPicker
You can access to sample project on folder SymbolPickerSample
link |
Stars: 0 |
Last commit: 3 weeks ago |
Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics