Key Takeaways

React bietet vier Haupt-SVG-Import-Methoden: Bild-Import, Inline-SVG, SVGR-Komponenten und dynamische Imports
SVGR mit der Next.js Webpack-Konfiguration bietet die beste Balance zwischen Entwicklererfahrung und Laufzeit-Kontrolle
Wiederverwendbare Icon-Komponenten mit TypeScript-Props (size, color, className) halten Ihren Code DRY
Framer Motion integriert sich nativ mit SVG-Elementen für spring-basierte Pfad- und Form-Animationen
Fügen Sie immer aria-label oder aria-hidden zu SVG-Icons für die Barrierefreiheit von Screenreadern hinzu

SVG in der modernen React-Entwicklung

SVGs sind unverzichtbar für moderne React-Anwendungen und bieten gestochen scharfe Grafiken in jeder Größe. Dieser Leitfaden behandelt jede Methode der SVG-Verwendung in React- und Next.js-Projekten.

Verwendung von SVG-Komponenten in React- und Next.js-Anwendungen — SVG in React: von einfachen Imports bis zu vollständig animierten, barrierefreien Icon-Systemen

Import-Methoden

1. Standard-Bild-Import

Einfachster Ansatz:

jsx

import logo from './logo.svg';

function Header() {
  return <img src={logo} alt="Logo" className="logo" />;
}

Vorteile: Einfach, vertraut
Nachteile: Kein Styling-/Manipulationszugriff

2. Inline-SVG-Komponenten

Volle Kontrolle:

jsx

function Icon() {
  return (
    <svg viewBox="0 0 24 24" className="icon">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5"/>
    </svg>
  );
}

Vorteile: Voller CSS/JS-Zugriff
Nachteile: Ausführlich, Quelle schwer änderbar

3. SVGR (React-Komponente)

Als Komponente importieren:

jsx

import { ReactComponent as Logo } from './logo.svg';

function Header() {
  return <Logo className="logo" fill="currentColor" />;
}

Vorteile: Das Beste aus beiden Welten
Nachteile: Erfordert Konfiguration

4. Dynamischer Import

Für Code Splitting:

jsx

import dynamic from 'next/dynamic';

const DynamicIcon = dynamic(() => import('./icons/chart.svg'));

function Dashboard() {
  return <DynamicIcon />;
}

Pro Tip: Für die meisten React-Projekte ist SVGR der empfohlene Ansatz. Er ermöglicht den Import von SVGs als React-Komponenten mit voller Prop-Unterstützung, während die SVG-Dateien für einfache Bearbeitung in Design-Tools separat bleiben.

SVGR-Konfiguration

Next.js-Setup

javascript

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

Mit URL-Fallback

javascript

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.[jt]sx?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{
                name: 'removeViewBox',
                active: false
              }]
            }
          }
        },
        'url-loader'
      ],
    });
    return config;
  },
};

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Komponenten-Patterns

Wiederverwendbare Icon-Komponente

jsx

interface IconProps {
  name: string;
  size?: number;
  color?: string;
  className?: string;
}

export function Icon({ name, size = 24, color = 'currentColor', className }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      fill={color}
      className={className}
    >
      <use href={`/sprites.svg#${name}`} />
    </svg>
  );
}

// Verwendung
<Icon name="search" size={20} color="#333" />

Icon-Bibliotheks-Komponente

jsx

// icons/index.tsx
import { FC, SVGProps } from 'react';

interface IconComponentProps extends SVGProps<SVGSVGElement> {
  size?: number;
}

const createIcon = (path: string): FC<IconComponentProps> => {
  return function IconComponent({ size = 24, ...props }) {
    return (
      <svg
        viewBox="0 0 24 24"
        width={size}
        height={size}
        fill="currentColor"
        {...props}
      >
        <path d={path} />
      </svg>
    );
  };
};

export const SearchIcon = createIcon('M15.5 14h-.79l-.28-.27...');
export const HomeIcon = createIcon('M10 20v-6h4v6h5v-8h3L12...');

SVG-Icons optimiert für Webanwendungen und Design-Systeme — Ein skalierbares SVG-Icon-System in React mit TypeScript aufbauen

SVG in React stylen

CSS-Styling

css

/* styles.css */
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: fill 0.2s;
}

.icon:hover {
  fill: #0066cc;
}

Styled Components

jsx

import styled from 'styled-components';

const StyledSvg = styled.svg`
  width: ${props => props.size || 24}px;
  height: ${props => props.size || 24}px;
  fill: ${props => props.color || 'currentColor'};
  transition: fill 0.2s;

  &:hover {
    fill: ${props => props.hoverColor || props.color};
  }
`;

Tailwind CSS

jsx

<svg
  className="w-6 h-6 fill-current text-gray-600 hover:text-blue-500 transition-colors"
  viewBox="0 0 24 24"
>
  <path d="..."/>
</svg>

"

Der beste SVG-Workflow in React ist einer, bei dem Designer saubere Vektoren exportieren und Entwickler sie als erstklassige Komponenten importieren — ohne manuelle Konvertierungsschritte dazwischen.

