SVG *

This component displays a vector image. Supported properties are the path, fill color, stroke color, and stroke width.

Installation

This component is not included by default, to use it import the following package:

NPM
Yarn
NPM
$ npm i react-ult-ext-imagesvg
Yarn
yarn add react-ult-ext-imagesvg

Styles

  • Flexbox Styles

  • View Styles

  • Transform Styles

Svg Props

Name

Type

Description

style

ImageSvgStyleRuleSet | ImageSvgStyleRuleSet[]

  • See below for supported styles

fillColor

color

  • Color and opacity of fill

  • Default values are provided by SVG

fillOpacity

number

  • Color and opacity of fill

  • Default values are provided by SVG

preserveAspectRatio

boolean

  • Preserve aspect ratio or stretch?

strokeColor

color

  • Color

  • Width and opacity of stroke

  • Default values are provided by SVG

strokeWidth

number

  • Color

  • Width and opacity of stroke

  • Default values are provided by SVG

strokeOpacity

number

  • Color

  • Width and opacity of stroke;

  • Default values are provided by SVG

title

string

  • Tooltip for image

viewBox

string

  • Bounding box

webShadow

boolean

  • Shadow

SvgCommon Props

Name

Type

Description

fillColor

color

  • Color and opacity of fill

  • Default values are provided by SVG

fillOpacity

number

  • Color and opacity of fill

  • Default values are provided by SVG

strokeColor

color

  • Colo

  • Width and opacity of stroke

  • Default values are provided by SVG

strokeWidth

number

  • Color

  • Width and opacity of stroke

  • Default values are provided by SVG

strokeOpacity

number

  • Color

  • Width and opacity of stroke

  • Default values are provided by SVG

SvgPath Props

Name

Type

Description

d

string

  • Path definition string

SvgRect Props

Name

Type

Description

x

number

  • Position and dimension information for the rect

y

number

  • Position and dimension information for the rect

width

number

  • Position and dimension information for the rect

height

number

  • Position and dimension information for the rect