ИКОН-ОЧКИ

ИКОН-ОЧКИ — офлайн десктоп-приложение для поиска и просмотра SVG-иконок. Работает без интернета: все ~300 000 иконок из 224 наборов хранятся локально.

Собрано на базе Iconify (автор оригинала: Vjacheslav Trushkin) и упаковано в нативное десктоп-приложение с помощью Tauri 2.

---

Содержание

• Обзор
• Сборка десктоп-приложения (Windows)
• Офлайн-просмотрщик в браузере
• Архитектура монорепозитория
• Пакеты
• Компоненты для фреймворков
• CSS-компоненты
• Наборы иконок
• Сборка и тестирование

---

Обзор

Главная цель этого форка — готовое офлайн-приложение: открыл, нашёл иконку, скопировал имя или SVG-код. Интернет не нужен.

Что умеет:

• поиск по ~300 000 иконок из 224 наборов без подключения к сети;
• просмотр SVG, копирование имени, HTML-тега или SVG-кода;
• скачивание SVG и PNG 256×256;
• фильтрация по наборам иконок;
• три размера отображения (S / M / L).

---

Архитектура монорепозитория

Репозиторий использует пространства имён pnpm workspaces. Сборка, линтинг и тесты запускаются рекурсивно по всем пакетам.

iconify/
├── packages/           # Базовые библиотеки (переиспользуются всеми компонентами)
├── iconify-icon/       # Веб-компонент и обёртки для React / Solid
├── components/         # Компоненты с полной интеграцией API: React, Vue 3, Svelte
├── components-css/     # Лёгкие CSS-fallback компоненты: React, Vue 3, Svelte, Solid
├── components-demo/    # Демо-приложения (Next.js, Nuxt 3, React, Svelte, SvelteKit, Vue)
├── components-css-demo/# Демо для CSS-компонентов
├── iconify-icon-demo/  # Демо для веб-компонента
├── icon-sets/          # Данные иконок в формате IconifyJSON (~200 000 иконок)
└── scripts/            # Вспомогательные скрипты (генерация офлайн-бандла и др.)

---

Пакеты

Расположены в

. Являются внутренними зависимостями для компонентов и веб-компонента.

---

Компоненты для фреймворков

Расположены в

. Полнофункциональные компоненты с интеграцией Iconify API: автоматическая загрузка данных иконок, офлайн-режим, SSR.

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

Офлайн-режим

Компоненты поддерживают работу без подключения к сети. Данные иконок импортируются статически из

и передаются в компонент через

addCollection()

:

---

CSS-компоненты

Расположены в

. Лёгкие компоненты, предназначенные для использования совместно с CSS-иконками (Iconify CSS mode) в качестве fallback или вспомогательного слоя. Поддерживают React, Vue 3, Svelte и Solid.

---

Наборы иконок

Расположены в

(субмодуль репозитория iconify/icon-sets). Пакет

@iconify/json

версии 2.2.450 содержит данные в формате IconifyJSON.

Особенности:

• иконки прошли строгую валидацию и очистку (нет скриптов, внешних ресурсов, растровых изображений);
• монотонные иконки используют
  currentColor
  для смены цвета через CSS;
• репозиторий обновляется автоматически несколько раз в неделю.

Все 229 JSON-файлов наборов иконок (~395 МБ) уже включены в этот репозиторий — отдельно клонировать ничего не нужно.

---

Офлайн-просмотрщик

В корне репозитория находится

— браузерный инструмент для локального поиска и просмотра иконок без подключения к интернету. Данные берутся напрямую из

icon-sets/json/

.

Запуск

Открыть в браузере:

Остановка

В терминале с запущенным сервером нажать

.

Фоновый запуск

Сборка не требуется — приложение работает напрямую из файлов репозитория.

---

Сборка и тестирование

Менеджер пакетов: pnpm 10.32.1. Инструменты: TypeScript 5.9, ESLint 9, Vitest 4, tsdown, Vite 7.

Установка зависимостей

Сборка всех пакетов

Запуск тестов

Линтинг

Очистка артефактов сборки

Все команды запускаются рекурсивно по пакетам в порядке:

→

iconify-icon/

→

components/

→

components-css/

.

---

Tauri: упаковка в десктоп-приложение

Подробные варианты реализации описаны в TAURI.md. Краткое резюме:

Для личного использования рекомендуется Вариант 4 (встроенный HTTP-сервер) или Вариант 3 (sidecar-папка) — фронтенд-код не требует изменений, приложение запускается как нативное окно.

Предварительные требования: