@divanru/icons v1.18.0

Divan.ru Icons

Набор иконок, представленный в виде React-компонентов.

Установка

npm i @divanru/icons

Пример использования

import Icon16Back from '@divanru/icons/dist/16/back';

<Icon16Back />

Кастомные размеры

Иногда может потребоваться установить для иконки другой размер. Для этого можно передать свойства width и height, ширина и высота в пикселях. Они должны быть числовыми значениями.

<Icon16Back width={20} height={20} />

Стилизация

Иконки можно красить. Для этого к элементу svg применено правило fill: currentColor. Иными словами, цвет иконки соответствует текущему значению css-свойства color.

Наглядное представление

Весь набор иконок можно увидеть наглядно, для этого нужно:

• запустить команду npm run build
• открыть в браузере файл docs/index.html

Нажав на любую иконку в наборе, скопируется полный и единственно правильно способ импортировать данную иконку для использования в проекте

Как добавить/изменить иконку?

Для того чтобы добавить иконку нужно положить её в директорию src/svg/{высота}/, причём высота зависит от viewBox иконки. Название файла иконки должно быть в формате название_иконки_высота.svg. После чего мы можем запустить сборку npm run build и проверить что иконка отображается правильно, а её цвет можно изменять. И только после этого мы можем опубликовать изменения, выполнив команду npm run release 1.0.0, указав новую версию для пакета.