Приложение A: Реестр иконок Open WebUI
Общие параметры
Все иконки платформы ADOLF используют библиотеку Lucide Icons со следующими едиными параметрами:
| Параметр | Значение |
|---|---|
| Размер | 24 × 24 px |
| Stroke width | 1.5 px |
| Stroke linecap | round |
| Stroke linejoin | round |
| Fill | none |
| Stroke | currentColor |
Стандартный stroke-width Lucide — 2 px. В ADOLF используется 1.5 px для визуально более лёгкого и современного восприятия иконок в интерфейсе Open WebUI.
Системные иконки
Иконки, используемые для общих элементов интерфейса Open WebUI.
Логотип приложения
| Назначение | Основной логотип ADOLF в Open WebUI |
| Lucide name | bot-message-square |
| Пакет | lucide (основной) |
| React import | BotMessageSquare |
| Ссылка | lucide.dev/icons/bot-message-square |
html
<i data-lucide="bot-message-square" stroke-width="1.5"></i>Новый чат
| Назначение | Кнопка создания нового чата в sidebar |
| Lucide name | message-square-more |
| Пакет | lucide (основной) |
| React import | MessageSquareMore |
| Ссылка | lucide.dev/icons/message-square-more |
html
<i data-lucide="message-square-more" stroke-width="1.5"></i>Иконки модулей
Knowledge
| Модуль | Knowledge — база знаний, RAG |
| Lucide name | database |
| Пакет | lucide (основной) |
| React import | Database |
| Ссылка | lucide.dev/icons/database |
html
<i data-lucide="database" stroke-width="1.5"></i>Content Factory
| Модуль | Content Factory — генерация SEO-контента |
| Lucide name | shirt |
| Пакет | lucide (основной) |
| React import | Shirt |
| Ссылка | lucide.dev/icons/shirt |
html
<i data-lucide="shirt" stroke-width="1.5"></i>CFO
| Модуль | CFO — финансовая аналитика |
| Lucide name | chart-candlestick |
| Пакет | lucide (основной) |
| React import | ChartCandlestick |
| Ссылка | lucide.dev/icons/chart-candlestick |
html
<i data-lucide="chart-candlestick" stroke-width="1.5"></i>Reputation
| Модуль | Reputation — управление отзывами |
| Lucide name | thumbs-up |
| Пакет | lucide (основной) |
| React import | ThumbsUp |
| Ссылка | lucide.dev/icons/thumbs-up |
html
<i data-lucide="thumbs-up" stroke-width="1.5"></i>Watcher
| Модуль | Watcher — мониторинг конкурентов |
| Lucide name | hat-glasses |
| Пакет | lucide (основной) |
| React import | HatGlasses |
| Ссылка | lucide.dev/icons/hat-glasses |
html
<i data-lucide="hat-glasses" stroke-width="1.5"></i>Marketing
| Модуль | Marketing — автоматизация рекламы |
| Lucide name | target |
| Пакет | lucide (основной) |
| React import | Target |
| Ссылка | lucide.dev/icons/target |
html
<i data-lucide="target" stroke-width="1.5"></i>Scout
| Модуль | Scout — предиктивная аналитика |
| Lucide name | binoculars |
| Пакет | lucide (основной) |
| React import | Binoculars |
| Ссылка | lucide.dev/icons/binoculars |
html
<i data-lucide="binoculars" stroke-width="1.5"></i>Lex
| Модуль | Lex — юридический мониторинг |
| Lucide name | scale |
| Пакет | lucide (основной) |
| React import | Scale |
| Ссылка | lucide.dev/icons/scale |
html
<i data-lucide="scale" stroke-width="1.5"></i>Logistic
| Модуль | Logistic — оптимизация складов |
| Lucide name | truck |
| Пакет | lucide (основной) |
| React import | Truck |
| Ссылка | lucide.dev/icons/truck |
html
<i data-lucide="truck" stroke-width="1.5"></i>Office
| Модуль | Office — мониторинг AI-агентов |
| Lucide name | building-2 |
| Пакет | lucide (основной) |
| React import | Building2 |
| Ссылка | lucide.dev/icons/building-2 |
html
<i data-lucide="building-2" stroke-width="1.5"></i>Shop
| Модуль | Shop — интеграция WooCommerce |
| Lucide name | shopping-cart |
| Пакет | lucide (основной) |
| React import | ShoppingCart |
| Ссылка | lucide.dev/icons/shopping-cart |
html
<i data-lucide="shopping-cart" stroke-width="1.5"></i>Сводная таблица
| # | Назначение | Lucide Name | Пакет | Файл |
|---|---|---|---|---|
| 1 | Логотип приложения | bot-message-square | lucide | app-logo.svg |
| 2 | Новый чат | message-square-more | lucide | new-chat.svg |
| 3 | Knowledge | database | lucide | knowledge.svg |
| 4 | Content Factory | shirt | lucide | content-factory.svg |
| 5 | CFO | chart-candlestick | lucide | cfo.svg |
| 6 | Reputation | thumbs-up | lucide | reputation.svg |
| 7 | Watcher | hat-glasses | lucide | watcher.svg |
| 8 | Marketing | target | lucide | marketing.svg |
| 9 | Scout | binoculars | lucide | scout.svg |
| 10 | Lex | scale | lucide | lex.svg |
| 11 | Logistic | truck | lucide | logistic.svg |
| 12 | Office | building-2 | lucide | office.svg |
| 13 | Shop | shopping-cart | lucide | shop.svg |
Установка
npm
bash
# Основной пакет
npm install lucide-reactCDN (HTML)
html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
lucide.createIcons({
attrs: { 'stroke-width': 1.5 }
});
</script>Open WebUI (SvelteKit)
Глобальное переопределение stroke-width для всех Lucide-иконок:
svelte
<script>
import Icon from '$lib/components/Icon.svelte';
</script>
<Icon name="bot-message-square" strokeWidth={1.5} size={24} />Связанные документы
| Документ | Описание |
|---|---|
| Раздел 0: Введение | Обзор дизайн-системы |
| Раздел 2: Тематизация | Единая цветовая схема, маркетплейсы |
shadcn-variables.css | CSS-переменные цветов модулей |
| Lucide Icons | Поиск иконок |
Версия: 1.3 | Дата: Март 2026