— Kent C. Dodds, React-Educator

Animation in React

CSS-Animation

jsx

function LoadingSpinner() {
  return (
    <svg className="animate-spin" viewBox="0 0 24 24">
      <circle
        className="opacity-25"
        cx="12" cy="12" r="10"
        stroke="currentColor" strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
  );
}

Framer Motion

jsx

import { motion } from 'framer-motion';

function AnimatedIcon() {
  return (
    <motion.svg
      viewBox="0 0 24 24"
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ type: 'spring' }}
    >
      <motion.path
        d="M12 2L2 22h20L12 2z"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
      />
    </motion.svg>
  );
}

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Optimierungsstrategien

Build-Zeit-Optimierung

javascript

// svgo.config.js
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',
    { name: 'removeViewBox', active: false },
    { name: 'prefixIds', params: { prefix: 'svg-' } }
  ]
};

Code Splitting

jsx

// Schwere Icons lazy laden
const ChartIcon = lazy(() => import('./icons/Chart'));

function Dashboard() {
  return (
    <Suspense fallback={<div className="icon-placeholder" />}>
      <ChartIcon />
    </Suspense>
  );
}

Entfernen Sie niemals viewBox bei der SVGO-Optimierung. Ohne viewBox verlieren SVGs ihre Fähigkeit, responsiv zu skalieren. Setzen Sie immer removeViewBox: false in Ihrer SVGO-Konfiguration.

Barrierefreiheit in React

Barrierefreies Icon-Pattern

jsx

interface AccessibleIconProps {
  label: string;
  children: React.ReactNode;
}

function AccessibleIcon({ label, children }: AccessibleIconProps) {
  return (
    <span role="img" aria-label={label}>
      {children}
    </span>
  );
}

// Verwendung
<AccessibleIcon label="Suchen">
  <SearchIcon />
</AccessibleIcon>

Icon-Button

jsx

function IconButton({ icon: Icon, label, onClick }) {
  return (
    <button
      onClick={onClick}
      aria-label={label}
      className="icon-button"
    >
      <Icon aria-hidden="true" />
    </button>
  );
}

VectoSolve-Integration

Workflow

VectoSolve mit React verwenden:

Bilder in SVG konvertieren
Optimierte Ausgabe herunterladen
In Ihr React-Projekt importieren
Bevorzugte Methode von oben verwenden

Vorteile optimierter Dateien

VectoSolve-SVGs sind:

Für Webnutzung optimiert
Bereit für SVGR-Import
Saubere Pfaddaten
Einfach zu stylen

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Fazit

React bietet mehrere Möglichkeiten, mit SVGs zu arbeiten, jede mit Kompromissen. Wählen Sie den Ansatz, der zu Ihren Anforderungen passt: einfache Bild-Imports für grundlegende Nutzung, SVGR für volle Kontrolle oder Komponenten-Patterns für Icon-Systeme. Beginnen Sie mit sauberen, optimierten SVGs von VectoSolve für die besten Ergebnisse.

React-fertige SVGs erhalten

SVG-Import-Methode	Laufzeit-Kontrolle	Bundle-Auswirkung	Ideal Für
<img src> Import	Keine	Separate HTTP-Anfrage	Statische dekorative Bilder
Inline-JSX-SVG	Voll (Props, Events, CSS)	Erhöht Komponentengröße	Interaktive Icons, Animationen
SVGR-Komponente	Voll (typisierte Props, Tree-Shaking)	Chunk pro Komponente	Icon-Bibliotheken, Design-Systeme
Dynamischer Import	Voll (nach dem Laden)	Code-Split, Lazy Loading	Below-the-Fold oder bedingte SVGs

Quellen & Weiterführende Lektüre

MDN Web Docs: SVG in HTML — Referenz zum Einbetten von SVG in JSX und Verstehen der SVG-DOM-Interaktion
web.dev: Code Splitting — Googles Leitfaden zu Lazy Loading und dynamischen Imports für optimale Bundle-Größe
CSS-Tricks: SVG in React — Praktische Patterns für die Verwendung von SVG-Komponenten in React- und Next.js-Projekten
Smashing Magazine: React Components — Best Practices für den Aufbau wiederverwendbarer, barrierefreier SVG-Komponentenbibliotheken

Key Takeaways

1. Standard-Bild-Import

2. Inline-SVG-Komponenten

3. SVGR (React-Komponente)

4. Dynamischer Import

Next.js-Setup

Mit URL-Fallback

Wiederverwendbare Icon-Komponente

Icon-Bibliotheks-Komponente

CSS-Styling

Styled Components

Tailwind CSS

CSS-Animation

Framer Motion

Build-Zeit-Optimierung

Code Splitting

Barrierefreies Icon-Pattern

Icon-Button

Workflow

Vorteile optimierter Dateien

Try VectoSolve Now

Related articles

Wie wir die Ladezeit um 70 % reduziert haben mit SVG-Optimierung: eine echte Fallstudie

Leitfaden für Webentwickler: Best Practices für SVG-Integration

Druckfertige Vektoren erstellen: Vom Bildschirm zum professionellen Druck

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?