Alles, was glyphfox kann

Installation

npm install glyphfox
# Angular
npm install glyphfox-angular

glyphfox hat keine Abhängigkeiten. React, Vue, Svelte, Solid, Preact, Qwik, Lit, Astro, React Native, Ember und Tailwind CSS sind optionale Peer-Dependencies und werden nur genutzt, wenn du die jeweiligen Einstiegspunkte importierst.

React

Jedes Icon ist eine Tree-Shaking-fähige forwardRef-Komponente, die nach dem Icon benannt ist: Aus arrow-right wird ArrowRightIcon. className, style und alle SVG-Attribute werden an das svg-Element durchgereicht.

import { HomeIcon, FileIcon, Icon, Fusion, MorphIcon, useMorph } from 'glyphfox/react';

export function App({ open, saved }) {
  return (
    <nav>
      <HomeIcon />
      <FileIcon size={20} weight={1.5} modifier={saved ? 'check' : undefined} />
      <Icon name="cloud&lock:overlap" variant="duotone" />
      <Fusion icons={['user', 'shield']} layout="badge" />
      <MorphIcon name={open ? 'x' : 'menu'} duration={300} />
    </nav>
  );
}

Für eigene Renderer liefert useMorph(name, options) Icon-Daten, die sich bei jeder Namensänderung verwandeln. registerIcons(icons) macht Namen synchron verfügbar, etwa beim Server-Rendering.

Vue

<script setup>
import { ref } from 'vue';
import { HomeIcon, Fusion, MorphIcon } from 'glyphfox/vue';
const playing = ref(false);
</script>

<template>
  <HomeIcon :size="32" color="#ff7a1a" variant="duotone" />
  <Fusion :icons="['file', 'check']" layout="badge" />
  <MorphIcon :name="playing ? 'pause' : 'play'" @click="playing = !playing" />
</template>

Die Props heißen gleich; in Templates kannst du sie auch in kebab-case schreiben (secondary-color). Das Composable useMorph(nameRef) entspricht dem React-Hook.

Svelte

<script>
  import { HeartIcon, Fusion, morphStore } from 'glyphfox/svelte';
  let liked = $state(false);
  const icon = morphStore('menu');
</script>

<button onclick={() => (liked = !liked)}>
  <HeartIcon animate="pop" trigger="state" active={liked} variant={liked ? 'solid' : 'outline'} />
</button>
<Fusion icons={['message-circle', 'heart']} layout="overlap" />

Für Svelte 5. Die Komponenten werden als .svelte-Dateien ausgeliefert, die deine App kompiliert. morphStore(name) ist ein Store, der sich bei jedem set(name) verwandelt.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { iconHome, iconFile, iconCheck } from 'glyphfox';
import { provideGlyphFox } from 'glyphfox-angular';

bootstrapApplication(App, {
  providers: [provideGlyphFox({ icons: [iconHome, iconFile, iconCheck], defaults: { weight: 1.75 } })],
});

import { Component } from '@angular/core';
import { GlyphFoxIcon } from 'glyphfox-angular';

@Component({
  selector: 'app-toolbar',
  imports: [GlyphFoxIcon],
  template: `
    <gf-icon name="home"></gf-icon>
    <gf-icon name="file+check@tr" variant="duotone" [size]="20"></gf-icon>
    <gf-icon [icons]="['cloud', 'lock']" layout="overlap"></gf-icon>
  `,
})
export class Toolbar {}

glyphfox-angular wird im Angular Package Format veröffentlicht und mit ng-packagr gebaut. GlyphFoxIcon ist eine Standalone-Komponente; provideGlyphFox registriert Icons nach Namen und legt Standard-Props fest.

Web Component und CDN

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>
<!-- or https://unpkg.com/glyphfox@1 -->

<glyph-fox name="home"></glyph-fox>
<glyph-fox name="file+check" size="32" weight="1.5"></glyph-fox>
<glyph-fox name="cloud&lock" layout="overlap"></glyph-fox>
<glyph-fox name="menu" morph duration="300"></glyph-fox>

Eine Datei mit allen Icons, dem Element und der Runtime für reines HTML. Jede Prop ist ein Attribut in kebab-case. Mit einem Bundler importierst du glyphfox/web oder, um nur deine Icons zu registrieren, glyphfox/web/element. Das Attribut morph animiert jede Änderung von name.

