{"id":4330,"url":"https://github.com/kristerkari/react-native-svg-transformer","last_synced_at":"2025-05-13T15:09:14.173Z","repository":{"id":40589329,"uuid":"143336758","full_name":"kristerkari/react-native-svg-transformer","owner":"kristerkari","description":"Import SVG files in your React Native project the same way that you would in a Web application.","archived":false,"fork":false,"pushed_at":"2025-05-02T17:07:30.000Z","size":818,"stargazers_count":1659,"open_issues_count":79,"forks_count":118,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-02T18:19:18.212Z","etag":null,"topics":["loader","react-native","react-native-svg","svg","transformer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristerkari.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-02T19:29:21.000Z","updated_at":"2025-05-02T17:07:34.000Z","dependencies_parsed_at":"2024-01-08T01:02:53.018Z","dependency_job_id":"852ddb77-5291-46b5-a28b-396da8763e79","html_url":"https://github.com/kristerkari/react-native-svg-transformer","commit_stats":{"total_commits":232,"total_committers":25,"mean_commits":9.28,"dds":"0.47413793103448276","last_synced_commit":"d327eb7cac46414f41dcbb79343caeb664723ee7"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-svg-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-svg-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-svg-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-svg-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristerkari","download_url":"https://codeload.github.com/kristerkari/react-native-svg-transformer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969238,"owners_count":21992262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","react-native","react-native-svg","svg","transformer"],"created_at":"2024-01-05T20:17:08.454Z","updated_at":"2025-05-13T15:09:09.154Z","avatar_url":"https://github.com/kristerkari.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-svg-transformer [![NPM version](http://img.shields.io/npm/v/react-native-svg-transformer.svg)](https://www.npmjs.org/package/react-native-svg-transformer) [![Downloads per month](https://img.shields.io/npm/dm/react-native-svg-transformer.svg)](http://npmcharts.com/compare/react-native-svg-transformer?periodLength=30) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\n\u003ca href=\"https://facebook.github.io/react-native/\"\u003e\u003cimg src=\"images/react-native-logo.png\" width=\"160\"\u003e\u003c/a\u003e\u003cimg src=\"images/plus.svg\" width=\"100\"\u003e\u003cimg src=\"images/svg-logo.svg\" width=\"160\"\u003e\n\nReact 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.\n\nThis makes it possible to use the same code for React Native and Web.\n\n## Usage\n\nImport your `.svg` file inside a React component:\n\n```jsx\nimport Logo from \"./logo.svg\";\n```\n\nYou can then use your image as a component:\n\n```jsx\n\u003cLogo width={120} height={40} /\u003e\n```\n\n### Demo / Expo demo (iOS/Android/Web)\n\n- [react-native-svg-example](https://github.com/kristerkari/react-native-svg-example)\n- [react-native-svg-expo-example](https://github.com/kristerkari/react-native-svg-expo-example)\n\n## Installation and configuration\n\n### Step 1: Install react-native-svg library\n\nMake sure that you have installed the `react-native-svg` library:\n\n- https://github.com/react-native-community/react-native-svg#installation\n\n### Step 2: Install react-native-svg-transformer library\n\n```sh\nnpm install --save-dev react-native-svg-transformer\n```\n\nor\n\n```sh\nyarn add --dev react-native-svg-transformer\n```\n\n### Step 3: Configure the react native packager\n\n#### For Expo SDK v41.0.0 or newer\n\nMerge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).\n\n`metro.config.js`:\n\n```js\nconst { getDefaultConfig } = require(\"expo/metro-config\");\n\nmodule.exports = (() =\u003e {\n  const config = getDefaultConfig(__dirname);\n\n  const { transformer, resolver } = config;\n\n  config.transformer = {\n    ...transformer,\n    babelTransformerPath: require.resolve(\"react-native-svg-transformer/expo\")\n  };\n  config.resolver = {\n    ...resolver,\n    assetExts: resolver.assetExts.filter((ext) =\u003e ext !== \"svg\"),\n    sourceExts: [...resolver.sourceExts, \"svg\"]\n  };\n\n  return config;\n})();\n```\n\n---\n\n#### For React Native v0.72.1 or newer\n\nMerge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).\n\n`metro.config.js`:\n\n```js\nconst { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n\nconst defaultConfig = getDefaultConfig(__dirname);\nconst { assetExts, sourceExts } = defaultConfig.resolver;\n\n/**\n * Metro configuration\n * https://reactnative.dev/docs/metro\n *\n * @type {import('metro-config').MetroConfig}\n */\nconst config = {\n  transformer: {\n    babelTransformerPath: require.resolve(\n      \"react-native-svg-transformer/react-native\"\n    )\n  },\n  resolver: {\n    assetExts: assetExts.filter((ext) =\u003e ext !== \"svg\"),\n    sourceExts: [...sourceExts, \"svg\"]\n  }\n};\n\nmodule.exports = mergeConfig(defaultConfig, config);\n```\n\n---\n\n#### For React Native v0.59 or newer\n\nMerge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).\n\n`metro.config.js`:\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () =\u003e {\n  const {\n    resolver: { sourceExts, assetExts }\n  } = await getDefaultConfig();\n  return {\n    transformer: {\n      babelTransformerPath: require.resolve(\n        \"react-native-svg-transformer/react-native\"\n      )\n    },\n    resolver: {\n      assetExts: assetExts.filter((ext) =\u003e ext !== \"svg\"),\n      sourceExts: [...sourceExts, \"svg\"]\n    }\n  };\n})();\n```\n\n#### React Native projects using Expo modules\n\nSome React Native projects are using [Expo modules](https://docs.expo.dev/bare/installing-expo-modules/) without using [expo-cli](https://docs.expo.dev/more/expo-cli/).\n\nIn such projects Expo's transformer is selected by default, and can be overwritten to correctly use React Native's transformer by adding `react-native` to the require path:\n\n```diff\n-require.resolve(\"react-native-svg-transformer\")\n+require.resolve(\"react-native-svg-transformer/react-native\")\n```\n\nYou can also force Expo's transformer to always be used:\n\n```diff\n-require.resolve(\"react-native-svg-transformer\")\n+require.resolve(\"react-native-svg-transformer/expo\")\n```\n\n### Using TypeScript\n\nIf you are using TypeScript, you need to add this to your `declarations.d.ts` file (create one if you don't have one already):\n\n```ts\ndeclare module \"*.svg\" {\n  import React from \"react\";\n  import { SvgProps } from \"react-native-svg\";\n  const content: React.FC\u003cSvgProps\u003e;\n  export default content;\n}\n```\n\n### Configuring SVGR (how SVG images get transformed)\n\n[SVGR](https://github.com/gregberge/svgr) has a configuration file, which makes it possible for you to customize how SVG images get transformed to React/React Native.\n\nRead more about the configuration options: [Configuring SVGR](https://react-svgr.com/docs/configuration-files/) and [SVGR options](https://react-svgr.com/docs/options/).\n\nFor example, if you want to change SVG image's fill color from `red` to `currentColor` (keep in mind that this will be used for all SVG images in your app).\n\n`.svgrrc` (create the file in your project's root folder if it does not exist)\n\n```json\n{\n  \"replaceAttrValues\": {\n    \"red\": \"currentColor\"\n  }\n}\n```\n\n#### Changing SVG fill color in JS Code\n\nEdit your `.svgrrc` file and include a line for `replaceAttrValues` that matching a hex code to `{props.fill}`\n\n```json\n{\n  \"replaceAttrValues\": {\n    \"#000\": \"{props.fill}\"\n  }\n}\n```\n\nAnd then make sure your path tag inside the SVG file `fill` attribute is the hex code (in this case `#000`).\n\n```xml\n\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M2.965 6.0925C4.045 8.215 ...\" fill=\"#000\"/\u003e\n\u003c/svg\u003e\n```\n\nYou can then use your image as a component:\n\n```jsx\n\u003cLogo width={120} height={40} fill={\"any color\"} /\u003e\n```\n\n### Usage with Jest\n\nTo use `Jest` to test your React Native components that import `.svg` images, you need to add this configuration that mocks the SVG images that are transformed to React components:\n\n`__mocks__/svgMock.js`:\n\n```js\nmodule.exports = \"SvgMock\";\n```\n\nThen, depending on where you have your Jest configuration:\n\n`package.json`:\n\n```json\n{\n  \"jest\": {\n    \"moduleNameMapper\": {\n      \"\\\\.svg\": \"\u003crootDir\u003e/__mocks__/svgMock.js\"\n    }\n  }\n}\n```\n\nor\n\n`jest.config.js`:\n\n```js\nmodule.exports = {\n  moduleNameMapper: {\n    \"\\\\.svg\": \"\u003crootDir\u003e/__mocks__/svgMock.js\"\n  }\n};\n```\n\n### Rendering custom fonts in iOS\n\nAt the moment [react-native-svg](https://github.com/react-native-svg/react-native-svg#readme) does not support custom font families in iOS right out of the box. A workaround is to take your `.svg` with custom fonts and [convert it to outlines](https://www.sketch.com/docs/text/#converting-text-to-vector-shapes). This will replace `text` tags for `path` tags in your `.svg` file.\n\n### Dependencies\n\nIn addition to React Native, this transformer depends on the following libraries:\n\n- [react-native-svg](https://github.com/react-native-svg/react-native-svg#readme)\n- [@svgr/core](https://github.com/gregberge/svgr/tree/main/packages/core#readme)\n- [@svgr/plugin-jsx](https://github.com/gregberge/svgr/tree/main/packages/plugin-jsx#readme)\n- [@svgr/plugin-svgo](https://github.com/gregberge/svgr/tree/main/packages/plugin-svgo#readme)\n- [path-dirname](https://github.com/gulpjs/path-dirname#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-svg-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Freact-native-svg-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-svg-transformer/lists"}