Convertitore da SVG a React JSX / TSX

Far comportare l'icona come testo

Un componente icona è più facile da riutilizzare quando prende colore e dimensioni dal punto in cui viene inserito. Sostituisci i colori fill o stroke codificati direttamente con currentColor, così l'icona segue il colore del testo circostante, e rimuovi width e height mantenendo viewBox, in modo che sia il CSS o una className a impostare le dimensioni. Prima, passa il file attraverso il pulitore SVG per rimuovere i metadati dell'editor che altrimenti finirebbero nel bundle.

ID, stili e accessibilità

Gradienti, maschere e tracciati di ritaglio fanno riferimento a id. Se esegui due volte lo stesso componente, la pagina contiene ID duplicati, quindi la seconda copia potrebbe puntare al gradiente della prima. Genera ID univoci con useId di React quando un'icona li utilizza.

Un elemento <style> dentro l'SVG interrompe JSX, perché le parentesi graffe vengono lette come espressioni; sposta quelle regole negli attributi o in un foglio di stile. Per un'icona decorativa aggiungi aria-hidden="true"; per un'icona significativa aggiungi role="img" e un <title>.

Come usarlo

1. Incolla il markup SVG grezzo.
2. Configura il nome del componente, le interfacce TypeScript e l'inoltro delle props.
3. Copia il codice del componente React, pronto all'uso.

Privacy e limitazioni

La trasformazione del markup viene eseguita interamente in JavaScript lato client.