Guías
Instala glyphfox en tu stack, aprende las props que importan ahí y evita los problemas con los que otros ya se toparon. Todos los ejemplos funcionan con los paquetes actuales.
Frameworks
Una guía por framework, de la instalación al renderizado en el servidor.
- Iconos para ReactIconos SVG en React con glyphfox: instalación, componentes con tree shaking, cada prop, iconos por nombre, modificadores, Fusión, morph, refs y TypeScript.
- Iconos en Next.jsIconos SVG en Next.js con glyphfox: límite de cliente en el App Router, SVG sin JavaScript en Server Components, Pages Router e iconos por nombre en el servidor.
- Iconos en Vue 3Iconos SVG en Vue 3 con glyphfox: instalación, componentes con tree shaking, props en plantillas, morph con useMorph, fusión y cómo evitar iconos vacíos.
- Iconos en NuxtIconos SVG de glyphfox con SSR en Nuxt: importa componentes, registra nombres en un plugin, autoimporta un envoltorio, sincroniza morphs y evita iconos vacíos.
- Iconos en AngularIconos SVG en Angular con glyphfox y el componente standalone gf-icon: provideGlyphFox, inputs, fusión, modificadores, rutas lazy, SSR y apps zoneless.
- Iconos en Svelte 5Iconos SVG en Svelte 5 con glyphfox: instalación, importación de componentes, props con runes, morph con MorphIcon y morphStore, fusión y bundles pequeños.
- Iconos en SvelteKitIconos SVG en SvelteKit con glyphfox: SSR, prerenderizado, configuración, layout raíz para nombres, endpoints SVG, adapter-static, hidratación y errores comunes.
- Iconos en SolidJSDos formas de usar iconos de glyphfox hoy en SolidJS y SolidStart: el elemento glyph-fox con attr: o un pequeño componente compatible con tree shaking sobre el core.
- Iconos en PreactUsa iconos SVG de glyphfox en Preact: componentes de React mediante preact/compat con Vite, webpack, esbuild y TypeScript, o el elemento glyph-fox sin compat.
- Iconos en QwikRenderiza en el servidor iconos SVG de glyphfox en Qwik, sin JavaScript ni nada que reanudar, y añade el elemento glyph-fox solo donde un icono deba reaccionar.
- Iconos en AstroRenderiza iconos SVG de glyphfox en Astro al compilar, sin JavaScript de cliente: envuélvelos en un componente Icon.astro y añade islas o el elemento para animar.
- Iconos en React NativeIconos SVG de glyphfox en React Native con react-native-svg: SvgXml, imports por icono para Metro, color, peso, fusiones, fotogramas de morph y accesibilidad.
- Iconos en Lit y web componentsUsa el custom element glyph-fox en Lit y web components nativos: registra todos los iconos SVG o un subconjunto, enlaza atributos, dale estilo y hazlo accesible.
- Iconos en HTML plano desde una CDNAñade glyphfox a cualquier página HTML con un solo script: elemento glyph-fox, placeholders data-glyph, API global, versión fija y cuándo crear un subconjunto.
Temas
Guías que sirven para cualquier framework.
- Iconos para Tailwind CSSIconos de glyphfox como clases de Tailwind CSS v3 y v4: instalación, sintaxis gf, estilos y pesos tras la barra, insignias, fusiones, animaciones y opciones.
- Iconos animadosIconos animados con glyphfox: presets draw, pop, spin y shake, disparadores hover, click y state, morphs entre iconos y solo con CSS, y movimiento reducido.
- Iconos accesiblesIconos accesibles con glyphfox: decorativos por defecto, títulos y etiquetas, botones solo con icono, iconos de estado, contraste, movimiento reducido y RTL.
- Tree shaking de iconosTree shaking de iconos de glyphfox en Vite, webpack, Rollup y esbuild: mediciones del bundle, qué lo impide, iconos cargados por nombre y subconjuntos fijos.
- Sprites SVGIconos de glyphfox en sprite SVG: ids de símbolo, referencias use, regla del mismo origen, sprites en línea, subconjuntos con la CLI, límites de estilo y caché.
- Renderizado en el servidorIconos SVG de glyphfox en el servidor: qué genera cada paquete, registro de iconos usados por nombre, cadenas toSvg, hidratación, animaciones y web component.