@klarna/react-native-vector-drawable

Android vector drawables in React Native

Usage no npm install needed!

<script type="module">
  import klarnaReactNativeVectorDrawable from 'https://cdn.skypack.dev/@klarna/react-native-vector-drawable';
</script>

README

react-native-vector-drawable

Android vector drawables in React Native.

Build Status License Developed at Klarna

An alternative to react-native-svg with 5x faster renders, lighter bundle and built in dark mode support.

Installation

yarn add @klarna/react-native-vector-drawable

Usage

import VectorDrawable from '@klarna/react-native-vector-drawable';

const Component = () => (
  <VectorDrawable
    resourceName="ic_drawable_name"
    style={{ width: 50, height: 50, tintColor: 'blue' }}
  />
);

Props

Prop Description Default
resourceName Name of the Android vector drawable resource. None
style See Style props. Note: border props are not supported. None

Style props

Prop Description Default
resizeMode Determines how to resize the image when the frame doesn't match the raw image dimensions. Possible values are cover, contain, stretch and center cover
tintColor Changes the color of all the non-transparent pixels to the tintColor. None

How to contribute

See our guide on contributing.

Release History

See our changelog.

License

Copyright © 2021 Klarna Bank AB

For license details, see the LICENSE file in the root of this project.