developer-icons

Отобранная коллекция логотипов технологий и инструментов разработчика в виде оптимизированных SVG-компонентов для проектов на React, Next.js и TypeScript. Каждая иконка сжата с помощью SVGO для минимального размера файла и сохраняет чёткость при любом разрешении. Библиотека также позволяет скачивать SVG напрямую с сайта для использования в графических редакторах вроде Figma.

Как это устроено

Иконки хранятся в репозитории как отдельные SVG-файлы. Сборочный пайплайн запускает SVGO для оптимизации и SVGSON для преобразования SVG в JSON, после чего генерирует именованные React-компоненты, публикуемые в npm. Сам сайт написан на Astro и Tailwind CSS, выступая одновременно документацией и интерактивной галереей иконок.

Визуальный стиль вдохновлён Lucide - все иконки следуют единым правилам оформления для единообразия толщины линий и отступов во всём наборе. Доступны варианты для светлой и тёмной темы, а также версии с текстовым логотипом (wordmark).

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

Установка из npm:

npm i developer-icons

Импорт именованных компонентов:

import { ReactIcon, TypeScriptIcon, GoIcon } from "developer-icons";

export default function TechStack() {
  return (
    <div>
      <ReactIcon size={48} />
      <TypeScriptIcon size={48} />
      <GoIcon size={48} />
    </div>
  );
}

Компоненты принимают пропсы size, color и strokeWidth.

Ограничения

• Только React/Next.js - нет экспорта для Vue, Svelte или фреймворко-независимых веб-компонентов
• Набор иконок пополняется сообществом, поэтому покрытие нишевых технологий может различаться

1,900+ звёзд · лицензия MIT · github.com/xandemon/developer-icons