Przejdź do treści
Numio

Przekształć SVG dla aplikacji React Native — Numio

Zamienia znacznik SVG w komponent React Native, który importuje Svg, Path, G i inne elementy z React-Native-SVG. Optymalizacja SVGO przebiega najpierw, a atrybuty stają się rekwizytami JSX z wartościami numerycznymi jako liczbami (strokeWidth={2}).

Konwertowanie ikony wyeksportowanej z Figma lub Sketch do komponentu aplikacji Expo lub React Native, która wykorzystuje React-Native-SVG.

SVG

React Native

Kiedy go używać

  • Konwertowanie ikony wyeksportowanej z Figma lub Sketch do komponentu aplikacji Expo lub React Native, która wykorzystuje React-Native-SVG.
  • Zmniejszanie rozdętego SVG (tytuły, metadane edytora, nieużywane defensywy) przed wysłaniem go jako komponentu natywnego.

Jak używać

  1. Wklej kod SVG do edytora lub upuść plik .svg. Niepoprawny SVG powoduje komunikat "This is not a valid svg code."
  2. Otwórz ustawienia SVGO, aby wyłączyć optymalizację lub przełączyć poszczególne wtyczki, takie jak usunięcie tytułu, usunięcie pola widoku lub połączenie ścieżek; podgląd poniżej edytora porównuje oryginał i zoptymalizowany SVG.
  3. Skopiuj dane wyjściowe panelu React Native do pliku .js lub .tsx i zainstaluj React-native-svg w swojej aplikacji.

Znacznik SVG

<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>

Komponent React Native (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

Szczegóły i ograniczenia

Optymalizacja SVGO i generowanie komponentu JSX odbywają się lokalnie w Web Workerze w przeglądarce. SVGR otrzymuje opcję native: true; zoptymalizowany SVG nie jest wysyłany na serwer.

Elementy nieobsługiwane przez svg-native-svg są usuwane, a SVGR dodaje komentarz taki jak /* SVGR porzucił niektóre elementy nieobsługiwane przez svg-native-svg: filter */.

SVGO wstawia reguły <style>, a następnie zamienia deklaracje stylu w atrybuty, więc styl="stroke:blue" staje się udarem="#00f" (proporcja obrysu). <title> jest domyślnie usuwany.

szerokość, wysokość i viewBox są zachowywane, a {...props} jest rozłożone na głównym pliku Svg, dzięki czemu można zastąpić rozmiar lub kolor.

FAQ

Czy dane wyjściowe wymagają reakcji-native-svg?

Tak. Komponent importuje Svg i komponenty elementów, takie jak Path, Circle i G, z pliku React-native-SVG, który musi być zainstalowany w Twoim projekcie; nie działa ze zwykłymi widokami React Native.

Czy mogę zachować viewBox, aby ikona się skalowała?

Tak. pole usuwania widoku jest domyślnie wyłączone, więc viewBox pozostaje na elemencie Svg. Przekaż rekwizyty szerokości i wysokości, gdy używasz komponentu do jego skalowania.

Co się dzieje z filtrami i gradientami?

Elementy bez odpowiednika w formacie React-Native-SVG, takiego jak filtr, są usuwane z komentarzem na górze pliku. Nieużywane gradienty są usuwane poprzez usuwanie bezużytecznych defensyw SVGO.

Czy mój plik SVG został przesłany?

Nie. Optymalizacja, podgląd i generowanie komponentu działają lokalnie w przeglądarce. Dane SVG nie są wysyłane na serwer konwersji.

Specyfikacje i referencje