Перейти к содержимому
Numio

Преобразование SVG для приложений React Native — Numio

Превращает SVG-разметку в компонент React Native, который импортирует Svg, Path, G и другие элементы из react-native-svg. Сначала выполняется оптимизация SVGO, затем атрибуты становятся JSX-props, а числовые значения — числами (strokeWidth={2}).

Преобразование иконки, экспортированной из Figma или Sketch, в компонент для приложения на Expo или React Native с react-native-svg.

SVG

React Native

Когда пригодится

  • Преобразование иконки, экспортированной из Figma или Sketch, в компонент для приложения на Expo или React Native с react-native-svg.
  • Уменьшение раздутого SVG (заголовки, метаданные редактора, неиспользуемые defs) перед поставкой в виде нативного компонента.

Как пользоваться

  1. Вставьте SVG-разметку в редактор SVG или перетащите файл .svg; ввод должен быть валидным SVG, иначе появится сообщение "This is not a valid svg code."
  2. Откройте SVGO Settings, чтобы отключить оптимизацию или переключить отдельные плагины, такие как remove title, remove view box или merge paths; превью под редактором сравнивает исходный и оптимизированный SVG.
  3. Скопируйте результат с панели React Native в файл .js или .tsx и установите react-native-svg в приложение.

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>

Компонент 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

Подробности и ограничения

Оптимизация SVGO выполняется в Web Worker в вашем браузере, а генерация JSX — на сервере: оптимизированный SVG отправляется на /api/svg-to-jsx, где SVGR запускается с native: true.

Элементы, которые react-native-svg не поддерживает, удаляются, и SVGR добавляет комментарий вида /* SVGR has dropped some elements not supported by react-native-svg: filter */.

SVGO встраивает правила <style> inline, а затем превращает объявления style в атрибуты, так что style="stroke:blue" становится stroke="#00f" (prop stroke). <title> удаляется по умолчанию.

width, height и viewBox сохраняются, а {...props} разворачивается на корневом Svg, так что можно переопределить размер или цвет.

FAQ

Нужен ли для результата react-native-svg?

Да. Компонент импортирует Svg и компоненты элементов, такие как Path, Circle и G, из react-native-svg, который должен быть установлен в проекте; с обычными View из React Native он не работает.

Можно ли сохранить viewBox, чтобы иконка масштабировалась?

Да. remove view box по умолчанию выключен, поэтому viewBox остаётся на элементе Svg. Передавайте props width и height при использовании компонента, чтобы масштабировать его.

Что происходит с фильтрами и градиентами?

Элементы без аналога в react-native-svg, например filter, удаляются, а в начале файла добавляется комментарий. Неиспользуемые градиенты удаляет плагин SVGO remove useless defs.

Загружается ли мой SVG на сервер?

Оптимизированный SVG отправляется на эндпоинт /api/svg-to-jsx этой страницы для генерации компонента; оптимизация и превью остаются в вашем браузере.

Спецификации и справка