3

I export SF Symbols to pdf icons and default white color changed to black. I would like to change the black color back to white. I found that .colorInvert do it but when I put Image into Button it set black again.

import SwiftUI

#if os(macOS)
extension Image {
    static func sfSymbol(_ systemName: String) -> some View {
        Image(systemName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .colorInvert()
        .frame(height: 20)
    }
}

struct ImageView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            Image.sfSymbol("square.and.arrow.down.fill")
            Button(action: {}, label: { Image.sfSymbol("square.and.arrow.down.fill") })
        }
    }
}
#endif

PDF icon: square.and.arrow.down.fill.imageset

enter image description here

Victor Kushnerov
  • 3,706
  • 27
  • 56
  • I see no issues. Please upload a sample project and place a link here. – Mojtaba Hosseini Oct 27 '19 at 17:14
  • You can reproduce this issue with above code. [square.and.arrow.down.fill.imageset](https://github.com/filimo/ReaderTranslator/tree/master/ReaderTranslatorMac/Assets.xcassets/square.and.arrow.down.fill.imageset) – Victor Kushnerov Oct 27 '19 at 17:32
  • Thats a lot! can you please upload a minimal version? Just one view! – Mojtaba Hosseini Oct 27 '19 at 17:35
  • You can run my project if you need. https://github.com/filimo/ReaderTranslator.git There are many views there. You should select ReaderTranslatorMac target and go to [https://github.com/filimo/ReaderTranslator/blob/master/ReaderTranslator/Extentions/Image.swift](https://github.com/filimo/ReaderTranslator/blob/master/ReaderTranslator/Extentions/Image.swift) – Victor Kushnerov Oct 27 '19 at 17:37
  • Try to make it rendred as Template Image instead of Original, by changing the rendering mode to .alwaysTemplate. – Zouhair ISKSIOU Oct 28 '19 at 09:37
  • .alwaysTemplate is available for UIImage only not for Image in SwiftUI – Victor Kushnerov Oct 28 '19 at 12:05
  • For the solution check this answer: https://stackoverflow.com/a/59974025/4145420 – MGY Dec 08 '22 at 08:36

2 Answers2

6

I actually had the same problem and figured out that you have to change the rendering mode in the icon's attribute inspector to "Template Image".

eberhapa
  • 358
  • 3
  • 11
1

Solution

Here is the solution:

Image(systemName)
    .renderingMode(.template)
    .foregroundColor(.white)

Link to the original answer.

Enjoy.

MGY
  • 7,245
  • 5
  • 41
  • 74