Naar de inhoud
Numio

Transformeer SVG voor React Native Apps — Numio

Verandert SVG-opmaak in een React Native-component die Svg, Path, G en andere elementen importeert uit react-native-svg. De SVGO-optimalisatie wordt eerst uitgevoerd en attributen worden JSX-props met numerieke waarden als getallen (strokeWidth={2}).

Een pictogram dat uit Figma of Sketch is geëxporteerd, omzetten in een component voor een Expo- of React Native-app die react-native-svg gebruikt.

SVG

React Native

Wanneer gebruik je dit?

  • Een pictogram dat uit Figma of Sketch is geëxporteerd, omzetten in een component voor een Expo- of React Native-app die react-native-svg gebruikt.
  • Een opgeblazen SVG (titels, metadata van de editor, ongebruikte defs) verkleinen voordat deze als een native component wordt verzonden.

Hoe werkt het

  1. Plak de SVG-opmaak in de SVG-editor of zet een .svg-bestand neer; de invoer moet geldig SVG zijn, anders krijg je "Dit is geen geldige SVG-code."
  2. Open SVGO-instellingen om de optimalisatie uit te schakelen of individuele plug-ins in of uit te schakelen, zoals het verwijderen van de titel, het verwijderen van het weergavevak of het samenvoegen van paden; het voorbeeld onder de editor vergelijkt het origineel en de geoptimaliseerde SVG.
  3. Kopieer de uitvoer van het React Native-paneel naar een .js- of .tsx-bestand en installeer react-native-svg in uw app.

SVG-opmaak

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

React Native-component (react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

Details en beperkingen

SVGO optimaliseert de SVG lokaal in een Web Worker in je browser. SVGR genereert vervolgens eveneens lokaal de JSX met native: true. Je SVG wordt niet geüpload.

Elementen die react-native-svg niet ondersteunt, zijn verwijderd en SVGR voegt een opmerking toe zoals /* SVGR heeft enkele elementen verwijderd die niet worden ondersteund door react-native-svg: filter */.

SVGO lijnt de <style>-regels in en zet stijldeclaraties vervolgens om in attributen, zodat style="stroke:blue" stroke="#00f" wordt (stroke prop). <title> wordt standaard verwijderd.

breedte, hoogte en viewBox blijven behouden, en {...props} wordt verspreid over de hoofd-Svg, zodat u de grootte of kleur kunt overschrijven.

FAQ

Heeft de uitvoer react-native-svg nodig?

Ja. De component importeert Svg en elementcomponenten zoals Path, Circle en G uit react-native-svg, die in uw project moeten worden geïnstalleerd; het werkt niet met gewone React Native Views.

Kan ik de viewBox behouden zodat het pictogram schaalt?

Ja. het verwijdervenster is standaard uitgeschakeld, dus viewBox blijft op het Svg-element staan. Geef breedte- en hoogtesteunen door wanneer u de component gebruikt om deze te schalen.

Wat gebeurt er met filters en verlopen?

Elementen zonder een react-native-svg-equivalent, zoals filter, worden verwijderd met een opmerking bovenaan het bestand. Ongebruikte verlopen worden verwijderd door SVGO's nutteloze defs te verwijderen.

Is mijn SVG geüpload?

Nee. Zowel de optimalisatie, de componentgeneratie als het voorbeeld blijven in je browser. De SVG wordt niet naar een conversieserver gestuurd.

Specificaties en referenties