{/* icon.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './icon.stories.json';
import templateSource from './icon.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />



<Primary />

## Properties
<Controls />

## Attributes:
* `attributes`: HTML attributes for the icon element.

## Slots:
* N/A

<Stories of={comStories} />

## Examples:

### Example 1
Bootstrap Icon for the stroke.

```
{% include 'vartheme_bs5:icon' with { name: 'bi-chevron-right'} only %}
```

### Example 2
Bootstrap Icon for a stroke and the right to left (RTL) replacement for it.

```
{% include 'vartheme_bs5:icon' with { name: 'bi-chevron-right', rtl: 'bi-chevron-left', lang_dir: lang_dir} only %}
```

```
{% include 'vartheme_bs5:icon' with { name: 'bi-chevron-right', rtl: 'bi-chevron-left'} %}
```

### Example 3
Bootstrap Icon for chevron with double down stokes and a role fo scroll.

```
{% include 'vartheme_bs5:icon' with { name: 'bi-chevron-double-down', role: 'scroll' } only %}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
