Icons

Набор иконок prosto: 1205 SVG, плагин Tailwind и обёртка <Icon> для Vue.

Иконки отдаются не файлами и не спрайтом, а классами Tailwind — i-prosto-<имя>. Отрисовывается только то, что реально использовано в разметке.

Установка

npm i @prleasing/icons

yarn add @prleasing/icons

pnpm install @prleasing/icons

Подключение плагина

import icons from '@prleasing/icons/tailwindcss';

export default {
	plugins: [icons()]
};

После этого класс i-prosto-calendar-date рисует иконку на любом элементе:

<span class="i-prosto-calendar-date"></span>

Размер задаётся font-size, цвет — color: иконка наследует их как текст.

Vue

import { Icon } from '@prleasing/icons/vue';

<Icon name="i-prosto-calendar-date" class="text-2xl text-primary-text" />

@prleasing/prosto реэкспортирует этот же компонент, отдельно подключать не нужно.

Имена в коде

Строковый литерал легко опечатать, поэтому есть карта константами и тип:

import type { AvailableIconName } from '@prleasing/icons';
import { Icons } from '@prleasing/icons';

Icons.CalendarDate; // 'i-prosto-calendar-date'

AvailableIconName — юнион всех доступных имён, так что опечатка ловится тайпчекером.

Добавление иконок

Положите SVG в src/assets/svg/ и перегенерируйте артефакты:

pnpm --filter @prleasing/icons generate

Скрипт прогоняет файлы через svgo и перезаписывает три файла, которые лежат в репозитории: collections.ts (тела иконок), icons.ts (карта констант) и types.d.ts (юнион имён). Править их руками не нужно — они генерируемые.