README
React Native Vector Image
iOS/Android native vector assets generated from SVG.
- Faster render – ~5x faster than
react-native-svg
. - Smaller JS bundle = faster startup.
- Native support for dark mode.
Installation
yarn add react-native-vector-image @klarna/react-native-vector-drawable
Android
Edit android/app/build.gradle
to look like this (without the +):
project.ext.react = [
enableHermes: false, // clean and rebuild if changing
]
apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "../../node_modules/react-native-vector-image/strip_svgs.gradle"
iOS
Open 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 +):
set -e
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
+ ../node_modules/react-native-vector-image/strip_svgs.sh
Usage
Since native vector assets cannot be served over http via metro dev server, they must be generated and compiled into the app bundle.
Step 1: import an .svg file
import VectorImage from 'react-native-vector-image';
const App = () => <VectorImage source={require('./image.svg')} />;
To add dark mode to your image, create a new file with an .dark.svg
extension, ie image.svg
= light and image.dark.svg
= dark.
Step 2: generate native assets
This takes a while as metro has to go through all the code to find the imported SVGs.
yarn react-native-vector-image generate
Argument | Description | Default |
---|---|---|
--entry-file |
Path to the app entrypoint file. | index.js |
--config |
Path to the metro config file. | metro.config.js |
--reset-cache |
Reset metro cache before extracting SVG assets. | false |
--ios-output |
Path to an iOS .xcassets folder. |
ios/AppName/Images.xcassets |
--no-ios-output |
Disable iOS output. | false |
--android-output |
Path to an Android res folder. |
android/app/src/main/res |
--no-android-output |
Disable Android output. | false |
Step 3: recompile
yarn react-native run-ios
# or
yarn react-native run-android
Troubleshooting
command outputs "Error while parsing image.svg" generate
Some optimizations applied by SVGO are not compatible with the SVG parser on Android. Try to re-export the SVG without optimizing it.
warns "Could not find image" <VectorImage />
It 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.
License
MIT License. © Joel Arvidsson 2021
svg2vd
: MIT © 2020 Shopify