{"id":28705051,"url":"https://github.com/oblador/react-native-vector-image","last_synced_at":"2025-06-14T14:09:35.135Z","repository":{"id":39707174,"uuid":"359205431","full_name":"oblador/react-native-vector-image","owner":"oblador","description":"iOS/Android native vector assets generated from SVG","archived":false,"fork":false,"pushed_at":"2024-11-20T18:20:17.000Z","size":535,"stargazers_count":333,"open_issues_count":3,"forks_count":14,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-14T11:51:43.658Z","etag":null,"topics":["react-native","react-native-component","svg","vector-drawable"],"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/oblador.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-04-18T17:06:42.000Z","updated_at":"2025-05-09T12:29:52.000Z","dependencies_parsed_at":"2022-08-09T15:24:53.598Z","dependency_job_id":"cf0fff76-ad27-4158-ba28-17943283a533","html_url":"https://github.com/oblador/react-native-vector-image","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/oblador/react-native-vector-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/react-native-vector-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259827667,"owners_count":22917714,"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":["react-native","react-native-component","svg","vector-drawable"],"created_at":"2025-06-14T14:09:31.556Z","updated_at":"2025-06-14T14:09:35.126Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003eReact Native Vector Image\u003c/h1\u003e\n  \u003ch3 align=\"center\"\u003eiOS/Android native vector assets generated from SVG.\u003c/h3\u003e\n\u003c/p\u003e\n\n[![Tests](https://github.com/oblador/react-native-vector-image/actions/workflows/tests.yml/badge.svg)](https://github.com/oblador/react-native-vector-image/actions/workflows/tests.yml) [![npm](https://img.shields.io/npm/v/react-native-vector-image.svg)](https://npmjs.com/package/react-native-vector-image)\n\n- Faster render – ~5x faster than `react-native-svg`.\n- Smaller JS bundle = faster startup.\n- Native support for dark mode.\n\n## Installation\n\n```sh\nyarn add react-native-vector-image @klarna/react-native-vector-drawable\n```\n\nFor expo, see [`@zamplyy/react-native-vector-image-plugin`](https://github.com/zamplyy/react-native-vector-image-plugin).\n\n### Android\n\nEdit `android/app/build.gradle` to look like this (without the +):\n\n```diff\nproject.ext.react = [\n    enableHermes: false,  // clean and rebuild if changing\n]\n\napply from: \"../../node_modules/react-native/react.gradle\"\n+ apply from: \"../../node_modules/react-native-vector-image/strip_svgs.gradle\"\n```\n\n### iOS\n\nOpen your project in Xcode, select the _Build Phases_ tab, and edit the `Bundle React Native code and images` script to look like this (without the +):\n\n```diff\nset -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n+ ../node_modules/react-native-vector-image/strip_svgs.sh\n```\n\n\u003cimg width=\"1212\" alt=\"\" src=\"https://user-images.githubusercontent.com/378279/115999935-544c0600-a5ee-11eb-9c59-6fb50e434ed0.png\"\u003e\n\n## Usage\n\nSince native vector assets cannot be served over http via metro dev server, they must be generated and compiled into the app bundle.\n\n### Step 1: import an .svg file\n\n```js\nimport VectorImage from 'react-native-vector-image';\n\nconst App = () =\u003e \u003cVectorImage source={require('./image.svg')} /\u003e;\n```\n\nTo add dark mode to your image, create a new file with an `.dark.svg` extension, ie `image.svg` = light and `image.dark.svg` = dark.\n\n### Step 2: generate native assets\n\nThis takes a while as metro has to go through all the code to find the imported SVGs.\n\n```sh\nyarn react-native-vector-image generate\n```\n\n| Argument               | Description                                                      | Default                       |\n| ---------------------- | ---------------------------------------------------------------- | ----------------------------- |\n| `--entry-file`         | Path to the app entrypoint file.                                 | `index.js`                    |\n| `--config`             | Path to the metro config file.                                   | `metro.config.js`             |\n| `--reset-cache`        | Reset metro cache before extracting SVG assets.                  | `false`                       |\n| `--ios-output`         | Path to an iOS `.xcassets` folder.                               | `ios/AppName/Images.xcassets` |\n| `--no-ios-output`      | Disable iOS output.                                              | `false`                       |\n| `--android-output`     | Path to an Android `res` folder.                                 | `android/app/src/main/res`    |\n| `--no-android-output`  | Disable Android output.                                          | `false`                       |\n| `--current-color`      | Replace any `currentColor` color references in SVGs.             | `#000000`                     |\n| `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs. | `#ffffff`                     |\n\n### Step 3: recompile\n\n```sh\nyarn react-native run-ios\n# or\nyarn react-native run-android\n```\n\n## Troubleshooting\n\n### `generate` command outputs \"Error while parsing image.svg\"\n\nSome optimizations applied by SVGO are not compatible with the SVG parser on Android. Try to re-export the SVG without optimizing it.\n\n### `\u003cVectorImage /\u003e` warns \"Could not find image\"\n\nIt means that the native vector asset does not exist or is out of sync with the SVG. Simply generate the files and recompile the app.\n\n### the `generate` command does not generate any new assets\n\nMake sure your image component is used (imported) somewhere in your code, otherwise the asset generator won't find it.\n\n## License\n\n[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2021\n\n[`svg2vd`](https://github.com/Shopify/svg2vd): MIT © 2020 Shopify\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-vector-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblador%2Freact-native-vector-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-vector-image/lists"}