how to make a grid of sfsmbols in swiftui in swift

In SwiftUI, you can create a grid of symbols using the LazyVGrid view. Here's an example code that shows how to create a grid of system symbols:

main.swift
import SwiftUI

struct SymbolGridView: View {
    let symbols = [ "sun.max", "moon", "star", "cloud", "cloud.sun", "cloud.moon", "cloud.sun.rain", "cloud.rain", "cloud.heavyrain", "cloud.fog", "cloud.sleet", "cloud.hail", "cloud.bolt", "tornado" ]

    let columns = [
        GridItem(.adaptive(minimum: 80))
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(symbols, id: \.self) { symbolName in
                Image(systemName: symbolName)
                    .font(.system(size: 50))
                    .foregroundColor(.blue)
            }
        }.padding()
    }
}
628 chars
20 lines

The symbols array contains the names of the system symbols we want to display in the grid. The columns array defines the layout of the grid by specifying how many minimum-sized columns will fit on the screen. In this example, we're using one column that adapts to the available space.

The LazyVGrid view creates the grid itself, with each symbol being rendered as an Image view using its system name as the symbol name. We're applying a font size of 50 and a blue foreground color to each symbol, but you can adjust these attributes as needed.

We're also adding some padding around the grid to give it some space. Finally, you can embed this SymbolGridView in your other SwiftUI views to use it as desired.

related categories

gistlibby LogSnag