import { useState } from 'react'
import Icon from '../Icon'
import Row from '../Row'
import Content from '../Content'
import Br from '../Br'
import TextInput from '../forms/TextInput'
import {
faHouseUser,
faTable,
faShareAlt
} from '@fortawesome/free-solid-svg-icons'
import CustomIconExample from './CustomIconExample.svg'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'
# Icon (иконка)
Иконки - это визуальные символы, используемые для представления идей, объектов или действий. Они передают посыл с первого взгляда, обеспечивают интерактивность и привлекают внимание к важной информации.
```jsx
import { Icon } from '@startupjs/ui'
```
## Простой пример
Компонент использует библиотеку `@fortawesome/react-native-fontawesome` для иконок.
```jsx
import { faHouseUser } from '@fortawesome/free-solid-svg-icons'
```
```jsx example
return (
)
```
## Кастомная иконка
Чтобы использовать свою собственную иконку необходимо передать валидную `svg` иконку в свойство `icon`
```jsx
import CustomIconExample from './CustomIconExample.svg'
```
```jsx example
return (
)
```
## Размеры
Размер можно изменить с помощью свойства `size`. Значение по умолчанию `m`. Предопределенные значения размеров иконок - `xs`,` s`, `m`,` l`, `xl`, ` xxl`. Размер также может быть сколь угодно увеличен или уменьшен путем передачи числа в свойство `size`. Для собственных иконок можно задать разный размер высоты и ширины используя стили.
```jsx
import {
faHouseUser,
faTable,
faShareAlt
} from '@fortawesome/free-solid-svg-icons'
import CustomIconExample from './CustomIconExample.svg'
```
```jsx example
const [numSize, setNumSize] = useState('80')
return (
setNumSize(value)}
/>
)
```
## Цвета
Цвет можно установить, указав цвет в StyleSheet.
В `.styl` файле
```stylus
.icon
&.primary
color: $UI.colors.primary
&.success
color $UI.colors.success
&.orange
color $UI.colors.additional0
```
```jsx
import {
faHouseUser,
faTable,
faShareAlt
} from '@fortawesome/free-solid-svg-icons'
```
```jsx example
return (
)
```
## Sandbox