Exportações nativas

Visão geral

npx glyphfox export android home search file+check --out app/src/main/res
npx glyphfox export compose --from icons.txt --package com.acme.icons --out app/src/main/java
npx glyphfox export ios home search --out MyApp/Assets.xcassets
npx glyphfox export swiftui home search --out MyApp
npx glyphfox export flutter home search --out .
npx glyphfox export android --all --weight 1.5 --corners sharp --out app/src/main/res

Passe nomes de ícones ou qualquer spec da sintaxe de nomes, um arquivo de lista com --from (um nome por linha, # inicia um comentário) ou --all para o conjunto inteiro. A geometria é a mesma que os pacotes web desenham, então as mesmas specs ficam iguais em todo lugar:

Android

Um VectorDrawable por ícone em drawable/, então aponte --out para app/src/main/res. Os traços mantêm a largura em unidades do viewport, as pontas e junções redondas ou retas, e nunca recebem preenchimento, então escalam com o drawable exatamente como o SVG. A cor é um tint: ?attr/colorControlNormal por padrão, então os ícones seguem o tema como os ícones Material.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
    <path
        android:pathData="M12,19.89 L4.41,12.3 A4.8,4.8,0,1,1,12,6.58 A4.8,4.8,0,1,1,19.59,12.3 Z"
        android:strokeColor="@android:color/white"
        android:strokeWidth="2"
        android:strokeLineCap="round"
        android:strokeLineJoin="round" />
</vector>

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/gf_heart"
    android:contentDescription="@string/favorite" />

Passe um atributo de tema ou um recurso de cor em --color (?attr/colorPrimary, @color/brand) para usá-lo como tint, ou uma cor hex (#ff7a1a) para gravar a cor nos paths sem tint. As camadas duotone são paths preenchidos com fillAlpha, --mirror-rtl define android:autoMirrored, e a rotação e os espelhamentos viram um grupo em torno do centro.

Jetpack Compose

O GlyphFox.kt declara o objeto GlyphFox, e cada ícone é uma extension property ImageVector dele, construída no primeiro uso e guardada em cache, no seu próprio arquivo. Os arquivos vão para a pasta do pacote dentro de --out, então aponte essa opção para a raiz do código-fonte Kotlin.

package com.acme.icons

val GlyphFox.Heart: ImageVector
    get() {
        if (_heart != null) {
            return _heart!!
        }
        _heart = ImageVector.Builder(
            name = "GlyphFox.Heart",
            defaultWidth = 24.dp,
            defaultHeight = 24.dp,
            viewportWidth = 24f,
            viewportHeight = 24f,
        ).apply {
            path(
                stroke = SolidColor(Color.Black),
                strokeLineWidth = 2f,
                strokeLineCap = StrokeCap.Round,
                strokeLineJoin = StrokeJoin.Round,
            ) {
                moveTo(12f, 19.89f)
                lineTo(4.41f, 12.3f)
                arcTo(4.8f, 4.8f, 0f, true, true, 12f, 6.58f)
                arcTo(4.8f, 4.8f, 0f, true, true, 19.59f, 12.3f)
                close()
            }
        }.build()
        return _heart!!
    }

private var _heart: ImageVector? = null

import com.acme.icons.GlyphFox
import com.acme.icons.Heart

Icon(GlyphFox.Heart, contentDescription = "Favorite")
Icon(GlyphFox.Heart, contentDescription = null, tint = MaterialTheme.colorScheme.primary)
Image(GlyphFox.Heart, contentDescription = null) // keeps the exported color

GlyphFox.all.forEach { (name, vector) -> Icon(vector, contentDescription = name) }

Cada propriedade é importada pelo nome, como os ícones Material. GlyphFox.all mapeia cada nome exportado para o seu vetor, para pickers e previews. Com o code shrinking ativado, o R8 remove os ícones que o app nunca usa, a menos que ele leia GlyphFox.all.

Catálogo de assets do iOS

Um image set por ícone com o SVG, Preserve Vector Data e Render As Template Image, então os ícones ficam nítidos em qualquer tamanho e assumem a cor de tint. Aponte --out para um catálogo existente, como MyApp/Assets.xcassets, para adicionar os image sets a ele (o Contents.json dele é mantido), ou para uma pasta para obter GlyphFox.xcassets.

{
  "images" : [
    {
      "filename" : "gf-heart.svg",
      "idiom" : "universal"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  },
  "properties" : {
    "preserves-vector-representation" : true,
    "template-rendering-intent" : "template"
  }
}

let heart = UIImageView(image: UIImage(named: "gf-heart"))
heart.tintColor = .systemOrange

Os arquivos SVG trazem cores concretas (preto por padrão), que a renderização como template substitui pelo tint. Com uma --color hex, o catálogo passa para a renderização original para a cor aparecer; --rendering template ou original escolhe uma explicitamente, e --mirror-rtl marca os image sets para espelhar em layouts da direita para a esquerda.

SwiftUI

O glyphfox export swiftui grava o mesmo catálogo de assets e mais o GlyphFox.swift: um enum com um case por image set, Image(glyphfox:) e UIImage.glyphfox(_:) para UIKit.

public enum GlyphFox: String, CaseIterable, Sendable {
    case heart = "gf-heart"
    case `repeat` = "gf-repeat"
}

public extension Image {
    init(glyphfox icon: GlyphFox, bundle: Bundle? = nil) {
        self = Image(icon.rawValue, bundle: bundle).renderingMode(.template)
    }
}

Label { Text("Favorites") } icon: { Image(glyphfox: .heart) }

Image(glyphfox: .heart)
    .resizable()
    .frame(width: 32, height: 32)
    .foregroundStyle(.orange)
    .accessibilityLabel("Favorite")

ForEach(GlyphFox.allCases, id: \.self) { Image(glyphfox: $0) }

Passe bundle: .module quando o catálogo estiver em um pacote Swift.

Flutter

Arquivos SVG em assets/glyphfox/ e lib/glyphfox.dart com uma constante por ícone e um pequeno widget GlyphFoxIcon sobre o flutter_svg. Aponte --out para a pasta do app e depois adicione o pacote e os assets ao pubspec.yaml:

dependencies:
  flutter_svg: ^2.0.0

flutter:
  assets:
    - assets/glyphfox/

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'glyphfox.dart';

Row(children: [
  const GlyphFoxIcon(GlyphFoxIcons.heart),
  GlyphFoxIcon(GlyphFoxIcons.heart, size: 32, color: Colors.orange, semanticLabel: 'Favorite'),
  SvgPicture.asset(GlyphFoxIcons.heart), // the exported colors, no tint
])

O GlyphFoxIcon segue o IconTheme ao redor para tamanho e cor, como o Icon faz, aplica o tint ao desenho inteiro (a camada duotone mantém a opacidade) e é decorativo, a menos que receba um semanticLabel. GlyphFoxIcons.values lista todos os caminhos exportados, e --assets muda a pasta dos SVG.

Opções

Nomes e cores

Uma spec vira um nome em cada plataforma: file+check@tr é gf_file_check_tr no Android, GlyphFox.FileCheckTr no Compose, gf-file-check-tr no catálogo e fileCheckTr em Swift e Dart. Duas specs que acabam com o mesmo nome são recusadas, e palavras-chave são escapadas (repeat vira `repeat` em Swift).

Sem --color, todo destino segue o tint da plataforma: colorControlNormal, LocalContentColor, o foreground style do SwiftUI ou IconTheme. Com uma cor hex, a cor fica gravada e permanece: o Android dispensa o tint, o catálogo renderiza o original e o GlyphFoxIcon mantém as cores exportadas, a menos que receba um color. O Icon() do Compose sempre aplica tint, então use Image() ou tint = Color.Unspecified para ver a cor gravada.