import { Direction as IconDirection } from '@yandex-lego/components/Icon/__examples__/direction.tsx'
import iconDirectionSource from '!!raw-loader!@yandex-lego/components/Icon/__examples__/direction.tsx'
import { Glyph as IconGlyph } from '@yandex-lego/components/Icon/__examples__/glyph.tsx'
import iconGlyphSource from '!!raw-loader!@yandex-lego/components/Icon/__examples__/glyph.tsx'
import { Size as IconSize } from '@yandex-lego/components/Icon/__examples__/size.tsx'
import iconSizeSource from '!!raw-loader!@yandex-lego/components/Icon/__examples__/size.tsx'
import { Style as IconStyle } from '@yandex-lego/components/Icon/__examples__/style.tsx'
import iconStyleSource from '!!raw-loader!@yandex-lego/components/Icon/__examples__/style.tsx'
import { Type as IconType } from '@yandex-lego/components/Icon/__examples__/type.tsx'
import iconTypeSource from '!!raw-loader!@yandex-lego/components/Icon/__examples__/type.tsx'

### Тип

С помощью свойства `type`:

<Example
    component={IconType}
    source={iconTypeSource}
/>

### Glyph

С помощью свойства `glyph`:

<Example
    component={IconGlyph}
    source={iconGlyphSource}
/>

### Направление

Чтобы задать направление иконки-стрелки, установите свойство `direction` в одно из следующих значений: `"left"`, `"top"`, `"right"`, `"bottom"`.

<Example
    component={IconDirection}
    source={iconDirectionSource}
/>

### Размер

Чтобы задать размер иконки, используйте свойство `size`.

<Example
    component={IconSize}
    source={iconSizeSource}
/>

### Кастомные стили

Чтобы задать цвет `glyph`-иконки, используйте свойство `style`.

<Example
    component={IconStyle}
    source={iconStyleSource}
/>

### Собственная иконка

Чтобы вставить собственную иконку, используйте свойство `url`. В нем можно указать URL-путь до иконки или содержимое картинки в кодировке base64.

Иконка вставляется как `span` с `background-image`, поэтому, чтобы иконка отображалась правильно, укажите ее ширину и высоту с помощью свойства `style`.

<!-- TODO: example -->