Tailwind CSS

/* Tailwind v4 */
@import "tailwindcss";
@plugin "glyphfox/tailwind";

/* Tailwind v3: plugins: [require('glyphfox/tailwind')] */

<span class="gf-home text-2xl text-orange-500"></span>
<span class="gf-[file+check] gf-spin"></span>
<span class="gf-[cloud&lock]/side"></span>
<span class="gf-heart/solid-sharp-w1.5"></span>

Icons werden als CSS-Masken in currentColor gerendert, daher greifen die Utility-Klassen für Farbe, Größe und Deckkraft. Nach dem Schrägstrich kannst du Achsen, ein Fusions-Layout oder eine Badge-Ecke mit Bindestrichen verbinden. Tailwind v4 akzeptiert + und & nur in eckigen Klammern; v3 akzeptiert auch gf-file+check.

Reines HTML

<script type="module" src="https://cdn.jsdelivr.net/npm/glyphfox@1/dist/runtime/auto.js"></script>

<i data-glyph="search" data-size="20" data-variant="duotone"></i>

Die Runtime ersetzt jedes Element mit data-glyph durch Inline-SVG, auch später hinzugefügte Elemente. Props sind data-Attribute in kebab-case.

JavaScript

import { toSvg, fuse, createMorph, search, getIcon, icons } from 'glyphfox';

toSvg('file', { size: 32, color: '#ff7a1a', variant: 'solid' });
toSvg('menu', { morphTo: 'x', trigger: 'hover' }); // CSS only morph
fuse(['cloud', 'lock'], { layout: 'overlap', gap: 1 }); // icon data that passes the lint
createMorph(getIcon('play'), getIcon('pause')).frame(0.5);
search('arrow', { limit: 10 });

Das Paket enthält außerdem icons.json, sprite.svg, styles.css, glyphfox/core (die Engine ohne Icon-Daten) und glyphfox/tools (Lint und Fox-ify).

Frameworks und Rezepte

Dieselben Props gibt es als Pakete für Solid, Preact, Qwik, Lit, Astro, React Native und Ember sowie als Server Components ohne Hooks für React. Die Rezepte decken Next.js, Nuxt, SvelteKit, Remix, Alpine und htmx ab.

Alle Frameworks und Rezepte (auf Englisch)

Props

Dieselben Props mit denselben Namen und derselben Bedeutung in React, Vue, Svelte, Angular, der Web Component und toSvg. Dazu class und style, die an das svg-Element weitergegeben werden (bei Angular und der Web Component an das Host-Element).

Namenssyntax

Gilt für die Web Component, das CDN, Tailwind, die CLI, die Icon-Komponente und toSvg.

Variable Achsen

Die Strichstärke reicht von 1 bis 3. Unter 24 px wird der Strich etwas dicker, damit kleine Icons präsent bleiben; absoluteWeight schaltet das ab. Die Ecken wechseln zwischen runden und eckigen Verbindungen und Linienenden. Der Stil solid füllt die geschlossenen äußeren Formen und spart die inneren Linien als Negativraum aus; er wird für das Set beim Build berechnet und für Fusionen und Modifikatoren beim Rendern.

Morphing

Pfade werden in abgeflachte Stränge zerlegt, per optimaler Zuordnung gepaart, auf dieselbe Punktzahl neu abgetastet, ausgerichtet und interpoliert. Stränge ohne Partner schrumpfen und blenden aus. Von Hand abgestimmte Vorgaben decken die gängigen Paare ab. Ohne JavaScript liefert toSvg mit morphTo ein SVG, das sich per CSS-Transition der Eigenschaft d verwandelt und dort überblendet, wo das nicht unterstützt wird.

Fusion

fuse kombiniert 2 bis 10 Icons zu einem Icon, das weiterhin die Lint-Prüfung besteht. Layouts: overlap, side, stack, grid (2x2, 3x3 und 10 Plätze), orbit, badge und inside. Die Teile werden skaliert und am Raster ausgerichtet, und das hintere Teil wird um das vordere herum beschnitten, sodass eine Aussparung entsteht. Optionen: layout, gap, weight, scale und offsets.

Lebendige Zustände

