import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import { SVG } from "./SVG";
import * as SvgStories from "./SVG.stories";

<Meta of={SvgStories} />

# SVG

SVG is a wrapper for svg components. It can be used to wrap one or more other components while ensuring consistency with the current theme.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { SVG } from "@simplybusiness/mobius";
```

export const Star = (
  <svg viewBox="0 0 51 48">
    <path
      fill="none"
      stroke="#000"
      d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"
    />
  </svg>
);

## Examples

<Story of={SvgStories.Default} />

{/* prettier-ignore */}
```jsx
import { SVG } from "@simplybusiness/mobius";

// Star component is here only for demonstration purposes
export const Star = (
  <svg viewBox="0 0 51 48">
    <path
      fill="none"
      stroke="#000"
      d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"
    />
  </svg>
);

<SVG>{Star}</SVG>
```

## Props

<ArgTypes of={SVG} />

## Component HTML Structure and Class names

The following HTML is rendered for an SVG image:

```html
<svg class="mobius-svg">{children}</svg>
```
