Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change a SF Symbol size inside a UIButton

I am declaring a Button like this :

let menuButton = UIButton()

After that I am trying to change it's parameter and set his position on the view with the help of LBTATools (a pod) with this function:

fileprivate func setMenuButtonUI() {
        menuButton.setImage(UIImage(systemName: "line.horizontal.3.decrease.circle.fill"), for: .normal)
        view.addSubview(menuButton)
        menuButton.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom: nil, trailing: nil, padding: .init(top: 20, left: 60, bottom: 0, right: 0), size: .init(width: 40, height: 40))
        menuButton.setupShadow(opacity: 1, radius: 5, offset: .zero, color: .darkGray)
        menuButton.tintColor = .red
    }

Everything is working well, I get the right color, position and even size. Only problem is it's size, I cannot change it with all the usual methods like menuButton.imageView?.contentMode = .scaleAspectFit etc..

Probably it comes from the fact that it is a SF Symbol and not a normal image.

The help of someone would be really appreciated.

Thanks

like image 406
Cublax Avatar asked Mar 11 '20 16:03

Cublax


People also ask

How do I change the size of my SF symbol?

To change the scale of an SF Symbol you can make use of a UIImage Symbol Configuration. It allows you to set the font, scale, point size, weight, and text style.


3 Answers

You can do it using SymbolConfiguration like in the sample code below:

let largeConfig = UIImage.SymbolConfiguration(pointSize: 140, weight: .bold, scale: .large)
       
let largeBoldDoc = UIImage(systemName: "doc.circle.fill", withConfiguration: largeConfig)

button.setImage(largeBoldDoc, for: .normal)

enter image description here

like image 178
Jawad Ali Avatar answered Oct 17 '22 02:10

Jawad Ali


The iOS 15 and Swift 5 solution would be:

var config = UIButton.Configuration.plain() // Change style with e.g. `.filled()`
config.title = "Title of the UIButton"
config.image = UIImage(systemName: "line.horizontal.3.decrease.circle.fill",
                                   withConfiguration: UIImage.SymbolConfiguration(scale: .small)) // Change the scale here
config.imagePadding = 4 // Padding between image and title
            
let menuButton = UIButton()
menuButton.configuration = config
like image 7
Paul Spiesberger Avatar answered Oct 17 '22 01:10

Paul Spiesberger


Objective C:

UIImageSymbolConfiguration * configuration = [UIImageSymbolConfiguration configurationWithPointSize:30 weight:UIImageSymbolWeightBold scale:UIImageSymbolScaleLarge];
UIImage * image = [UIImage systemImageNamed:@"" withConfiguration:configuration];
[_btn setImage:image forState:UIControlStateNormal];
like image 1
Ofir Malachi Avatar answered Oct 17 '22 03:10

Ofir Malachi