Todo lo que puede hacer glyphfox

Instalación

npm install glyphfox
# Angular
npm install glyphfox-angular

glyphfox no tiene dependencias. React, Vue, Svelte, Solid, Preact, Qwik, Lit, Astro, React Native, Ember y Tailwind CSS son dependencias peer opcionales y solo se usan cuando importas sus puntos de entrada.

React

Cada icono es un componente forwardRef compatible con tree shaking que lleva el nombre del icono: arrow-right pasa a ser ArrowRightIcon. className, style y cualquier atributo SVG pasan directamente al 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) devuelve datos de icono que se transforman cada vez que cambia el nombre, para renderizadores propios. registerIcons(icons) hace que los nombres estén disponibles de forma síncrona, por ejemplo durante el renderizado en el 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>

Las props usan los mismos nombres; en las plantillas también puedes escribirlas en kebab-case (secondary-color). El composable useMorph(nameRef) replica el hook de 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. Los componentes se distribuyen como archivos .svelte que compila tu app. morphStore(name) es un store que se transforma en 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 {}

glyphfox-angular se publica en el formato de paquete de Angular, compilado con ng-packagr. GlyphFoxIcon es un componente standalone; provideGlyphFox registra iconos por nombre y props por defecto.

Componente web y 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>

Un solo archivo con todos los iconos, el elemento y el runtime de HTML puro. Cada prop es un atributo en kebab-case. Con un bundler, importa glyphfox/web, o glyphfox/web/element para registrar solo tus iconos. El atributo morph anima cada cambio 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>

Los iconos se renderizan como máscaras CSS en currentColor, así que se aplican las utilidades de color, tamaño y opacidad. Después de la barra puedes unir con guiones ejes, un layout de fusión o la esquina de una insignia. Tailwind v4 solo acepta + y & entre corchetes; v3 también acepta 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>

El runtime reemplaza cada elemento con data-glyph por SVG en línea, incluidos los que se añaden después. Las props son atributos data en 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 });

El paquete también incluye icons.json, sprite.svg, styles.css, glyphfox/core (el motor sin los datos de los iconos) y glyphfox/tools (lint y Fox-ify).

Frameworks y recetas

Las mismas props están disponibles como paquetes para Solid, Preact, Qwik, Lit, Astro, React Native y Ember, y como Server Components sin hooks para React. Las recetas cubren Next.js, Nuxt, SvelteKit, Remix, Alpine y htmx.

Todos los frameworks y recetas (en inglés)

Props

Las mismas props, con los mismos nombres y significado, en React, Vue, Svelte, Angular, el componente web y toSvg. Además, class y style, que se pasan al svg (o al elemento host en Angular y en el componente web).

Sintaxis de nombres

La comparten el componente web, la CDN, Tailwind, la CLI, el componente Icon y toSvg.

Ejes variables

El grosor va de 1 a 3. Por debajo de 24 px el trazo crece un poco para que los iconos pequeños no pierdan presencia; absoluteWeight lo desactiva. Las esquinas alternan entre uniones y remates redondeados o rectos. El estilo sólido rellena las formas exteriores cerradas y recorta las líneas interiores como espacio negativo; se calcula en el build para el conjunto y al renderizar para fusiones y modificadores.

Morph

Los trazados se aplanan en hebras, se emparejan mediante una asignación óptima, se remuestrean al mismo número de puntos, se alinean y se interpolan. Las hebras sin pareja se encogen y se desvanecen. Unas indicaciones ajustadas a mano cubren los pares más comunes. Sin JavaScript, toSvg con morphTo devuelve un SVG que se transforma con una transición CSS de la propiedad d y recurre a un fundido cruzado en los navegadores que no la admiten.

Fusión

fuse combina de 2 a 10 iconos en un solo icono que sigue pasando el lint. Layouts: overlap, side, stack, grid (2x2, 3x3 y 10 posiciones), orbit, badge e inside. Las partes se escalan y se ajustan a la cuadrícula, y la parte de atrás se recorta alrededor de la de delante con un espacio de recorte. Opciones: layout, gap, weight, scale y offsets.

Estados vivos

Cada animación es una pequeña hoja de estilos dentro del SVG, así que funciona dondequiera que vaya el SVG. draw dibuja los trazos en su orden de dibujo y shake oscila desde arriba. Disparadores: mount, hover (el icono o su padre directo), click (se repite en cada clic) y state (se reproduce mientras active sea true). La preferencia de movimiento reducido desactiva todas las animaciones.

Modificadores

Once insignias en cuatro esquinas. El icono de debajo se recorta geométricamente alrededor de la insignia, así que el resultado es un icono normal que pasa el lint, en todos los grosores.

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 el fragmento y lo deja en el portapapeles (formatos: svg, jsx, vue, svelte, angular, html, tailwind, cdn, datauri). build genera un sprite, un archivo CSS con clases de máscara o un paquete pequeño a partir de una lista. Todos los comandos aceptan las props compartidas como opciones, por ejemplo --weight 1.5 --corners sharp.

Colecciones

Dos colecciones propias vienen en el paquete junto al conjunto base: display, 60 iconos dibujados en una cuadrícula de 48 para estados vacíos, onboarding y bloques grandes, e isometric, 30 iconos en proyección isométrica sobre la cuadrícula de 24. Escribe sus nombres como display/NAME e isometric/NAME en toSvg, el web component, el build de la CDN y el componente Icon. Sus datos vienen de glyphfox/collections, y los componentes de React, Vue y Svelte de glyphfox/react/collections, glyphfox/vue/collections y glyphfox/svelte/collections, así que las entradas por defecto siguen igual de pequeñas.

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>

El tamaño, el color, el grosor, la rotación, los volteos y las animaciones predefinidas funcionan en ambas. Los iconos display miden 48 px por defecto y miden el grosor en unidades de su cuadrícula de 48, así que el grosor 2 conserva el trazo dibujado. Los estilos solid y duotone, los modificadores, la fusión y los morphs están hechos para la cuadrícula de 24: los iconos display quedan en contorno, y una fusión o un modificador con uno de ellos da un error. Los iconos isométricos admiten todas las funciones del conjunto base.

Reglas de iconos

Solo dibujos originales, en una cuadrícula de 24 por 24: viewBox 0 0 24 24, sin relleno, stroke currentColor, grosor de trazo 2, remates y uniones redondeados, 2 px de margen, sin transformaciones y sin rellenos salvo una capa duotono opcional con la clase gf-secondary. Los archivos fuente están en icons/NAME.svg, con un NAME.json complementario para categorías y etiquetas, y tools/icons/lint.mjs los revisa.

Iconos sociales

La categoría social reúne iconos de marca de las redes que más se enlazan, de Instagram, WhatsApp, Facebook, X, TikTok y YouTube a GitHub, Discord, Spotify y Steam. Cada uno se llama brand-NAME, está dibujado como el contorno del logo en la misma cuadrícula y con el mismo trazo que el resto del conjunto, y lleva como etiquetas el nombre de la red, sus nombres anteriores, social, logo y brand.

import { BrandInstagramIcon } from 'glyphfox/react';

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

Los iconos de marca son marcas registradas de sus propietarios y deben usarse según las pautas de cada marca.