在构建Swiftui项目时，如果是比较遵循Swiftui的结构，那么大家肯定都非常乐意使用Apple自带的SFsymbols图标。那么这个文章就是来介绍我是如何使用SFsymbols来构建我的应用的。

下载客户端

你需要使用SFsymbols客户端来查看所有支持的图标，这是一种非常便捷的方式。并且因为你只需要在应用中访问，而不是网页，所以打开速度和性能非常棒。

下载客户端

下载客户端

安装完成我们就可以看到图标了

主界面

使用图标

最简单的使用就是在Swiftui下使用systemName的Image。例如：

1
Image(systemName: "star")

那么这个systemName是哪里来的呢

选择我们需要的图标，按下command+shift+c即可复制你选中的图标的名称。

版本适配

我们需要注意，一些新的图标是不支持旧版系统的。所以当你使用iOS16专属图标时，在iOS15的设备上则什么都不显示。

所以你需要注意图标的版本问题。

展开检查器，我们可以看到单色图标的适配版本。

版本适配

在文本中插入图标

sfsymbol本身是字体图标，所以我们可以在文本中非常方便的插入图标。例如

1
Text("hello,\(Image(systemName: "globe.europe.africa.fill"))")

如果你认为文本中的图标样式有些问题，还可以进行微调。

1
Text("hello,\(Image(systemName: "globe.europe.africa.fill").imageScale(.large))")

更改图标的大小

因为本身图标是字体图标，所以我们可以通过调整字体大小的方法来调整图标的大小。例如：

1
2
Image(systemName: "globe")
    .font(.system(size: 72))

所以和字体一样，你无法通过frame来调整大小。

更改图标的粗细

是的，因为使用了字体图标，你甚至可以改变图标的粗细

1
2
Image(systemName: "keyboard")
    .font(.largeTitle.weight(.black))

更改图标的颜色

更改方法与更改字体颜色的方法相同。都是使用foregroundColor

1
2
Image(systemName: "doc")
    .foregroundColor(.red)

使用各种颜色图标

我们在使用一些面性图标时，会发现这些图标中间是镂空的。意味着当他们作为按钮时，显示会有点奇怪。或者我们想要镂空部分填充上自己想要的颜色，或者我们想自定义丰富多彩的颜色。sfsymbols提供了非常多的方法。

在检查器中我们可以看到有多种渲染方式可供我们选择。

渲染方式

并且向我们提供了多种渲染方式的预览。

默认为「单色」状态。

使用分层图标

1
2
3
Image(systemName: "square.stack.3d.down.right.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.indigo)

分层

使用调色盘图标

1
2
3
Image(systemName: "person.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.red, .green, .blue)

调色盘图标

使用多色图标

1
2
Image(systemName: "externaldrive.badge.plus")
    .symbolRenderingMode(.multicolor)

多色图标

多色图标不支持自定义颜色。

总结

学会以上的调用方式基本可以实现你绝大多数需求了。如果有更多的需求，也可以访问下面的参考文章，可以帮助你了解到更多。

The Complete Guide to SF Symbols