SwiftUI 添加和使用 svg 图标

24 min read

在 SwiftUI 中添加和使用 SVG 图标可以使用两种方法：使用图像视图或使用 Shape 协议。下面是使用这两种方法的示例：

使用图像视图：

  1. 在项目中添加 SVG 图标文件。可以使用第三方工具将其他图像文件（如 PNG 或 JPEG）转换为 SVG 格式，或者使用现有的 SVG 图标库获取 SVG 文件。

  2. 在代码中创建 Image 视图，指定 SVG 图标文件的名称。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello SwiftUI")
                .font(.title)
                .foregroundColor(.blue)
            
            Image("icon")
                .resizable()
                .frame(width: 50, height: 50)
        }
    }
}
  1. 在 Asset Catalog 添加图标文件时，确保在弹出的“Import”窗口中选择“Copy items if needed”选项。这样可以将图标文件复制到项目的资源文件夹中。

使用 Shape 协议：

  1. 在项目中添加一个新的 SwiftUI 文件。在该文件中创建一个实现 Shape 协议的类，并定义 SVG 图标的路径。
import SwiftUI

struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 在这里定义图标的路径
        
        return path
    }
}
  1. 在 ContentView 中使用自定义形状视图。可以通过填充或描边等方式对其进行样式设置。
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello SwiftUI")
                .font(.title)
                .foregroundColor(.blue)
            
            CustomShape()
                .fill(Color.red)
                .frame(width: 50, height: 50)
        }
    }
}

通过以上两种方法，您可以在 SwiftUI 中添加和使用 SVG 图标。请确保在添加图标文件时将其复制到项目的资源文件夹中，以便正确加载图标。