Key Takeaways

React offre quattro metodi principali di import SVG: import immagine, SVG inline, componenti SVGR e import dinamici
SVGR con la configurazione webpack di Next.js offre il miglior equilibrio tra esperienza sviluppatore e controllo a runtime
Componenti icona riutilizzabili con props TypeScript (size, color, className) mantengono il codice DRY
Framer Motion si integra nativamente con gli elementi SVG per animazioni di tracciati e forme basate su spring
Aggiungi sempre aria-label o aria-hidden alle icone SVG per l'accessibilità degli screen reader

SVG nello Sviluppo React Moderno

Gli SVG sono essenziali per le applicazioni React moderne, offrendo grafiche nitide a qualsiasi scala. Questa guida copre ogni metodo di utilizzo degli SVG nei progetti React e Next.js.

Utilizzo di componenti SVG nelle applicazioni React e Next.js — SVG in React: da import semplici a sistemi di icone animati e accessibili

Metodi di Importazione

1. Import Immagine Standard

Approccio più semplice:

jsx

import logo from './logo.svg';

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

Pro: Semplice, familiare
Contro: Nessun accesso a stili/manipolazione

2. Componenti SVG Inline

Controllo totale:

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

Pro: Accesso completo CSS/JS
Contro: Verboso, difficile cambiare la sorgente

3. SVGR (Componente React)

Importare come componente:

jsx

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

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

Pro: Il meglio di entrambi i mondi
Contro: Richiede configurazione

4. Import Dinamico

Per il code splitting:

jsx

import dynamic from 'next/dynamic';

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

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

Pro Tip: Per la maggior parte dei progetti React, SVGR è l'approccio consigliato. Permette di importare SVG come componenti React con supporto completo delle props mantenendo i file SVG separati per una facile modifica negli strumenti di design.

Configurazione SVGR

Setup Next.js

javascript

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

Con Fallback URL

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

Pattern dei Componenti

Componente Icona Riutilizzabile

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

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

Componente Libreria Icone

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...');

Icone SVG ottimizzate per applicazioni web e design system — Costruire un sistema di icone SVG scalabile in React con TypeScript

Stilizzare gli SVG in React

Stili CSS

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>

"

Il miglior flusso di lavoro SVG in React è quello in cui i designer esportano vettori puliti e gli sviluppatori li importano come componenti di prima classe — nessun passaggio di conversione manuale nel mezzo.

— Kent C. Dodds, Educatore React

Animazione in React

Animazione CSS

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

Strategie di Ottimizzazione

Ottimizzazione Build-Time

javascript

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

Code Splitting

jsx

// Caricamento lazy delle icone pesanti
const ChartIcon = lazy(() => import('./icons/Chart'));

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

Non rimuovere mai viewBox durante l'ottimizzazione SVGO. Senza viewBox, gli SVG perdono la capacità di scalare in modo responsive. Imposta sempre removeViewBox: false nella tua configurazione SVGO.

Accessibilità in React

Pattern Icona Accessibile

jsx

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

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

// Utilizzo
<AccessibleIcon label="Cerca">
  <SearchIcon />
</AccessibleIcon>

Pulsante Icona

jsx

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

Integrazione VectoSolve

Flusso di Lavoro

Usare VectoSolve con React:

Convertire immagini in SVG
Scaricare l'output ottimizzato
Importare nel tuo progetto React
Usare il metodo preferito sopra

Vantaggi dei File Ottimizzati

Gli SVG di VectoSolve sono:

Ottimizzati per l'uso web
Pronti per l'import SVGR
Dati di tracciato puliti
Facili da stilizzare

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

Conclusione

React offre molteplici modi per lavorare con gli SVG, ognuno con i suoi compromessi. Scegli l'approccio adatto alle tue esigenze: import immagine semplici per uso base, SVGR per controllo totale, o pattern di componenti per sistemi di icone. Inizia con SVG puliti e ottimizzati da VectoSolve per i migliori risultati.

Ottieni SVG Pronti per React

Metodo Import SVG	Controllo Runtime	Impatto Bundle	Ideale Per
<img src> import	Nessuno	Richiesta HTTP separata	Immagini decorative statiche
SVG inline JSX	Totale (props, eventi, CSS)	Aumenta dimensione componente	Icone interattive, animazioni
Componente SVGR	Totale (props tipizzate, tree-shaking)	Chunk per componente	Librerie icone, design system
Import dinamico	Totale (dopo caricamento)	Code-split, caricamento lazy	SVG below-the-fold o condizionali

Fonti e Letture Aggiuntive

MDN Web Docs: SVG in HTML — Riferimento per integrare SVG in JSX e comprendere l'interazione SVG-DOM
web.dev: Code Splitting — Guida Google al lazy loading e import dinamici per dimensioni bundle ottimali
CSS-Tricks: SVG in React — Pattern pratici per usare componenti SVG nei progetti React e Next.js
Smashing Magazine: React Components — Best practice per costruire librerie di componenti SVG riutilizzabili e accessibili

Key Takeaways

1. Import Immagine Standard

2. Componenti SVG Inline

3. SVGR (Componente React)

4. Import Dinamico

Setup Next.js

Con Fallback URL

Componente Icona Riutilizzabile

Componente Libreria Icone

Stili CSS

Styled Components

Tailwind CSS

Animazione CSS

Framer Motion

Ottimizzazione Build-Time

Code Splitting

Pattern Icona Accessibile

Pulsante Icona

Flusso di Lavoro

Vantaggi dei File Ottimizzati

Try VectoSolve Now

Related articles

Come abbiamo ridotto il tempo di caricamento del 70% con l'ottimizzazione SVG: caso studio reale

Guida per sviluppatori web: Best practice per l'integrazione SVG

Creare vettori pronti per la stampa: dallo schermo alla stampa professionale

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?