import { Story, Canvas, Meta, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { colors } from "../../tokens";
import { Svg } from "./Svg";

<Meta title="Components/Images/Svg" component={Svg} />

<ComponentHeading
  componentName="Svg"
  description="Display vector images"
  sourcePath="src/components/Svg/Svg.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { Svg } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Svg">
    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
      <circle cx="50" cy="50" r="40" />
    </Svg>
  </Story>
</Canvas>

## API

`Svg` has no special props; you may apply any valid
[attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).