Jede Animation ist ein kleines Stylesheet im SVG und funktioniert daher überall dort, wo das SVG eingesetzt wird. draw zeichnet die Striche in ihrer Zeichenreihenfolge nach, shake schwingt von oben. Auslöser: mount, hover (das Icon oder sein direktes Elternelement), click (startet bei jedem Klick neu) und state (läuft, solange active gesetzt ist). Bei reduzierter Bewegung sind alle Animationen aus.

Modifikatoren

Elf Badges in vier Ecken. Das Icon darunter wird geometrisch um das Badge herum beschnitten, sodass in jeder Strichstärke ein ganz normales Icon entsteht, das die Lint-Prüfung besteht.

CLI

npx glyphfox search arrow
npx glyphfox show file+check --variant solid
npx glyphfox copy heart --format jsx --size 32
npx glyphfox fuse cloud lock --layout overlap --out cloud-lock.svg
npx glyphfox morph menu x --trigger hover --out menu.svg
npx glyphfox build home search file+check --type sprite --out public/icons
npx glyphfox build --from icons.txt --type package --name @acme/icons
npx glyphfox lint my-icon.svg
npx glyphfox foxify any.svg --out fox.svg
npx glyphfox export android home search --out app/src/main/res

copy gibt das Snippet aus und legt es in die Zwischenablage (Formate: svg, jsx, vue, svelte, angular, html, tailwind, cdn, datauri). build erzeugt aus einer Liste ein Sprite, eine CSS-Datei mit Maskenklassen oder ein kleines Paket. Jeder Befehl akzeptiert die gemeinsamen Props als Flags, etwa --weight 1.5 --corners sharp.

Kollektionen

Zwei eigene Kollektionen liegen neben dem Grundset im Paket: display, 60 Icons auf einem 48er Raster für leere Zustände, Onboarding und große Kacheln, und isometric, 30 Icons in isometrischer Projektion auf dem 24er Raster. Schreibe ihre Namen als display/NAME und isometric/NAME in toSvg, der Web Component, dem CDN Build und der Icon Komponente. Ihre Daten kommen aus glyphfox/collections, die Komponenten für React, Vue und Svelte aus glyphfox/react/collections, glyphfox/vue/collections und glyphfox/svelte/collections, damit die Standard Einstiege so klein bleiben wie bisher.

import { toSvg } from 'glyphfox';
import { DisplayCalendarClockIcon } from 'glyphfox/react/collections';

toSvg('display/calendar-clock', { size: 96, weight: 3 });
toSvg('isometric/cube', { variant: 'solid' });

<glyph-fox name="display/rocket-launch" size="64"></glyph-fox>

Größe, Farbe, Strichstärke, Drehung, Spiegelungen und die fertigen Animationen funktionieren bei beiden. Display Icons sind standardmäßig 48 px groß und messen die Strichstärke in Einheiten ihres 48er Rasters, Stärke 2 behält also den gezeichneten Strich. Die Stile solid und duotone, Modifikatoren, Fusion und Morphs sind für das 24er Raster gemacht: Display Icons bleiben Outline, und eine Fusion oder ein Modifikator mit einem davon ist ein Fehler. Isometrische Icons unterstützen alle Funktionen des Grundsets.

Icon-Regeln

Nur eigene Zeichnungen, auf einem Raster von 24 mal 24: viewBox 0 0 24 24, keine Füllung, stroke currentColor, Strichstärke 2, runde Linienenden und Verbindungen, 2 px Innenabstand, keine Transformationen und keine Füllungen außer einer optionalen Duotone-Ebene mit der Klasse gf-secondary. Die Quellen liegen in icons/NAME.svg mit einer zugehörigen NAME.json für Kategorien und Tags, und tools/icons/lint.mjs prüft sie.

Social-Media-Icons

Die Kategorie social enthält Markenicons der Netzwerke, auf die am häufigsten verlinkt wird, von Instagram, WhatsApp, Facebook, X, TikTok und YouTube bis GitHub, Discord, Spotify und Steam. Jedes heißt brand-NAME, ist als Umriss des Logos auf demselben Raster und mit derselben Linie wie der Rest des Sets gezeichnet und trägt als Tags den Namen des Netzwerks, seine früheren Namen, social, logo und brand.

import { BrandInstagramIcon } from 'glyphfox/react';

<a href="https://www.instagram.com/yourname" aria-label="Instagram">
  <BrandInstagramIcon size={20} />
</a>

Markenicons sind Marken ihrer Inhaber und dürfen nur nach den Richtlinien der jeweiligen Marke verwendet werden.