Leitfäden
Installieren Sie glyphfox in Ihrem Stack, lernen Sie die Props kennen, auf die es dort ankommt, und umgehen Sie die Probleme, auf die andere schon gestoßen sind. Alle Beispiele funktionieren mit den aktuellen Paketen.
Frameworks
Ein Leitfaden pro Framework, von der Installation bis zum serverseitigen Rendering.
- React-IconsReact-Icons mit glyphfox: Installation, tree-shakable SVG-Komponenten, alle Props, Icons per Name, Modifier, Fusion, Morphing, Refs und TypeScript-Typen.
- Icons in Next.jsglyphfox in Next.js nutzen: Client-Boundary für den App Router, SVG-Icons ohne JavaScript in Server Components, Pages Router und Icons per Name auf dem Server.
- Icons in Vue 3Vue-3-Icons mit glyphfox: installieren, tree-shakable Komponenten importieren, Props in Templates setzen, mit useMorph morphen, verschmelzen, leere Icons vermeiden.
- Icons in Nuxtglyphfox-Icons in Nuxt mit SSR: Komponenten importieren, Namen per Plugin registrieren, Auto-Import-Wrapper nutzen, Morphs synchron halten, leere Icons vermeiden.
- Icons in Angularglyphfox-Icons in Angular einbinden: die Standalone-Komponente gf-icon, provideGlyphFox, Inputs, Fusion, Modifier, Icons für Lazy Routes, SSR und Zoneless-Apps.
- Icons in Svelte 5Svelte-5-Icons mit glyphfox: Installation, Import der Komponenten, Props mit Runes, Morphing mit MorphIcon und morphStore, Fusion und kleine Bundles.
- Icons in SvelteKitglyphfox-Icons in SvelteKit mit SSR und Prerendering: Setup, Root-Layout für Icon-Namen, SVG-Endpunkte, adapter-static, Hydration und typische Stolperfallen.
- Icons in SolidJSglyphfox-Icons in SolidJS und SolidStart, schon heute auf zwei Wegen: das glyph-fox-Element mit attr:-Bindings oder eine kleine tree-shakable Core-Komponente.
- Icons in PreactPreact-Icons mit glyphfox: die React-Komponenten über preact/compat mit Vite, webpack, esbuild und TypeScript oder das glyph-fox-Element ohne compat.
- Icons in Qwikglyphfox-Icons in Qwik serverseitig rendern, ganz ohne JavaScript und Resuming, und das glyph-fox-Element nur dort nutzen, wo ein Icon reagieren muss.
- Icons in Astroglyphfox-Icons in Astro beim Build ohne Client-JavaScript rendern, in einer Icon.astro-Komponente kapseln und für Animationen Islands oder das Element ergänzen.
- Icons in React NativeSVG-Icons in React Native mit glyphfox und react-native-svg: SvgXml, kleine Einzelimporte für Metro, Farbe, Strichstärke, Fusionen, Morph-Frames, Barrierefreiheit.
- Icons in Lit und Web ComponentsSVG-Icons in Lit und Web Components mit dem Custom Element glyph-fox: alle oder ausgewählte Icons registrieren, Attribute binden, stylen, barrierefrei halten.
- Icons per CDN in reinem HTMLglyphfox mit einem Script-Tag in jede HTML-Seite einbinden: Element glyph-fox, data-glyph-Platzhalter, globale API, feste Versionen, wann sich ein Subset lohnt.
Themen
Leitfäden, die für jedes Framework gelten.
- Tailwind-CSS-Iconsglyphfox-Icons als Klassen in Tailwind CSS v3 und v4: Einrichtung, gf-Syntax, Stile und Strichstärken per Schrägstrich, Badges, Fusionen, Animationen, Optionen.
- Animierte IconsAnimierte Icons mit glyphfox: Presets draw, pop, spin und shake, Auslöser hover, click und state, Morphing zwischen Icons, reine CSS-Morphs, reduzierte Bewegung.
- Barrierefreie IconsBarrierefreie Icons mit glyphfox: standardmäßig dekorativ, Titel und Labels, reine Icon-Buttons, Status-Icons, Kontrast, reduzierte Bewegung und RTL-Layouts.
- Tree-Shaking für IconsTree-Shaking für glyphfox-Icons in Vite, webpack, Rollup und esbuild: gemessene Bundle-Größen, was Tree-Shaking aushebelt, Laden per Name und feste Teilmengen.
- SVG-Spritesglyphfox-Icons aus einem SVG-Sprite nutzen: Symbol-IDs, use-Referenzen, Same-Origin-Regel, Inline-Sprites, Teilmengen per CLI, Grenzen beim Styling und Caching.
- Serverseitiges RenderingSVG-Icons mit glyphfox serverseitig rendern: was jedes Paket ausgibt, per Name genutzte Icons registrieren, toSvg-Strings, Hydration, Animationen, Web Component.