@svgr/babel-plugin-transform-react-native-svg

What is @svgr/babel-plugin-transform-react-native-svg?

@svgr/babel-plugin-transform-react-native-svg is a Babel plugin that transforms SVG imports into React Native components. This allows developers to use SVG files as React components in a React Native project, making it easier to manage and manipulate SVG assets.

What are @svgr/babel-plugin-transform-react-native-svg's main functionalities?

Transform SVG to React Native Component

This feature allows you to import an SVG file and use it as a React Native component. The SVG file is transformed into a React component that can be used within your React Native application.

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

const App = () => (
  <View>
    <MyIcon width={100} height={100} />
  </View>
);

Customizing SVG Properties

You can customize the properties of the SVG component, such as width, height, and fill color, directly in your React Native code.

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

const App = () => (
  <View>
    <MyIcon width={100} height={100} fill="blue" />
  </View>
);

Other packages similar to @svgr/babel-plugin-transform-react-native-svg

react-native-svg

react-native-svg is a library that provides SVG support for React Native. It allows you to create and manipulate SVG elements directly in your React Native code. Unlike @svgr/babel-plugin-transform-react-native-svg, which transforms SVG files into React components, react-native-svg provides a set of components and methods to work with SVGs programmatically.

react-native-svg-transformer

react-native-svg-transformer is a library that allows you to import SVG files in a React Native project and use them as components. It works similarly to @svgr/babel-plugin-transform-react-native-svg but is specifically designed to work with the Metro bundler used in React Native projects.

README

@svgr/babel-plugin-transform-react-native-svg

Install

npm install --save-dev @svgr/babel-plugin-transform-react-native-svg

Usage

.babelrc

{
  "plugins": ["@svgr/babel-plugin-transform-react-native-svg"]
}

License

MIT