Key Takeaways

React biedt vier belangrijke SVG-importmethoden: afbeelding-import, inline SVG, SVGR-componenten en dynamische imports
SVGR met Next.js webpack-configuratie geeft de beste balans tussen ontwikkelaarservaring en runtime-controle
Herbruikbare icon-componenten met TypeScript-props (size, color, className) houden je code DRY
Framer Motion integreert native met SVG-elementen voor spring-gebaseerde pad- en vormanimaties
Voeg altijd aria-label of aria-hidden toe aan SVG-iconen voor screenreader-toegankelijkheid

SVG in Moderne React-Ontwikkeling

SVGs zijn essentieel voor moderne React-applicaties en bieden scherpe graphics op elke schaal. Deze gids behandelt elke methode van SVG-gebruik in React- en Next.js-projecten.

SVG-componenten gebruiken in React- en Next.js-applicaties — SVG in React: van eenvoudige imports tot volledig geanimeerde, toegankelijke icoon-systemen

Importmethoden

1. Standaard Afbeelding-Import

Eenvoudigste aanpak:

jsx

import logo from './logo.svg';

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

Voordelen: Eenvoudig, vertrouwd
Nadelen: Geen styling-/manipulatietoegang

2. Inline SVG-Componenten

Volle controle:

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>
  );
}

Voordelen: Volledige CSS/JS-toegang
Nadelen: Uitgebreid, bron moeilijk te wijzigen

3. SVGR (React-Component)

Importeren als component:

jsx

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

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

Voordelen: Het beste van beide werelden
Nadelen: Vereist configuratie

4. Dynamische Import

Voor code splitting:

jsx

import dynamic from 'next/dynamic';

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

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

Pro Tip: Voor de meeste React-projecten is SVGR de aanbevolen aanpak. Het laat je SVGs importeren als React-componenten met volledige prop-ondersteuning, terwijl SVG-bestanden apart blijven voor eenvoudige bewerking in design-tools.

SVGR-Configuratie

Next.js Setup

javascript

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

Met 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

Componentpatronen

Herbruikbare Icon-Component

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>
  );
}

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

Icon-Bibliotheek Component

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-iconen geoptimaliseerd voor webapplicaties en design systems — Een schaalbaar SVG-icoon-systeem bouwen in React met TypeScript

SVG Stylen in React

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>

"

De beste SVG-workflow in React is die waarbij designers schone vectoren exporteren en ontwikkelaars ze importeren als eersteklas componenten — geen handmatige conversiestappen ertussen.

— Kent C. Dodds, React Educator

Animatie in React

CSS-Animatie

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

Optimalisatiestrategieën

Build-Time Optimalisatie

javascript

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

Code Splitting

jsx

// Zware iconen lazy laden
const ChartIcon = lazy(() => import('./icons/Chart'));

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

Verwijder nooit viewBox tijdens SVGO-optimalisatie. Zonder viewBox verliezen SVGs hun vermogen om responsief te schalen. Stel altijd removeViewBox: false in je SVGO-configuratie in.

Toegankelijkheid in React

Toegankelijk Icon-Patroon

jsx

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

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

// Gebruik
<AccessibleIcon label="Zoeken">
  <SearchIcon />
</AccessibleIcon>

Icon-Knop

jsx

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

VectoSolve-Integratie

Workflow

VectoSolve gebruiken met React:

Afbeeldingen converteren naar SVG
Geoptimaliseerde uitvoer downloaden
Importeren in je React-project
Bovenstaande voorkeursmethode gebruiken

Voordelen van Geoptimaliseerde Bestanden

VectoSolve SVGs zijn:

Geoptimaliseerd voor webgebruik
Klaar voor SVGR-import
Schone paddata
Eenvoudig te 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

Conclusie

React biedt meerdere manieren om met SVGs te werken, elk met afwegingen. Kies de aanpak die bij je behoeften past: eenvoudige afbeelding-imports voor basisgebruik, SVGR voor volledige controle, of componentpatronen voor icoon-systemen. Begin met schone, geoptimaliseerde SVGs van VectoSolve voor de beste resultaten.

Haal React-klare SVGs

SVG-Importmethode	Runtime-Controle	Bundle-Impact	Ideaal Voor
<img src> import	Geen	Aparte HTTP-request	Statische decoratieve afbeeldingen
Inline JSX SVG	Volledig (props, events, CSS)	Verhoogt componentgrootte	Interactieve iconen, animaties
SVGR-component	Volledig (getypeerde props, tree-shaking)	Chunk per component	Icoon-bibliotheken, design systems
Dynamische import	Volledig (na laden)	Code-split, lazy loaded	Below-the-fold of conditionele SVGs

Bronnen & Verder Lezen

MDN Web Docs: SVG in HTML — Referentie voor het inbedden van SVG in JSX en het begrijpen van SVG-DOM-interactie
web.dev: Code Splitting — Google's gids voor lazy loading en dynamische imports voor optimale bundlegrootte
CSS-Tricks: SVG in React — Praktische patronen voor het gebruik van SVG-componenten in React- en Next.js-projecten
Smashing Magazine: React Components — Best practices voor het bouwen van herbruikbare, toegankelijke SVG-componentbibliotheken

Key Takeaways

1. Standaard Afbeelding-Import

2. Inline SVG-Componenten

3. SVGR (React-Component)

4. Dynamische Import

Next.js Setup

Met URL-Fallback

Herbruikbare Icon-Component

Icon-Bibliotheek Component

CSS-Styling

Styled Components

Tailwind CSS

CSS-Animatie

Framer Motion

Build-Time Optimalisatie

Code Splitting

Toegankelijk Icon-Patroon

Icon-Knop

Workflow

Voordelen van Geoptimaliseerde Bestanden

Try VectoSolve Now

Related articles

Hoe we de laadtijd met 70% verlaagden met SVG-optimalisatie: een echte casestudy

Gids voor webontwikkelaars: Best practices voor SVG-integratie

Drukklare vectoren maken: van scherm naar professionele druk

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?