Tutorials

React Tutorial: Bilder und Font Awesome Icons

Melden

In diesem Tutorial lernst du, wie du professionell mit Bildern und Icons (Font Awesome) in einem React-Projekt arbeitest.

Bilder und Icons sind essenziell für ein modernes UI/UX-Design. In React gibt es spezielle Best Practices, wie man diese Assets einbindet.

Teil 1: Bilder in React verwenden

Es gibt zwei Hauptwege, um Bilder in React einzubinden: über den src-Ordner oder den public-Ordner.

1.1 Bilder aus dem src-Ordner (Empfohlen)

Wenn du Bilder in src/assets speicherst, werden sie vom Build-Tool (wie Webpack oder Vite) verarbeitet, optimiert und erhalten einen Hash-Namen für das Caching.

Schritte:

  1. Erstelle einen Ordner src/assets.
  2. Importiere das Bild oben in deiner Komponente.
  3. Nutze die Variable im src-Attribut des <img>-Tags.
import React from 'react';
import meinBild from './assets/beispiel.jpg'; // Import des Bildes

function Header() {
  return (
    <div>
      <h1>Willkommen zu meinem Projekt</h1>
      <img 
        src={meinBild} 
        alt="Beschreibung des Bildes" 
        style={{ width: '300px', borderRadius: '10px' }} 
      />
    </div>
  );
}

export default Header;

1.2 Bilder aus dem public-Ordner

Bilder im public-Ordner werden nicht vom Build-Prozess angefasst. Du kannst sie direkt per Pfad ansprechen.

// Wenn das Bild unter public/logo.png liegt:
<img src="/logo.png" alt="Logo" />

Wann nutzen? Für Icons (favicon), manifest.json oder wenn du tausende Bilder hast, die nicht alle importiert werden sollen.

Teil 2: Font Awesome Icons in React

Die Verwendung von Font Awesome in React unterscheidet sich von Standard-HTML. Wir nutzen die offizielle React-Komponente, da diese performanter ist (SVG-basiert) und besser in den Komponenten-Lifecycle passt.

2.1 Installation

Öffne dein Terminal im Projektordner und installiere die notwendigen Pakete:

# Kern-Paket und SVG-Icons
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

# Optional: Regular Icons oder Brand Icons (Facebook, Twitter etc.)
npm install @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

2.2 Icons einbinden und verwenden

In React importierst du jedes Icon einzeln. Das hält dein Bundle klein (Tree Shaking).

Beispiel-Komponente:

import React from 'react';
// 1. Importiere die FontAwesome-Komponente
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// 2. Importiere die spezifischen Icons
import { faUser, faEnvelope, faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

function ContactCard() {
  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h2> <FontAwesomeIcon icon={faUser} /> Benutzerprofil</h2>

      <p>
        <FontAwesomeIcon icon={faEnvelope} style={{ color: 'blue', marginRight: '10px' }} />
        email@beispiel.de
      </p>

      <p>
        <FontAwesomeIcon icon={faCoffee} size="2x" spin /> {/* Icon dreht sich! */}
        Pause machen...
      </p>

      <a href="https://github.com">
        <FontAwesomeIcon icon={faGithub} size="3x" />
      </a>
    </div>
  );
}

export default ContactCard;

2.3 Wichtige Props für FontAwesomeIcon

Prop Beschreibung Beispiel
icon Das importierte Icon-Objekt icon={faCoffee}
size Größe (xs, sm, lg, 1x bis 10x) size="2x"
color Farbe des Icons color="red"
spin Animiert das Icon (drehend) spin (boolean)
pulse Dreht das Icon in 8 Schritten pulse
rotation Drehung in Grad rotation={90}

Teil 3: Best Practices & Tipps

  1. Alt-Texte: Vergiss niemals das alt-Attribut bei <img>-Tags für die Barrierefreiheit (SEO & Screenreader).
  2. Namenskonvention: In React werden Font Awesome Icons in CamelCase geschrieben (aus fa-user-circle wird faUserCircle).
  3. Ordnerstruktur:
    • src/assets/images: Für Fotos/Grafiken.
    • src/components/common/Icon.js: (Optional) Erstelle eine eigene Wrapper-Komponente, falls du Icons projektweit einheitlich stylen willst.
  4. Vermeide große Bundles: Importiere Icons niemals so: import { ... } from '@fortawesome/free-solid-svg-icons'. Importiere nur das, was du wirklich brauchst.

Zusammenfassung

  • Bilder: Nutze import für Bilder in src, um von der Optimierung der Build-Tools zu profitieren.
  • Icons: Nutze das Paket @fortawesome/react-fontawesome. Es ist sauberer, skalierbar und lässt sich einfach über Props steuern.

Viel Erfolg bei deinem React-Projekt! 🚀

0