# SVG \*

### Installation

{% hint style="info" %}
 This component is not included by default, to use it import the following package:
{% endhint %}

{% tabs %}
{% tab title="NPM" %}

```bash
$ npm i react-ult-ext-imagesvg
```

{% endtab %}

{% tab title="Yarn" %}

```
yarn add react-ult-ext-imagesvg
```

{% endtab %}
{% endtabs %}

### Styles

* Flexbox Styles
* View Styles
* Transform Styles

### Svg Props

| Name                    | Type                                             | Description                                                                                             |
| ----------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| **style**               | `ImageSvgStyleRuleSet \| ImageSvgStyleRuleSet[]` | <ul><li>See below for supported styles</li></ul>                                                        |
| **fillColor**           | `color`                                          | <ul><li>Color and opacity of fill</li><li>Default values are provided by SVG</li></ul>                  |
| **fillOpacity**         | `number`                                         | <ul><li>Color and opacity of fill</li><li>Default values are provided by SVG</li></ul>                  |
| **preserveAspectRatio** | `boolean`                                        | <ul><li> Preserve aspect ratio or stretch?</li></ul>                                                    |
| **strokeColor**         | `color`                                          | <ul><li>Color</li><li>Width and opacity of stroke</li><li>Default values are provided by SVG</li></ul>  |
| **strokeWidth**         | `number`                                         | <ul><li>Color</li><li>Width and opacity of stroke</li><li>Default values are provided by SVG</li></ul>  |
| **strokeOpacity**       | `number`                                         | <ul><li>Color</li><li>Width and opacity of stroke;</li><li>Default values are provided by SVG</li></ul> |
| **title**               | `string`                                         | <ul><li>Tooltip for image</li></ul>                                                                     |
| **viewBox**             | `string`                                         | <ul><li>Bounding box</li></ul>                                                                          |
| **webShadow**           | `boolean`                                        | <ul><li>Shadow</li></ul>                                                                                |

### SvgCommon Props

| Name              | Type     | Description                                                                                             |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------- |
| **fillColor**     | `color`  | <ul><li>Color and opacity of fill</li><li>Default values are provided by SVG</li></ul>                  |
| **fillOpacity**   | `number` | <ul><li>Color and opacity of fill</li><li>Default values are provided by SVG</li></ul>                  |
| **strokeColor**   | `color`  | <ul><li>Colo</li><li>Width and opacity of stroke</li><li>Default values are provided by SVG</li></ul>   |
| **strokeWidth**   | `number` | <ul><li> Color</li><li>Width and opacity of stroke</li><li>Default values are provided by SVG</li></ul> |
| **strokeOpacity** | `number` | <ul><li>Color</li><li>Width and opacity of stroke</li><li>Default values are provided by SVG</li></ul>  |

### SvgPath Props

| Name  | Type     | Description                              |
| ----- | -------- | ---------------------------------------- |
| **d** | `string` | <ul><li>Path definition string</li></ul> |

### SvgRect Props

| Name       | Type     | Description                                                       |
| ---------- | -------- | ----------------------------------------------------------------- |
| **x**      | `number` | <ul><li>Position and dimension information for the rect</li></ul> |
| **y**      | `number` | <ul><li>Position and dimension information for the rect</li></ul> |
| **width**  | `number` | <ul><li>Position and dimension information for the rect</li></ul> |
| **height** | `number` | <ul><li>Position and dimension information for the rect</li></ul> |