md-glyphs

md-glyphs – это современная React библиотека иконок, разработанная с использованием TypeScript и Vite для сборки. Библиотека содержит более 700 иконок и поддерживает tree shaking, что позволяет оптимизировать размер бандла при использовании в проектах.

Особенности

• React 18+/19+ и TypeScript: Полная типизация компонентов и совместимость с React 19
• Vite: Современная и быстрая сборка в форматы ESM и CommonJS
• Tree Shaking: Оптимизация импорта и уменьшение размера итогового бандла
• Гибкая настройка: Поддержка размеров, цвета, поворота, зеркального отражения и анимаций
• Доступность: Поддержка ARIA атрибутов для улучшения доступности
• Storybook: Интерактивная документация и примеры использования

Совместимость

Библиотека совместима с:

• React 18.x
• React 19.x

Установка

Установите библиотеку через npm или yarn:

npm install md-glyphs
# или
yarn add md-glyphs

Использование

import { HomeIcon, SearchIcon, Bold } from 'md-glyphs';

function App() {
  return (
    <div>
      <HomeIcon size="lg" color="#1a73e8" />
      <SearchIcon size={24} color="red" rotate={45} />
      <Bold flip="horizontal" animate={true} />
    </div>
  );
}

Настройка иконок

Все иконки поддерживают следующие свойства:

| Свойство | Тип | По умолчанию | Описание | | -------- | ------------------------------------------------- | -------------- | ------------------------------ | | size | 'sm' | 'md' | 'lg' | number | 'md' (24px) | Размер иконки | | color | string | 'currentColor' | Цвет иконки | | rotate | number | 0 | Угол поворота в градусах | | flip | 'horizontal' | 'vertical' | 'both' | undefined | undefined | Зеркальное отражение | | animate | boolean | false | Анимация при изменении свойств |

Также принимает все HTML атрибуты для SVGSVGElement

Размеры

Библиотека поддерживает предустановленные размеры:

• sm : 16px
• md : 24px
• lg : 32px Также можно указать произвольный размер числом, например: