Руководство по импорту SVG в React Native: react-native-svg + SvgXml

SVG (масштабируемая векторная графика) стал одним из ключевых форматов графических ресурсов в разработке React Native. По сравнению с привычными растровыми форматами вроде PNG и JPG, SVG дает масштабирование без потери качества, меньшие размеры файлов и более гибкий контроль над стилями. В этом руководстве разобраны два практических способа импорта и использования SVG в проектах React Native с понятными примерами и рекомендациями по производительности.

Почему использовать SVG в React Native

SVG дает несколько важных преимуществ при разработке мобильных приложений:

Идеальное масштабирование: Графика остается четкой независимо от размера или разрешения экрана
Меньший размер файла: Файлы SVG обычно легче нескольких наборов растровых ресурсов
Динамическая стилизация: цвета, размеры и другие атрибуты можно менять через свойства компонента
Согласованность: Отображается идентично на обеих платформах iOS и Android

Основная зависимость: react-native-svg

Первый шаг к работе с SVG в React Native — установка библиотеки react-native-svg, которая позволяет нативно отображать SVG-файлы в приложении.

npm install react-native-svg
# или
yarn add react-native-svg

Примечание: Для React Native 0.60 и выше связывание обычно автоматическое. Для более ранних версий может потребоваться ручная компоновка нативных модулей.

Способ 1: Использование react-native-svg-transformer

Это наиболее рекомендуемый подход, позволяющий импортировать файлы SVG напрямую как компоненты, как в веб-проектах React.

Установка и настройка

Установите трансформер:

npm install --save-dev react-native-svg-transformer

В metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');
const transformer = require('react-native-svg-transformer');

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  return {
    ...defaultConfig,
    transformer: {
      ...defaultConfig.transformer,
      babelPlugins: ['react-native-svg-transformer'],
    },
  };
})();

Использование

import MyIcon from './my-icon.svg';

function App() {
  return (
    <View>
      <MyIcon width={24} height={24} fill="red" />
    </View>
  );
}

Способ 2: Использование SvgXml

Для получения SVG из строки или динамической загрузки:

import { SvgXml } from 'react-native-svg';

const svgString = `<svg width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="red" />
</svg>`;

function App() {
  return <SvgXml xml={svgString} width={24} height={24} />;
}

Выбор способа

Статический импорт: используйте react-native-svg-transformer для файлов, являющихся частью кода
Динамический рендеринг: используйте SvgXml для файлов, загружаемых из сети или хранилища

Резюме

Оба способа работают хорошо. Выберите тот, который лучше подходит под структуру проекта и способ доставки графики в приложении.

Руководство по импорту SVG в React Native: react-native-svg + SvgXml