Usare un'icona SVG in HTML, React e React Native, e cambiarne il colore
Guida per sviluppatori: SVG inline o img, currentColor per i temi, l'SVG come componente React e react-native-svg su mobile.
Hai un'icona SVG, convertita o disegnata. Le domande che seguono sono sempre le stesse: come la metto nella pagina, come ne cambio il colore da CSS e come uso lo stesso file in un'app React Native. Ecco l'intero percorso, con i suoi compromessi.
Passo 0: rendi il colore controllabile
Un SVG convertito ha riempimenti letterali, per esempio fill="#0d1014". Per ricolorarlo da CSS, sostituisci il riempimento delle forme da tematizzare con currentColor. Da quel momento l'icona prende il color CSS del suo genitore. Lascia i colori letterali nelle parti che devono restare fisse, come un accento del marchio.
- Icona monocromatica: sostituisci ogni riempimento con currentColor.
- Icona a due toni: currentColor per la forma principale, un colore letterale o una variabile CSS (fill="var(--accent)") per l'accento.
- Togli gli attributi width e height dalla radice, tieni il viewBox e dimensiona con CSS.
HTML puro: inline o img
Un tag img (o uno sfondo CSS) è la via più semplice: viene messo in cache e non sporca l'HTML, ma il colore non si può cambiare da CSS e currentColor lì non fa nulla. L'SVG inline, incollato nell'HTML, si può stilizzare e animare e costa qualche centinaio di byte per ogni uso. Regola pratica: inline per le icone che cambiano colore o stato; img per loghi e illustrazioni che non cambiano.
Esempio inline: incolla l'elemento svg nella pagina, imposta color su un genitore e tutti i riempimenti currentColor lo seguono. Per molte icone, mettile in un svg nascosto come elementi symbol e richiamale con use; il browser dipinge ogni use con il colore in vigore in quel punto.
React: l'icona come componente
Trasforma l'SVG in un componente perché accetti props. Converti i nomi degli attributi in camelCase (stroke-width diventa strokeWidth, fill-rule diventa fillRule), togli xmlns e distribuisci le props sulla radice così che className e aria-label passino. Uno strumento come SVGR fa esattamente questo da riga di comando o come plugin del bundler, così tieni i file .svg e li importi come componenti.
Il colore diventa allora una questione di color CSS sul componente o su un genitore, oppure di una prop color che imposta fill sulla radice. Per una libreria di icone tematizzabile bastano currentColor e variabili CSS; non serve nessuna libreria a runtime.
React Native: react-native-svg
Le viste native non renderizzano il markup SVG. Il pacchetto react-native-svg fornisce Svg, Path, Circle e gli altri elementi come componenti. Converti il file con SVGR e il suo preset native, che emette quei componenti al posto degli elementi DOM. La dimensione è esplicita (props width e height, con il viewBox conservato) e il colore è una prop fill sugli elementi Path; lo schema abituale è una prop color sul tuo componente, passata a ogni riempimento che deve seguire il tema.
- Installa react-native-svg (Expo lo include).
- Esegui SVGR con l'opzione native per ottenere un file componente per icona.
- Tieni le sfumature semplici; react-native-svg supporta quelle lineari e radiali, ma ognuna ha bisogno di un blocco Defs, che SVGR genera per te.
Tieni il file piccolo
Un'icona dovrebbe essere una manciata di tracciati. Se il tuo file convertito ne ha decine, la sorgente aveva rumore o ombreggiatura; riconvertilo in modalità Logo con meno colori. svgize mostra il numero di tracciati accanto a ogni risultato, così puoi controllare prima di pubblicare. Passa il file finale in un ottimizzatore come SVGO per togliere i metadati e accorciare i numeri.