Question 68426 in IOS Swift Question posted in
The official documentation can be found here.

How to replace SFSymbol icon transparent color with white color – Ios swift

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Add container view, set your imageView to .withRenderingMode(.alwaysTemplate), follow my example below… Set your container and your image view under your class controller:

    let myImageV: UIImageView = {
    let iv = UIImageView()
    iv.image = UIImage(systemName: "mic.fill")?.withRenderingMode(.alwaysTemplate)
    iv.tintColor = .white
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.contentMode = .scaleAspectFit
    iv.clipsToBounds = true
    
    return iv
}()

let containerView: UIView = {
    let v = UIView()
    v.backgroundColor = .red
    v.layer.cornerRadius = 50
    v.clipsToBounds = true
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

    now in viewDidLoad set constraints

    view.addSubview(containerView)
    containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    containerView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    containerView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    
    containerView.addSubview(myImageV)
    myImageV.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    myImageV.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    myImageV.heightAnchor.constraint(equalToConstant: 60).isActive = true // here set the height of mic
    myImageV.widthAnchor.constraint(equalToConstant: 60).isActive = true // here set the width of mic

    This is the result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search