Post not yet marked as solved
On my shop and content views of my app, I have a shopping cart SF symbol that I've modified with a conditional to show the number of items in the cart if the number of items is above zero. However, whenever I change tabs and back again, that icon disappears even though there should be an item in the cart.
I have a video of the error, but I have no idea how to post it. Here is some of the code, let me know if you need to see more of it:
CartManager.swift
import Foundation
import SwiftUI
@Observable class CartManager {
/*private(set)*/ var products: [Product] = []
private(set) var total: Int = 0
private(set) var numberofproducts: Int = 0
func count() -> Int {
numberofproducts = products.count
return numberofproducts
}
func addToCart(product: Product) {
products.append(product)
total += product.price
numberofproducts = products.count
}
func removeFromCart(product: Product) {
products = products.filter { $0.id != product.id }
total -= product.price
numberofproducts = products.count
}
}
ShopPage.swift
import SwiftUI
struct ShopPage: View {
@Environment(CartManager.self) private var cartManager
var columns = [GridItem(.adaptive(minimum: 135), spacing: 0)]
@State private var searchText = ""
let items = ["LazyHeadphoneBean", "ProperBean", "BabyBean", "RoyalBean", "SpringBean", "beanbunny", "CapBean"]
var filteredItems: [Bean] {
guard searchText.isEmpty else { return beans }
return beans.filter { $0.imageName.localizedCaseInsensitiveContains(searchText) }
}
var body: some View {
NavigationStack {
ZStack(alignment: .top) {
Color.white
.ignoresSafeArea(edges: .all)
VStack {
AppBar()
.environment(cartManager)
ScrollView() {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(productList, id: \.id) { product in
NavigationLink {
beanDetail(product: product)
.environment(cartManager)
} label: {
ProductCardView(product: product)
.environment(cartManager)
}
}
}
}
}
.navigationBarDrawer(displayMode: .always))
}
}
.environment(cartManager)
}
var searchResults: [String] {
if searchText.isEmpty {
return items
} else {
return items.filter { $0.contains(searchText)}
}
}
}
#Preview {
ShopPage()
.environment(CartManager())
}
struct AppBar: View {
@Environment(CartManager.self) private var cartManager
var body: some View {
NavigationStack {
VStack (alignment: .leading){
HStack {
Spacer()
NavigationLink(destination: CartView()
.environment(cartManager)
) {
CartButton(numberOfProducts: cartManager.products.count)
}
}
Text("Shop for Beans")
.font(.largeTitle .bold())
}
}
.padding()
.environment(CartManager())
}
}
CartButton.swift
import SwiftUI
struct CartButton: View {
var numberOfProducts: Int
var body: some View {
ZStack(alignment: .topTrailing) {
Image(systemName: "cart.fill")
.foregroundStyle(.black)
.padding(5)
if numberOfProducts > 0 {
Text("\(numberOfProducts)")
.font(.caption2).bold()
.foregroundStyle(.white)
.frame(width: 15, height: 15)
.background(Color(hue: 1.0, saturation: 0.89, brightness: 0.835))
.clipShape(RoundedRectangle(cornerRadius: 50))
}
}
}
}
#Preview {
CartButton(/*numberOfProducts: 1*/numberOfProducts: 1)
}
Post not yet marked as solved
Hello!
I've been struggling for a while to understand exactly how margins work for custom SF symbols.
For example, I'll have two identical svg templates containing near-identical icons (each with a circle outline and a shape in the middle), see attached images. The icons are positioned in the exact same manner in the template, so that the only difference is the symbol inside the circle.
When these symbols are exported from SF Symbols and put into Xcode, I noticed that one of the symbols has a slight margin to the right and to the bottom of the symbol, causing it to fall out of alignment with surrounding symbols.
I've been trying to eliminate this margin in any way I can think of, but to no avail. Anyone able to offer assistance on how to remove it and/or an explanation as to why it's there?
Post not yet marked as solved
Examples of using SymbolEffect in AppKit all seem to be in NSImageView, and look through APIs it seems that the only way to apply those effect animations outside of SwiftUI is indeed in an NSImageView.
I have a NSStatusItem where I'm using an SF Symbol in the NSStatusBarButton title (subclass of NSButton) and was trying to figure out if there was a way to use a SymbolEffect there.
If the image of an NSButton uses (used) an NSImageView under the hood, that used to hidden in the buttons cell. Seeing how cells seem to be inaccessible now, perhaps there isn't a NSImageView in there these days anyway. Can NSStatusBarButton titles be provided by a custom view, oh I'm guessing the deprecated view property is still operational, but if I'm trying to release to the Mac App Store, that as equally off-limits as an NSButtonCell would have been. Is there a non-deprecated way that will let me ship to the App Store?
Post not yet marked as solved
I am trying to include custom symbol resources in a swift package for use in other projects. I have read the documentation here:
https://developer.apple.com/documentation/xcode/bundling-resources-with-a-swift-package
However there is no example code and I have created a very simple project to try and get this working but it does not.
.target(
name: "TestLibrary",
resources: [.process("Resources/Media.xcassets")]
),
This is in the Package.swift file and the path relative to the Package.swift file is Sources/TestLibrary/Resources/Media.xcassets.
There's a GitHub project with an example custom SF Symbol SVG (but this may not be available in the future): https://github.com/kudit/TestLibrary
Including this as a package in a blank Swift Playgrounds App project and just importing the TestLibrary and including TestImageView() in the ContentView technically works (it shows the system full star image, but none of the ways of rendering the test symbol as recommended works. It does work for a few of the options in the #Preview when viewing the project in Xcode.
Anyone have any suggestions or know how to get the resources to be accessible from outside the module? I have tried both the .copy( option as well as the .process( option and neither seem to work.
Post not yet marked as solved
custom font is not displayed in storyboard after clean all data and restart still not working
Post not yet marked as solved
Hello!
I have SF Symbols 4 but i can't cope the icons, it says i need to install font i have already downloaded from Fonts - Apple Developer, is there fonts for sf 4
Post not yet marked as solved
Hi!
I'm trying to port a feature from UIKit to SwiftUI.
Pixel-perfection isn't a hard requirement, but it makes it easier to image-diff the two implementations to find places that need adjustment.
I noticed that when using symbol images, even if the visual size of the opaque part of the symbol is the same, the frame (bounds? margin? extents? padding? Trying to find a word here for the transparent box around the symbol that's UI-framework-agnostic.) is different, which affects apparent whitespace when the symbol is placed in a view.
I created a minimal example in a SwiftUI preview:
struct MyCoolView_Previews: PreviewProvider {
struct UIImageViewWrapper: UIViewRepresentable {
var uiImage: UIImage
func makeUIView(context: Context) -> UIImageView {
let uiImageView = UIImageView()
uiImageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(
font: UIFont.systemFont(ofSize: 64)
)
uiImageView.tintColor = UIColor.black
return uiImageView
}
func updateUIView(_ uiView: UIImageView, context: Context) {
uiView.image = uiImage
}
}
static var previews: some View {
VStack {
UIImageViewWrapper(uiImage: UIImage(systemName: "exclamationmark.triangle.fill")!)
.background(Color.pink)
.fixedSize()
Image(systemName: "exclamationmark.triangle.fill")
.font(Font.system(size: 64))
.background(Color.pink)
ZStack {
UIImageViewWrapper(uiImage: UIImage(systemName: "exclamationmark.triangle.fill")!)
.background(Color.blue)
.fixedSize()
Image(systemName: "exclamationmark.triangle.fill")
.font(Font.system(size: 64))
.background(Color.pink)
.opacity(0.5)
}
}
}
}
From top to bottom, the screenshot shows the UIKit version, then the SwiftUI version, and finally the two versions overlaid to show where they don't overlap. Note that the blue regions above and below the third item represents where the frame of the UIKit version extends past the frame of the SwiftUI version.
Does anyone know why these are different?
Is there a property that I can set on the SwiftUI version to make it behave like UIKit, or vice-versa?
Thanks!
PS: The difference in frame appears to depend on the specific symbol being used. Here it is for "square.and.arrow.up":
Post not yet marked as solved
Hi,
Could you please explain how to use SF Symbols animations in Final Cut? I would greatly appreciate your help.
Thank you!
Post not yet marked as solved
Is it possible to render an SF Symbol to a plane in RealityKit? As an example, render it as a 2D image without any depth, like a plane?
I thought of MeshResource and generateText but you cannot interpolate SF Symbols (their literal text interpretation displays instead).
Perhaps rendering it as a texture on a plane? Any thoughts?
Post not yet marked as solved
Hi, I've been trying for an hour to turn the symbols in sf symbols from left to right to right to left, I'd appreciate some help
Post not yet marked as solved
When trying to download the SF Symbols 5 from https://developer.apple.com/sf-symbols/ I get the following error:
AccessDeniedAccess DeniedTPTDDDRWPA4DP07G6WzFvROjgWGcenpOUtV8eECyQqt+lXynXGWT7CIXssUDhQd8tT6towxql069msZ+7AHCYpqEOhc=
I am trying to download the SF Symbols 5 app on my Mac but I get an error when I try to download through the SF Symbols page. This is supposedly the download link that is not working: https://devimages-cdn.apple.com/design/resources/download/SF-Symbols-5.dmg.
I assume this is probably a temporary error but I thought I would bring this to attention anyway.
Post not yet marked as solved
I created a custom icon using illustrator. I've drawn Ultrathin, duplicated the same and increased stroke width followed by expanding and creating a compound mask. When I try to validate the same I am getting Interpolation error, I am unable to figure where the error is. Can someone please help?
Hi,
I'd like to remove the SF Symbols. I'm not sure if I can just delete it in the applications folder because I see that it takes 364.3 MB of disk space to install, but only 24.9 MB in the applications folder.
I'm using macOS Monterey 12.7
Can anybody tell me how to delete it?
Post not yet marked as solved
In my app I use the symbol rectangle.portrait.rotate as
Image(systemName: "rectangle.portrait.rotate")`
targeting iOS 16.0 and later.
It is shown on the simulator iPhone SE 3rd generation without complaining, however on my iPhone (SE model MHGP3QL/A, iOS 16.7) it is not shown and the debugger states:
No symbol named 'rectangle.portrait.rotate' found in system symbol set
Post not yet marked as solved
Hello,
is there a recommended way to render Menu items, e.g in a SwiftUI ContextMenu with icon (SFSymbols)?
Let's say I have the following setup:
Both buttons render fine on native macOS (e.g Sonoma) but Catalyst refuses to render the symbol at all. I tried every possible combination I could think off. The only way I found was to directly copy and paste a symbol from the SF symbols app and inline it with the label string as unicode. Unfortunately I have a couple custom SF symbols so this isn't really an option for me.
I feel like this is a perfectly valid usecase, as it makes the menu visually a lot easier scannable.
With UIKit and Ventura this at least worked for Menubar items but now also seems broken on Sonoma.
I would greatly appreciate any hints. Thanks!
Post not yet marked as solved
Has anyone a workaround here?
...a lot of font shuffling appeared after I upgraded my system to Sonoma. Cant get SF Pro to work in SF Symbols, meaning I cant copy any symbols, since the Apple fonts don't land properly there.
Tried to delete all appal fonts, re-download them from Apple, reinstall and reboot the system. Nothing worked. I run all this on a MB Air M2
Any clues, anyone? Super grateful if anyone can help!
Post not yet marked as solved
Hello,
I've discovered symbols and it gave me idea that if use them in FCPX or Keynote, it would be lot easier to tell story to people. It is minimalistic and huge library. For example, in a camera review, I would use symbols to describe buttons of it, so in a long run, all cameras have same buttons as working but in different shapes and locations, in a language of symbols, it would a lot easier to understand especially in classic film cameras. 📸
This is my first post in Developer Forums, so Hello World!
Thanks.
Post not yet marked as solved
The code that has the issue is this
ZStack {
Image(systemName: icon.isEmpty ? "book.pages.fill" : icon)
.resizable()
.scaledToFit()
.scaleEffect(2.5)
.foregroundStyle(.ultraThickMaterial)
}
the book.pages.fill is completely blurry and the lung is partly blurred.
If I remove the .forgroundStyle(.ultraThickMaterial) is is completely blurred.
Some icons, tho, are sharp no matter the forgroundStyle is omitted or not.
COULD NOT UPLOUD IMAGE
Here is the complete code
import SwiftUI
struct FolderOverviewItemView: View {
@Environment(\.colorScheme) var colorScheme
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
@Environment(\.verticalSizeClass) private var verticalSizeClass
var title: String
var description: String
var icon: String
var image: Image? = Image("dummy")
var color: Color
var body: some View {
Grid {
GridRow() {
Color.clear
Color.clear
Color.clear
Color.clear
}
GridRow() {
Color.clear
ZStack {
Image(systemName: icon.isEmpty ? "book.pages.fill" : icon)
.resizable()
.scaledToFit()
.scaleEffect(2.5)
.foregroundStyle(.ultraThickMaterial)
}
.gridCellColumns(2)
Color.clear
}
GridRow() {
Color.clear
Color.clear
Color.clear
Color.clear
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
GridRow() {
HStack(alignment: .top) {
VStack(alignment: .leading) {
Text(title)
.font(.headline)
.lineLimit(1, reservesSpace: true)
if horizontalSizeClass == .regular {
Text(description.isEmpty ? " " : description)
.font(.caption)
.lineLimit(2, reservesSpace: true)
.truncationMode(.tail)
} else {
Text(description.isEmpty ? " " : description)
.font(.caption)
.lineLimit(2, reservesSpace: true)
.truncationMode(.middle)
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.gridCellColumns(4)
.padding()
.background(.regularMaterial)
}
}
.background(
LinearGradient(gradient: Gradient(colors: [color.darken(by: -0.2), color.darken(by: 0.1)]), startPoint: .topLeading, endPoint: .bottomTrailing)
)
}
}
Post not yet marked as solved
I'm confused about the SF Pro fonts. Can these be used in our apps?
I tried pasting characters from SF Pro into a label, but was unable to get them to display properly. "SF Pro" doesn't appear in the list of available fonts in Xcode.
If these are not intended to be used by app developers, then what is their purpose?
Are "SF Symbols" different that SF Pro? What about the list of icons that appears in the "Symbols Library" in Xcode? There are so many different sources of symbols and icons, it is very confusing.
If any of these sources is OK to use in an iOS app, is it also OK to export them for use in the event that business needs require me to create an alternate version of my app for some hypothentical non-iOS platform?
Thanks,
Frank
KittyCat.
