SwiftUI #14: SF Symbols

Los símbolos SF fueron diseñados para trabajar con texto, así que su tamaño y estilo puede ser determinado por la estructura Font:

struct ContentView: View {
  var body: some View {
    Image(systemName: "envelope")
      .font(.system(size: 100).weight(.semibold))
  }
}

struct ContentView: View {
  let symbolFont = Font.system(size:100).weight(.semibold)

  var body: some View {
    Image(systemName: "envelope")
      .font(symbolFont)
  }
}

Variantes

Se puede especificar una variante de un símbolo usando notación de punto, como en envelope.circle. Sin embargo, también se puede usar el modificador symbolVariant(_:) que recibe un SymbolVariants que puede ser none, circle, square, rectangle, fill y slash.

struct ContentView: View {
  let symbolFont = Font.system(size:100).weight(.semibold)

  var body: some View {
    Image(systemName: "envelope")
      .symbolVariant(.circle)
      .font(symbolFont)
  }
}

Color

Algunos símbolos puede incluir más de un color, para lo cual se usan los siguientes modificadores:

• symbolRenderingMode(_:). El argumento puede ser hierarchical, monochrome (por defecto), multicolor y palette.
• imageScale(_:): Cambia la escala del símbolo, con respecto a la fuente. El argumento puede ser small, medium, large.

struct ContentView: View {
  var body: some View {
    Image(systemName: "mic.badge.plus")
      .font(.system(size: 100))
      .symbolRenderingMode(.palette)
      .foregroundStyle(.red, .blue)
  }
}

Estados del símbolo

Algunos símbolos pueden tener estados, cambiando su color. Para implementarlos, se inicializa la imagen con el atributo variableValue (init(systemName:variableValue:).

No todos los símbolos funcionan.

struct ContentView: View {
  var body: some View {
    Image(systemName: "dot.radiowaves.forward", variableValue: 0.5)
      .font(.system(size: 100))
  }
}