Exports natifs

Vue d'ensemble

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

Passez des noms d'icônes ou n'importe quelle spec de la syntaxe des noms, un fichier de liste avec --from (un nom par ligne, # commence un commentaire) ou --all pour tout le jeu. La géométrie est celle que dessinent les paquets web : les mêmes specs ont donc le même rendu partout :

Android

Un VectorDrawable par icône dans drawable/ : faites donc pointer --out vers app/src/main/res. Les traits gardent leur épaisseur en unités du viewport, leurs extrémités et jointures arrondies ou carrées, et ne reçoivent jamais de remplissage : ils s'adaptent donc au drawable exactement comme le SVG. La couleur est une teinte : ?attr/colorControlNormal par défaut, si bien que les icônes suivent le thème comme les icônes 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" />

Passez un attribut de thème ou une ressource de couleur à --color (?attr/colorPrimary, @color/brand) pour l'utiliser comme teinte, ou une couleur hex (#ff7a1a) pour figer la couleur dans les tracés, sans teinte. Les calques duotone sont des tracés remplis avec fillAlpha, --mirror-rtl définit android:autoMirrored, et la rotation et les retournements deviennent un groupe autour du centre.

Jetpack Compose

GlyphFox.kt déclare l'objet GlyphFox, et chaque icône est une propriété d'extension ImageVector de cet objet, construite à la première utilisation puis mise en cache, dans son propre fichier. Les fichiers vont dans le dossier du paquet sous --out : faites donc pointer cette option vers la racine des sources 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) }

Chaque propriété s'importe par son nom, comme les icônes Material. GlyphFox.all associe chaque nom exporté à son vecteur pour les sélecteurs et les aperçus. Avec la réduction du code activée, R8 supprime les icônes qu'une application n'utilise jamais, sauf si elle lit GlyphFox.all.

Catalogue d'assets iOS

Un image set par icône avec le SVG, Preserve Vector Data et Render As Template Image : les icônes restent nettes à toutes les tailles et prennent la couleur de teinte. Faites pointer --out vers un catalogue existant comme MyApp/Assets.xcassets pour y ajouter les image sets (son propre Contents.json est conservé), ou vers un dossier pour obtenir 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

Les fichiers SVG portent des couleurs concrètes (noir par défaut), que le rendu en template remplace par la teinte. Avec une --color hex, le catalogue passe au rendu original pour que la couleur apparaisse ; --rendering template ou original en choisit un explicitement, et --mirror-rtl marque les image sets pour qu'ils se retournent dans les mises en page de droite à gauche.

SwiftUI

glyphfox export swiftui écrit le même catalogue d'assets ainsi que GlyphFox.swift : un enum avec un case par image set, Image(glyphfox:) et UIImage.glyphfox(_:) pour 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) }

Passez bundle: .module quand le catalogue se trouve dans un paquet Swift.

Flutter

Des fichiers SVG dans assets/glyphfox/ et lib/glyphfox.dart avec une constante par icône et un petit widget GlyphFoxIcon basé sur flutter_svg. Faites pointer --out vers le dossier de l'application, puis ajoutez le paquet et les assets à 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
])

GlyphFoxIcon suit l'IconTheme environnant pour la taille et la couleur, comme Icon, teinte tout le dessin (le calque duotone garde son opacité) et reste décoratif tant qu'il ne reçoit pas de semanticLabel. GlyphFoxIcons.values liste tous les chemins exportés, et --assets déplace le dossier des SVG.

Options

Noms et couleurs

Une spec devient un nom sur chaque plateforme : file+check@tr donne gf_file_check_tr sur Android, GlyphFox.FileCheckTr dans Compose, gf-file-check-tr dans le catalogue et fileCheckTr en Swift et en Dart. Deux specs qui aboutissent au même nom sont refusées, et les mots-clés sont échappés (repeat devient `repeat` en Swift).

Sans --color, chaque cible suit la teinte de la plateforme : colorControlNormal, LocalContentColor, le foreground style de SwiftUI ou IconTheme. Avec une couleur hex, la couleur est figée et reste : Android abandonne la teinte, le catalogue fait un rendu original et GlyphFoxIcon garde les couleurs exportées tant qu'il ne reçoit pas de color. Icon() de Compose applique toujours une teinte : utilisez donc Image() ou tint = Color.Unspecified pour voir la couleur figée.