iOS 中自带的 SF Symbol 数量已经超过了 5000 个，一些常见的符号在日常开发中还是相当好用的。使用SF Symbol 一定会遇到设置尺寸的问题。本文将介绍三种常见设置 SF symbol 大小的方法。
设置 font
因为SF symbol 作为矢量图标，实现上和字体一致。因此可以通过设置字体的方式来设置大小。通过字体的 size 和 weight 来调整图标的大小和粗细。
HStack {
Image(systemName: "checkmark")
.font(.system(size: 30, weight: .regular))
Image(systemName: "checkmark")
.font(.system(size: 25, weight: .regular))
Image(systemName: "checkmark")
.font(.system(size: 25, weight: .medium))
Image(systemName: "checkmark")
.font(.system(size: 25, weight: .bold))
}
设置 frame
因为 SF symbol 通过 Image 来显示，因此也可以通过控制图像的思路来调整大小：标记为 resizeable 通过设置 frame 让图案来填满容器。
HStack {
Image(systemName: "checkmark")
.frame(width: 20, height: 20)
Image(systemName: "checkmark")
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
Image(systemName: "checkmark")
.resizable()
.scaledToFit()
.frame(width: 25, height: 25)
Image(systemName: "checkmark")
.resizable()
.scaledToFit()
.frame(width: 30, height: 30)
}
特别要提醒的是记得要先将 Image 标记为 **resizable。**否则虽然容器变大了，但是容器的内容图标不会变大。这是 Image 控件的通用特性。
上图中虽然 frame 都是 40 x 40，但是第一个因为没有标记为 **resizable，**因此只是容器尺寸变大，内容大小不会跟随 frame 变化。
HStack {
Image(systemName: "checkmark")
.frame(width: 40, height: 40)
.background {
RoundedRectangle(cornerRadius: 2)
.fill(AppColor.gray0)
}
Image(systemName: "checkmark")
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
.background {
RoundedRectangle(cornerRadius: 2)
.fill(AppColor.gray0)
}
}
设置 scale
Image 控件还有很便捷的 func imageScale(_ scale: Image.Scale) ，如果只是简单的按照原始标准大小进行微调，可以使用这个方法。但是 scale 只有 small、medium、large 三档：
HStack {
Image(systemName: "heart.fill")
.imageScale(.small)
Image(systemName: "heart.fill")
.imageScale(.medium)
Image(systemName: "heart.fill")
.imageScale(.large)
}
