SVG support for react-native-macos

TypeScript definitions included!

npm install @alloc/react-native-svgkit

1. Add macos/RNSVGKit.xcodeproj to your project

2. Add these frameworks to your project:

• libxml2.tbd
• AppKit.framework
• QuartzCore.framework
• CoreGraphics.framework

import {SVGKView} from '@alloc/react-native-svgkit'

// Control the width without needing to know the aspect ratio.
<SVGKView style={{width: 50}} data="..." />

// Explicit size is optional.
<SVGKView source={require('./foo.svg')} />

Any <View> prop can be passed to <SVGKView>.

When neither props.style.width nor props.style.height is defined, the <SVGKView> fills its parent (while preserving its aspect ratio).

The string of SVG markup. This always overrides the source prop.

Loading of the source prop is cancelled when the data prop is set.

The reference to an SVG, either local or remote.

For local SVGs: require('./foo.svg')

For remote SVGs: { uri: 'https://foo.com/bar.svg' }

Loading is cancelled whenever the source prop changes.

The previous image is cleared immediately whenever the data or source props change.

Override the fillColor and/or strokeColor of every shape in the SVG.

After the SVG is resized to fit its view, it gets aligned based on the difference between its view size and image size.

Defaults to {x: 0.5, y: 0.5} (center alignment)

Called when the source prop begins loading.

Called when either (1) the source prop failed to load, or (2) the SVG markup has a syntax error.

Syntax errors in the data prop are included.

Passed an object like { nativeEvent: { error: string } }

Called once the source prop has been loaded and rendered without error.

Called when the source prop either (1) fails to load or (2) is rendered.