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.
⚠️ WARNING Breaking change on SymbolProvider
: method getAll()
has been replaced with property symbols: [Symbol]
. If you use a custom provider which implement this protocol you must update it:
Old implementation
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"),
]
}
}
New implementation
final class LimitedSymbolProvider: SymbolProvider {
var symbols: [Symbol] {
return [
Symbol(value: "xmark"),
Symbol(value: "square.and.arrow.down"),
Symbol(value: "highlighter"),
Symbol(value: "paperplane.fill"),
Symbol(value: "calendar.day.timeline.left"),
]
}
}
Standard | Search | Custom | Categories |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
1.0.0 | 1.1.0 |
---|---|
![]() |
![]() |
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.1.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 {
var symbols: [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)
}
...
With version 1.1.0
it is possible to retrieve only a subset of symbols from a category. These categories are identified via the SymbolProviderType
enumerator.
The GenericProviderFactory
class will allow you to generate a provider for the type you have chosen:
...
GenericProviderFactory.create(type: .camera)
...
With version 1.1.0
it is now possible to display the symbols sorted by category:
For this you will need to use the new SymbolCategoryPickerView
view:
...
NavigationView {
SymbolCategoryPickerView(
selectedSymbol: $selectedSymbol,
selectedColor: .orange,
categories: FullCategoriesSymbolProvider().categories)
.navigationTitle("Categories")
.navigationBarTitleDisplayMode(.inline)
}
...
In the same way as the SymbolPickerView
you can specify the pre-selected symbol and the color.
On the other hand, here you must specify the list of categories to be displayed. By default you can use the class FullCategoriesSymbolProvider
which will give you access to all existing categories in SF Symbols.
It is possible to create your own class which will then give access to a subset of symbols.
⚠️ WARNING Search is only possible when SymbolCategoryPickerView
is embed on NavigationView.
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: 11 |
Last commit: 42 weeks ago |
Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics