Comment on page

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 i react-ult-ext-imagesvg
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