Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Import SVG files in your React Native project the same way that you would in a Web application.
| Date | Stars |
|---|---|
| 2026-07-24 | 1734 |
| 2026-07-25 | 1734 |
| 2026-07-28 | 1734 |
| 2026-07-30 | 1734 |
| 2026-08-06 | 1734 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# react-native-svg-transformer [](https://www.npmjs.org/package/react-native-svg-transformer) [](http://npmcharts.com/compare/react-native-svg-transformer?periodLength=30) [](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
<a href="https://facebook.github.io/react-native/"><img src="images/react-native-logo.png" width="160"></a><img src="images/plus.svg" width="100"><img src="images/svg-logo.svg" width="160">
React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like [SVGR](https://github.com/gregberge/svgr/tree/main/packages/webpack) to transform your imported SVG images into React components.
This makes it possible to use the same code for React Native and Web.
## Usage
Import your `.svg` file inside a React component:
```jsx
import Logo from "./logo.svg";
```
You can then use your image as a component:
```jsx
<Logo width={120} height={40} />
```
### Demo / Expo demo (iOS/Android/Web)
- [react-native-svg-example](https://github.com/kristerkari/react-native-svg-example)
- [react-native-svg-expo-example](https://github.com/kristerkari/react-native-svg-expo-example)
## Installation and configuration
### Step 1: Install react-native-svg library
Make sure that you have installed the `react-native-svg` library:
- https://github.com/react-native-community/react-native-svg#installation
### Step 2: Install react-native-svg-transformer library
```sh
npm install --save-dev react-native-svg-transformer
```
or
```sh
yarn add --dev react-native-svg-transformer
```
### Step 3: Configure the react native packager
#### For Expo SDK v41.0.0 or newer
Merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
`metro.config.js`:
```js
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"]
};
return config;
})();
```
---
#### For React Native v0.72.1 or newer
Merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
`metro.config.js`:
```js
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
const config = {
transformer: {
babelTransformerPath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
module.exports = mergeConfig(defaultConfig, config);
```
---
#### For React Native v0.59 or newer
Merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
`metro.config.js`:
```js
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetExts: assetExts.filtExcerpt of 7,946 characters
Read on GitHub
186
129
3
3
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
Viraj Trivedi · @LetsSkribble · India
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:d2f315e0efd7ce71, topic:transformer