macOS上的SwiftUI，如何在按钮上使用自定义图像符号？

仔细阅读问题，这是一个MAC应用程序，systemName在MAC os上不可用

我试图在macOS上使用swiftUI构建一个简单的应用程序，但是我在显示一些图标时遇到了一些问题

我现在到处都读到你需要下载SF Symbols应用程序并自己导出符号才能使用它们，所以我这样做了，然后我将导出的符号添加到

.xAssets

中，现在我正在尝试创建一个带有图像的按钮，代码如下：

导入快捷界面
结构操作栏：视图{
var body：一些观点{
HStack{
垫片（）
按钮（操作：{
}) {
图像（“加”）
.font（字体系统（大小：24，重量：轻））
.foregroundColor（颜色：红色）
文本（“测试”）
}
}
.frame（最大宽度：。无穷大）
.padding（）
.背景（初始颜色（红色：0.8，绿色：0.8，蓝色：0.8））
}
}
结构ActionBar_预览：PreviewProvider{
静态var预览：一些视图{
ActionBar（）
}
}

我尝试了许多变体，例如：

struct ContentView: View {
    var body: some View {
        VStack {
            IconView(name: "plus")
                .frame(width: 200, height: 200, alignment: .center)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

图像（nsImage:nsImage（名称：“Plus”））

但是所有的信息，包括苹果公司自己的，只是关于UIImage的讨论，据我所知，UIImage是UIKit的一部分，UIKit是UI框架的iOS版本，有人把它用在macOS上了吗

非常感谢

编辑：资产作为

图像符号集导入

，Xcode不会抛出任何错误，因为我只是获取了SF Symbols应用程序生成的svg，并将其直接放在资产上

---

编辑2：我刚刚遇到这样的情况，即SVG支持是不可靠的。。。我尝试将SVG转换为PNG，但xcode不接受PNG作为符号集。。。所以，我猜这个功能是完全被破坏了？这太糟糕了…

您不需要自己下载或导出符号，只要这样做，它也可以在ios和mac catalyst中工作：

import SwiftUI

struct ContentView: View {
var body: some View {
    HStack {
        Spacer()
        Button(action: {

        }) {
            Image(systemName: "plus")
                .font(Font.system(size: 24, weight: .light))
                .foregroundColor(Color.red)
            Text("Test")
        }
    }
    .frame(maxWidth: .infinity)
    .padding()
    .background(Color.init(red: 0.8, green: 0.8, blue: 0.8))
}
}

---

在MacOS中，没有可用的系统映像。但提供了另一种选择。这将显示大多数MacOS系统默认图标

这是

NSImage.Name

的一个示例：

Icon(NSImage.refreshTemplateName)

以下是

图标

视图定义：

struct Icon: View {
    var image: NSImage.Name
    var body: some View {
        Image(nsImage: NSImage(named: image)!)
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    init(_ image: NSImage.Name){
        self.image = image
    }
}

p.S.视图没有名为

.font（）

的修饰符。请检查其文档以了解正确的语法

编辑：您可以通过以下格式跳过额外视图

Image(nsImage: NSImage(name: NSImage.addTemplateName))

NSImage.name的列表是

这是我的解决方案，但这是一个很大的黑客行为，我不知道苹果是否会批准它。所以，我认为这个答案是“教育目的”。 概念 其主要思想是修改SF Symbols应用程序导出的SVG文件，使其仅包含选定符号的一个实例，而不是完整模板，并使用SVGKit框架通过

NSViewRepresentable

对象显示它

出口 在Mac电脑上使用SF符号应用程序，选择要使用的符号，然后执行“导出自定义符号模板”

修改 在文本编辑器（如Sublime text或CotEditor）中打开导出的SVG文件

删除文件中除标题和“符号”字段之外的所有内容，该字段应仅包含要使用的符号变体。然后更改渲染画布的大小，并正确对齐符号

例如，如果要使用“plus”符号的“Regular-L”版本，则最终的“plus.svg”文件应如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 123-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
 <!--glyph: "uni10017C.medium", point size: 100.000000, font version: "Version 15.0d7e11", template writer version: "5"-->

 <g id="Symbols">
  <g id="Regular-L" transform="matrix(1 0 0 1 0 100)">
   <path d="M 67.4316 17.3828 C 70.0684 17.3828 72.2168 15.2832 72.2168 12.7441 L 72.2168 -30.3711 L 114.062 -30.3711 C 116.65 -30.3711 118.848 -32.5684 118.848 -35.1562 C 118.848 -37.793 116.65 -39.9414 114.062 -39.9414 L 72.2168 -39.9414 L 72.2168 -83.1055 C 72.2168 -85.6445 70.0684 -87.7441 67.4316 -87.7441 C 64.8438 -87.7441 62.6953 -85.6445 62.6953 -83.1055 L 62.6953 -39.9414 L 20.8496 -39.9414 C 18.2617 -39.9414 16.0645 -37.793 16.0645 -35.1562 C 16.0645 -32.5684 18.2617 -30.3711 20.8496 -30.3711 L 62.6953 -30.3711 L 62.6953 12.7441 C 62.6953 15.2832 64.8438 17.3828 67.4316 17.3828 Z"/>
  </g>
</g>
</svg>

import SVGKit

struct IconView: NSViewRepresentable {

    let name: String

    func makeNSView(context: Context) -> SVGKFastImageView {
        let img = SVGKImage(named: name)!
        return SVGKFastImageView(svgkImage: img)!
    }

    func updateNSView(_ nsView: SVGKFastImageView, context: Context) {
        // not implemented
    }

}

使用视图 然后在ContentView中使用它（给它一个框架，这样它就不会填满整个窗口），例如：

struct ContentView: View {
    var body: some View {
        VStack {
            IconView(name: "plus")
                .frame(width: 200, height: 200, alignment: .center)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

---

据苹果公司记录，SF符号在macOS上并没有正式可用。你所要做的只是黑客攻击——不能保证它会工作。systemName仅在iOS上可用，这是一个mac应用程序。它在macos上工作，使用mac catalyst。在xcode中，勾选Mac在部署信息中的方框。我需要Mac os特定的功能，所以使用catalyst对我来说不是一个选项，我想，但是谢谢你的回答，我以后可能会尝试一下。好吧，这与我要找的不完全相关，但是谢谢，我以后可能会尝试一下，因为现在我刚刚决定使用图像作为图标，哪个更简单path@Oscar我添加了一个编辑。这是xcode内置的最直接的选项。其余的选项是更多的工作，从其他应用程序导入图像并手动链接。这工作非常完美，它并没有完全回答我的问题，但它是迄今为止最好的选择，非常感谢！！！我希望我能选择不止一个正确答案：）太好了！正是我在汉克斯搜索的答案，在svg中有一个单独的图像似乎需要做很多工作，在这一点上，我认为将图标简单地导出为png并以这种方式使用可能更有意义？wdyt？这取决于您是否需要调整图像大小。在我的解决方案中，图像是一个矢量svg，因此它可以以任何大小显示，而不会产生伪影或丢失细节。如果使用png，则无法调整其大小，必须按照png文件定义的大小使用。如果是图像集，请将其调整为设备的分辨率，对吗？但无论如何，目前对这方面的支持似乎并不存在，非常感谢！例如，nuke1010的答案是好的，如果你可以使用模板图像，而不必在你的应用程序中调整它的大小，但是一旦你调整它的大小，它就会变成像素化。使用svg，您可以以任何大小显示。但正如您所说，svg并没有官方支持，我的答案是黑客可以使用SF符号，否则就太过分了。：）请注意，Xcode 12在macOS 11中运行的Mac应用程序中增加了对SF符号的支持。