Tudo o que o glyphfox faz

Instalação

npm install glyphfox
# Angular
npm install glyphfox-angular

O glyphfox não tem dependências. React, Vue, Svelte, Solid, Preact, Qwik, Lit, Astro, React Native, Ember e Tailwind CSS são peer dependencies opcionais, usadas só quando você importa os pontos de entrada deles.

React

Cada ícone é um componente forwardRef com tree shaking, com o nome do ícone: arrow-right vira ArrowRightIcon. className, style e qualquer atributo SVG passam direto para o svg.

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>
  );
}

useMorph(name, options) devolve dados de ícone que se transformam sempre que o nome muda, para renderizadores próprios. registerIcons(icons) deixa os nomes disponíveis na hora, por exemplo na renderização no servidor.

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>

As props têm os mesmos nomes; nos templates você também pode escrever em kebab-case (secondary-color). O composable useMorph(nameRef) espelha o hook do React.

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" />

Para Svelte 5. Os componentes vêm como arquivos .svelte compilados pela sua aplicação. morphStore(name) é uma store que se transforma a cada set(name).

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 {}

O glyphfox-angular é publicado no formato de pacote do Angular, gerado com ng-packagr. GlyphFoxIcon é um componente standalone; provideGlyphFox registra ícones por nome e props padrão.

Web component e 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>

Um único arquivo com todos os ícones, o elemento e o runtime para HTML puro. Toda prop é um atributo em kebab-case. Com bundler, importe glyphfox/web, ou glyphfox/web/element para registrar só os seus ícones. O atributo morph anima toda troca de 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>

Os ícones viram máscaras CSS em currentColor, então os utilitários de cor, tamanho e opacidade funcionam. Depois da barra dá para juntar eixos, um layout de fusão ou o canto do selo com hífens. O Tailwind v4 só aceita + e & dentro de colchetes; o v3 também aceita gf-file+check.

HTML puro

<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>

O runtime troca todo elemento com data-glyph por SVG inline, inclusive elementos adicionados depois. As props são atributos data em 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 });

O pacote também traz icons.json, sprite.svg, styles.css, glyphfox/core (o motor sem os dados dos ícones) e glyphfox/tools (lint e Fox-ify).

Frameworks e receitas

As mesmas props vêm em pacotes para Solid, Preact, Qwik, Lit, Astro, React Native e Ember, e como Server Components sem hooks para React. As receitas cobrem Next.js, Nuxt, SvelteKit, Remix, Alpine e htmx.

Todos os frameworks e receitas (em inglês)

Props

As mesmas props, com os mesmos nomes e significado, em React, Vue, Svelte, Angular, no web component e no toSvg. Além de class e style, que vão para o svg (ou para o elemento host no Angular e no web component).

Sintaxe de nomes

Compartilhada pelo web component, a CDN, o Tailwind, a CLI, o componente Icon e o toSvg.

Eixos variáveis

O peso vai de 1 a 3. Abaixo de 24 px o traço cresce um pouco para os ícones pequenos manterem presença; absoluteWeight desliga isso. Os cantos alternam entre junções e pontas redondas ou retas. O estilo sólido preenche as formas fechadas externas e recorta as linhas internas como espaço negativo; é calculado no build para o conjunto e na renderização para fusões e modificadores.

Morph

Os traços viram fios achatados, pareados por uma atribuição ótima, reamostrados com o mesmo número de pontos, alinhados e interpolados. Fios sem par encolhem e somem. Dicas ajustadas à mão cobrem os pares mais comuns. Sem JavaScript, toSvg com morphTo devolve um SVG que se transforma com uma transição CSS de d e faz um cross fade onde isso não é suportado.

Fusão

fuse combina de 2 a 10 ícones num único ícone que continua passando no lint. Layouts: overlap, side, stack, grid (2x2, 3x3 e 10 posições), orbit, badge e inside. As partes são escaladas e alinhadas à grade, e a parte de trás é recortada em volta da da frente com um espaço de recorte. Opções: layout, gap, weight, scale e offsets.

Estados vivos

Cada animação é uma pequena folha de estilo dentro do SVG, então funciona em qualquer lugar onde o SVG vá. draw desenha os traços na ordem do desenho, shake balança a partir do topo. Gatilhos: mount, hover (o ícone ou o pai direto), click (repete a cada clique) e state (toca enquanto active for verdadeiro). Movimento reduzido desliga todas as animações.

Modificadores

Onze selos em quatro cantos. O ícone de baixo é recortado em volta do selo de forma geométrica, então o resultado é um ícone comum que passa no lint, em qualquer peso.

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 imprime o trecho e coloca na área de transferência (formatos: svg, jsx, vue, svelte, angular, html, tailwind, cdn, datauri). build gera um sprite, um CSS com classes de máscara ou um pacote pequeno a partir de uma lista. Todo comando aceita as props compartilhadas como flags, como --weight 1.5 --corners sharp.

Coleções

Duas coleções exclusivas vêm no pacote ao lado do conjunto base: display, 60 ícones desenhados em um grid de 48 para estados vazios, onboarding e blocos grandes, e isometric, 30 ícones em projeção isométrica no grid de 24. Escreva os nomes como display/NAME e isometric/NAME no toSvg, no web component, no build da CDN e no componente Icon. Os dados vêm de glyphfox/collections, e os componentes de React, Vue e Svelte de glyphfox/react/collections, glyphfox/vue/collections e glyphfox/svelte/collections, então as entradas padrão continuam tão pequenas quanto antes.

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>

Tamanho, cor, peso, rotação, espelhamentos e as animações prontas funcionam nas duas. Os ícones display usam 48 px por padrão e medem o peso em unidades do grid de 48, então o peso 2 mantém o traço desenhado. Os estilos solid e duotone, os modificadores, a fusão e os morphs são feitos para o grid de 24: os ícones display ficam em outline, e uma fusão ou um modificador com um deles gera um erro. Os ícones isométricos aceitam todos os recursos do conjunto base.

Regras dos ícones

Só desenhos originais, numa grade de 24 por 24: viewBox 0 0 24 24, sem preenchimento, stroke currentColor, traço 2, pontas e junções redondas, 2 px de margem, sem transformações e sem preenchimentos além de uma camada duotone opcional com a classe gf-secondary. Os arquivos ficam em icons/NAME.svg com um NAME.json para categorias e tags, e o tools/icons/lint.mjs verifica tudo.

Ícones sociais

A categoria social reúne ícones de marca das redes que as pessoas mais colocam em links, do Instagram, WhatsApp, Facebook, X, TikTok e YouTube ao GitHub, Discord, Spotify e Steam. Cada um se chama brand-NAME, é desenhado como um contorno do logo no mesmo grid e com o mesmo traço do resto do conjunto e tem como tags o nome da rede, os nomes antigos, social, logo e brand.

import { BrandInstagramIcon } from 'glyphfox/react';

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

Os ícones de marca são marcas registradas dos seus donos e devem ser usados de acordo com as diretrizes de cada marca.