@kotolis/react-universal-svg v0.1.8
react-universal-svg
The flexible universal SVG component that renders with DOM and react-native (expo) in an identical way.
Installation
npm i --save @kotolis/react-universal-svg
Usage
For web, android, ios:
import React from 'react';
import Svg from '@kotolis/react-universal-svg';
Svg.addModules({
mock: require('./assets/mock.svg'),
front: require('./assets/card_front.svg'),
});
const SampleComponentWithForSvg = () => (
<React.Fragment>
{/* local svg with color sample */}
<Svg
src="mock"
style={{ color: 'red', width: 100 }}
/>
{/* local svg with color and params sample (just put ${a} inside your svg file) */}
<Svg
src="front" style={{ color: 'red', width: 100 }}
params={{ a: 'A' }}
/>
{/* remote svg sample */}
<Svg
src="https://upload.wikimedia.org/wikipedia/commons/4/42/Sample-image.svg"
style={{ width: 100 }}
/>
</React.Fragment>
);
What is this?
This library attempts to propose SVG component loader with:
1. the universal way of loading and usage SVG files on the web and native platforms thanks for Expo and react-primitives.
2. possibility to apply parameters for interactions on the component level and making your SVG more flexible.
3. possibility to use currentColor
as a value on the properties for native platforms, that doesn't provided by Expo's Svg component, and on the web platform, where doesn't allow to do this by DOM using <img src>
way.
4. determination of the correct SVG dimensions even if you are applying scale
transformation on it.