[SOLVED] How to set width and heigh of UIButton that is added as custom view of UIBarButtonItem when using SVG images?


I am having a vector image, downloaded from phosphor-icons:

I have downloaded .svg version of an icon.
When you open this vector file in image editor, you see that it has 192x192 dimensions.
Which I guess its not relevant at all when it comes to vectors files, but…

I have this code:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 32, height: 32))

button.imageView?.contentMode  = .scaleAspectFit
button.backgroundColor = .yellow
button.setImage(UIImage(named: "alien"), for: .normal)
button.setTitle(nil, for: .normal)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
let item = UIBarButtonItem(customView: button)

navigationItem.setRightBarButtonItems([item], animated: true)

Now the thing is, if I use this original svg image(192×192), a button shrinks and it looks like this:


but I don’t want this button to have these dimensions, but rather those that are set with:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 32, height: 32))

Now, if I go to an image editor, and change the size of this vector file to 22x22 (it still stays svg file), it shows up like this:


which looks how I want.

The thing is, I thought that Xcode will generate required png file from this svg based on device’s pixel density. So in this case, say, on newer devices that use @3x images, at compile time, cause my button is defined as 32x32 points, a 96px X 96px image will be created and used as @3x image.

Also, I thought that this is going to work like described, no matter what "dimensions" a physical .svg file is, cause it’s a vector, and it should be up/down scaled as view dictates. Where I am wrong with this, and how to make this button to look the same as from second image, no matter of what are actual .svg dimensions?


In Attributes Inspector, for this asset, I have set Preserve Vector Data and selected Single Scale option.


Another way of to achieve this without using autolayout constraints , like you commented , is using a UIView() for customview

   let view = UIView(frame: button.frame)

   let item = UIBarButtonItem(customView: view)
   self.navigationItem.setRightBarButtonItems([item], animated: true)

Answered By – Omer Tekbiyik

Answer Checked By – Jay B. (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *