Icon 🔗
Компонент для отображения иконок с возможностью конфигурирования размера и отступов
Пример использования:
Исходный код для примера выше:
<Icon name="Coins" width={64} height={64} margin={{ right: 1 }} />
<Icon name="Bank" width={64} height={64} margin={{ right: 1 }} />
<Icon name="ChartLineUp" width={64} height={64} margin={{ right: 1 }} />Параметры:
name string
required
Название файла иконки (без пути до директории и расширения)
path string
Путь до директории с иконками
Значение по умолчанию: /img/icons/
extension enum
Расширение файла иконки
Поддерживаются пять стандартных значений: svg, png, jpg, jpeg и webp
Значение по умолчанию: svg
alt string
Аналог стандартного атрибута alt
width number
Ширина иконки (в px)
Значение по умолчанию: 32
height number
Высота иконки (в px)
Значение по умолчанию: 32
margin object
Объект, описывающий отступы компонента. Имеет следующие свойства:
x – отступ по горизонтали
y – отступ по вертикали
top – отступ сверху
bottom – отступ снизу
left – отступ слева
right – отступ справа
Все значения могут иметь один из двух типов: string или number
В случае, если значение одного из свойств имеет тип number, ему будет добавлена единица измерения em
Пример: margin={{ top: 1, x: 'auto' }} будет преобразовано в margin: 1em auto 0
node HTMLElement
Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)
id string
Аналог стандартного атрибута id
className string
Аналог стандартного атрибута class