Guias
Instale o glyphfox na sua stack, conheça as props que importam nela e evite os problemas que outras pessoas já enfrentaram. Todos os exemplos funcionam com os pacotes atuais.
Frameworks
Um guia por framework, da instalação à renderização no servidor.
- Ícones ReactÍcones React com glyphfox: instalação, componentes SVG com tree shaking, todas as props, ícones por nome, modificadores, Fusão, morph, refs e tipos TypeScript.
- Ícones no Next.jsUse o glyphfox no Next.js: fronteira de cliente no App Router, ícones SVG sem JavaScript em Server Components, Pages Router e ícones por nome no servidor.
- Ícones no Vue 3Ícones Vue 3 com glyphfox: instale, importe componentes com tree shaking, use props nos templates, faça morph com useMorph, funda ícones e evite ícones vazios.
- Ícones no NuxtÍcones glyphfox no Nuxt com SSR: importe componentes, registre nomes num plugin, crie um wrapper com auto import, sincronize morphs e evite ícones vazios.
- Ícones no AngularÍcones no Angular com o componente standalone gf-icon do glyphfox: provideGlyphFox, inputs, fusão, modificadores, ícones em rotas lazy, SSR e apps zoneless.
- Ícones no Svelte 5Ícones Svelte 5 com glyphfox: instale, importe componentes, passe props com runes, faça morph com MorphIcon e morphStore, funda ícones e tenha bundles pequenos.
- Ícones no SvelteKitÍcones glyphfox no SvelteKit com SSR e pré-renderização: configuração, nomes no layout raiz, endpoints SVG, adapter-static, hidratação e armadilhas comuns.
- Ícones no SolidJSDuas formas de usar ícones glyphfox hoje no SolidJS e SolidStart: o elemento glyph-fox com bindings attr: ou um pequeno componente no core, com tree shaking.
- Ícones no PreactÍcones no Preact com glyphfox: os componentes React via preact/compat com Vite, webpack, esbuild e TypeScript, ou o elemento glyph-fox sem compat.
- Ícones no QwikRenderize ícones glyphfox no servidor com Qwik, sem enviar JavaScript nem precisar de retomada, e use o elemento glyph-fox só onde um ícone precisar reagir.
- Ícones no AstroRenderize ícones glyphfox no build do Astro, sem JavaScript no cliente, envolva-os num componente Icon.astro e adicione ilhas ou o elemento para ter movimento.
- Ícones em React NativeÍcones SVG do glyphfox em React Native com react-native-svg: SvgXml, imports enxutos por ícone no Metro, cor, peso, fusões, frames de morph e acessibilidade.
- Ícones em Lit e web componentsUse o custom element glyph-fox em Lit e web components puros: registre todos os ícones SVG ou só alguns, vincule atributos, estilize e mantenha a acessibilidade.
- Ícones em HTML puro via CDNÍcones SVG do glyphfox em qualquer página HTML com uma tag script: elemento glyph-fox, placeholders data-glyph, API global, versão fixa e quando gerar um subconjunto.
Tópicos
Guias que valem para todos os frameworks.
- Ícones Tailwind CSSÍcones Tailwind CSS com glyphfox no v3 e v4: configuração, sintaxe das classes gf, estilos e pesos após a barra, selos, fusões, animações e opções.
- Ícones animadosÍcones animados com glyphfox: presets draw, pop, spin e shake, gatilhos hover, click e state, morphs entre ícones, morphs só com CSS e movimento reduzido.
- Ícones acessíveisÍcones SVG acessíveis com glyphfox: decorativos por padrão, títulos e rótulos, botões só com ícone, ícones de status, contraste, movimento reduzido e layouts RTL.
- Tree shaking de íconesTree shaking de ícones do glyphfox no Vite, webpack, Rollup e esbuild: tamanhos de bundle medidos, o que o impede, ícones por nome e subconjuntos fixos.
- Sprites SVGÍcones em sprite SVG com glyphfox: ids de símbolo, referências use, regra de mesma origem, sprites inline, subconjuntos via CLI, limites do CSS e cache.
- Renderização no servidorRenderize ícones SVG do glyphfox no servidor: o que cada pacote gera, registro de ícones usados por nome, strings do toSvg, hidratação, movimento e o web component.