ImageSvg

This component displays a vector image (SVG format). Props control the fill color, stroke color and stroke width.

The path(s) are specified using the standard SVG string format. Paths must be specified in a nested SvgPath component instance. Multiple SvgPath children can be specified, each with different stroke and fill parameters. SvgRect children are also supported at this time, with the limited props available in react-native-svg.

To install: npm install reactxp-imagesvg or yarn add reactxp-imagesvg

ImageSvg Props

// See below for supported styles
style: RX.ImageSvgStyleRuleSet | RX.ImageSvgStyleRuleSet[] = [];

// Color and opacity of fill; default values are provided by SVG
fillColor: color;
fillOpacity: number;

// Preserve aspect ratio or stretch?
preserveAspectRatio: boolean = true;

// Color, width and opacity of stroke; default values are provided by SVG
strokeColor: color;
strokeWidth: number;
strokeOpacity: number;

// Tooltip for image
title: string = undefined;

// Bounding box
viewBox: string = undefined;

// Shadow
webShadow: boolean = false; // web-specific

SvgCommon Props

These props apply to all of the sub-SVG-element types below:

// Color and opacity of fill; default values are provided by SVG
fillColor: color;
fillOpacity: number;

// Color, width and opacity of stroke; default values are provided by SVG
strokeColor: color;
strokeWidth: number;
strokeOpacity: number;

SvgPath Props

// Path definition string
d: string = undefined;

SvgRect Props

// Position and dimension information for the rect
x: number;
y: number;
width: number;
height: number;

Styles

Flexbox Styles

View Styles

Transform Styles

Methods

No methods

Sample Usage

import { default as RXImageSvg, SvgPath as RXSvgPath, Types as SvgTypes }
    from 'reactxp-imagesvg';

return (
    <RXImageSvg height={ 20 } width={ 20 }>
        <RXSvgPath
            fillColor={ 'orange' }
            d={ 'M 0 0 h 20 v 20 z' }
        />
        <RXSvgRect
            fillColor={ 'blue' }
            x={ 10 }
            y={ 20 }
            width={ 30 }
            height={ 40 }
        />
    </RXImageSvg>
);