https://github.com/alloc/react-native-svgkit
SVG support for react-native-macos
https://github.com/alloc/react-native-svgkit
react-native react-native-macos svgkit
Last synced: 9 months ago
JSON representation
SVG support for react-native-macos
- Host: GitHub
- URL: https://github.com/alloc/react-native-svgkit
- Owner: alloc
- License: mit
- Archived: true
- Created: 2019-03-09T01:21:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-21T03:18:08.000Z (over 2 years ago)
- Last Synced: 2025-04-20T23:02:47.882Z (10 months ago)
- Topics: react-native, react-native-macos, svgkit
- Language: Objective-C
- Size: 436 KB
- Stars: 10
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @alloc/react-native-svgkit
SVG support for [react-native-macos](https://github.com/ptmt/react-native-macos)
TypeScript definitions included!
## Install
```sh
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
## Usage
```ts
import {SVGKView} from '@alloc/react-native-svgkit'
// Control the width without needing to know the aspect ratio.
// Explicit size is optional.
```
Any `` prop can be passed to ``.
When neither `props.style.width` nor `props.style.height` is defined, the `` fills its parent (while preserving its aspect ratio).
### props.data
The string of SVG markup. This always overrides the `source` prop.
Loading of the `source` prop is cancelled when the `data` prop is set.
### props.source
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.
### props.tintColor
Override the `fillColor` and/or `strokeColor` of every shape in the SVG.
### props.anchorPoint
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)
### props.onLoadStart
Called when the `source` prop begins loading.
### props.onError
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 } }`
### props.onLoad
Called once the `source` prop has been loaded and rendered without error.
### props.onLoadEnd
Called when the `source` prop either (1) fails to load or (2) is rendered.