Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to replace SFSymbol icon transparent color with white color

Currently, I am using CALayer to achieve ripple effect. However, the transparent color in SFSymbol causes an issue.

I am using the following way to setup UIImageView

imageView.image = UIImage(systemName: "mic.circle.fill")
imageView.tintColor = UIColor.red

The above code yield the following outcome. (Green color is CALayer with ripple animation)

enter image description here


Instead of transparent color, I would like the mic symbol to have solid white color. I try

imageView.image = UIImage(systemName: "mic.circle.fill")?.withRenderingMode(.alwaysOriginal)

It yields

enter image description here

Now, I get solid white color for mic symbol. However, the circle no longer solid red color.


I further try

imageView.image = UIImage(systemName: "mic.circle.fill")?.withRenderingMode(.alwaysOriginal).withTintColor(UIColor.red)

enter image description here

Now, it backs to the same problem again.

Do you have any idea, how can I have a SFSymbol, with

  1. Solid white for mic symbol
  2. Solid red for the filled circle

Thanks.

like image 243
Cheok Yan Cheng Avatar asked Nov 14 '25 09:11

Cheok Yan Cheng


1 Answers

I can use the following code snippet

    let image = UIImage(
        systemName: "mic.circle.fill",
        withConfiguration:UIImage.SymbolConfiguration(weight: .regular))?.applyingSymbolConfiguration(
            UIImage.SymbolConfiguration(paletteColors:[
                .white,
                .label,
                UIColor(red: 0.90, green: 0.22, blue: 0.21, alpha: 1.00)
            ])
        )

This code snippet is generated from 3rd party software: San Fransymbols

like image 77
Cheok Yan Cheng Avatar answered Nov 17 '25 07:11

Cheok Yan Cheng