Naar de inhoud
Numio

Converteer SVG-bestanden eenvoudig naar JSX — Numio

Verandert SVG-opmaak in een React-functiecomponent: SVGO optimaliseert de SVG in uw browser en SVGR converteert deze vervolgens lokaal in uw browser. Attributen zijn camelCased (lijnbreedte tot strokeWidth), numerieke formaten worden getallen en {...props} wordt verspreid over de root <svg>.

Een pictogram dat uit Figma of Illustrator is geëxporteerd, omzetten in een React-component.

SVG

JSX

Wanneer gebruik je dit?

  • Een pictogram dat uit Figma of Illustrator is geëxporteerd, omzetten in een React-component.
  • Controleren hoe SVGR een SVG zal herschrijven voordat SVGR aan een build-pijplijn wordt toegevoegd.

Hoe werkt het

  1. Plak de SVG-opmaak of laad een .svg-bestand; invoer die niet geldig is SVG wordt afgewezen met een fout.
  2. Open Instellingen om de SVGO-optimalisatie uit te schakelen of plug-ins in of uit te schakelen, zoals het verwijderen van titels of het samenvoegen van paden; het voorbeeld onder de editor vergelijkt de originele en geoptimaliseerde SVG.
  3. Kopieer de component en hernoem de naam SvgComponent; geef className, breedte of vulling door als rekwisieten.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React-component (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Details en beperkingen

SVGO en SVGR worden lokaal in uw browser uitgevoerd. Uw SVG-opmaak wordt niet geüpload naar een conversieserver.

Met de standaardinstellingen worden opmerkingen, <title>, <desc> en metagegevens van de editor verwijderd en worden padgegevens ingekort (M5.000 12.000 L19.000 12.000 wordt M5 12h14). Schakel optimalisatie uit om de SVG te converteren zoals geplakt.

stijlstrings worden stijlobjecten en klasse wordt className.

Uitvoerdoelen Reageren DOM; gebruik SVG om Native te reageren voor react-native-svg.

FAQ

Waarom behoudt de wortel breedte en hoogte?

afmetingen verwijderen is uitgeschakeld in de SVGO-instellingen en SVGR gebruikt standaardopties, dus afmetingen worden behouden als getallen (breedte={24}). Overschrijf ze via rekwisieten, aangezien {...rekwisieten} erna komt.

Zal ik met fill="currentColor" de kleur van CSS kunnen instellen?

Ja. currentColor blijft behouden, dus het pictogram volgt de CSS-kleur van de ouder. Hardgecodeerde kleuren binnen paden worden niet vervangen.

Waarom ontbreekt de <title> in mijn component?

De verwijdertitel van SVGO is standaard ingeschakeld. Schakel het uit in Instellingen, of schakel de optimalisatie helemaal uit, als je de <title> nodig hebt voor toegankelijkheid.

Is TypeScript-uitvoer beschikbaar?

Nee. De pagina voert een JavaScript-component uit zonder typeannotaties.

Specificaties en referenties