Подключение Tabler Icons на сайт через astro-icon

Дата: 2026-02-14 Проект: alxdsgn.ru Длительность: средняя сессия

Что сделано

• Обсудили варианты иконочных библиотек: Lucide (~1500), Phosphor (~9000), Tabler (~5400), Heroicons (~300). Выбрали Tabler Icons за баланс количества и качества линейных иконок.
• Установили astro-icon + @iconify-json/tabler — рендерит SVG на этапе сборки, 0 KB JavaScript на клиенте.
• Настроили интеграцию в astro.config.mjs — добавили icon({ include: { tabler: ['*'] } }).
• Провели полный анализ сайта: определили ~60 мест для иконок, разбили на 3 приоритета (высокий, средний, низкий).
• Реализовали высокий и средний приоритет — 11 файлов, ~40 иконок:
  • Nav.astro — иконки у каждого пункта навигации (desktop: w-3.5, mobile: w-5)
  • ServiceRow.astro — тематические иконки рядом с номерами услуг (speakerphone, palette, code, shopping-bag, pencil, git-branch)
  • Tools.astro — иконки перед категориями инструментов (8 категорий: palette, robot, photo, settings-automation, chart-line, world, mail, shopping-cart)
  • BlogLayout.astro — иконки в хлебных крошках (home, notebook), у даты (calendar), тегов (tags), ссылки назад (arrow-left)
  • Hero.astro — map-pin у «Сочи», message-circle у кнопки MAX (заменил inline phone SVG)
  • Cta.astro — message-circle у кнопки MAX
  • Footer.astro — chevron-up у ссылки «Наверх»
  • ExperienceCard.astro — external-link у внешних ссылок
  • AuthorCard.astro — brand-telegram, message-circle, world перед контактными ссылками
  • CookieConsent.astro — cookie перед текстом баннера
• Билд прошёл с первого раза, задеплоили через ftp_publish.py — 4 файла обновлены.

Проблемы и решения

Сессия прошла гладко, без существенных блокеров. Единственный момент — при деплое ftp_publish.py не подхватил .env автоматически, потребовалось сделать source .env перед запуском.

Ключевые решения

• astro-icon + Iconify JSON вместо прямого импорта @tabler/icons — zero-JS подход, иконки рендерятся как inline SVG при сборке. Соответствует правилу проекта «никаких внешних JS-библиотек».
• Маппинг иконок внутри компонентов, а не в data-файлах — иконки — это презентационная деталь. Вместо добавления поля icon в типы ServiceItem и ToolCategory, использовали Record<string, string> прямо в компонентах (serviceIcons, categoryIcons, navIcons). Проще поддерживать, не нужно менять интерфейсы.
• BlogPostCard без иконок — листинг блога намеренно минималистичен (дата + заголовок + теги в строку). Добавление calendar-иконки перед каждой датой утяжелило бы компактный дизайн.
• include: { tabler: ['*'] } в конфиге — подключили весь набор для удобства. Tree-shaking отсечёт неиспользуемые при сборке.

Источники и ссылки

Из сессии

• Нет внешних ссылок — работали с существующей кодовой базой.

Дополнительный контекст

• astro-icon — документация — интеграция для Astro, поддерживает все @iconify-json пакеты, автоматический tree-shaking SVG.
• Tabler Icons — GitHub — 5900+ SVG-иконок, MIT-лицензия, stroke-based дизайн с настраиваемой толщиной линий.
• Tabler Icons — каталог — поиск по 4985 иконкам, скачивание в SVG/PNG/React/Vue.
• tabler-icons-astro (GitHub) — альтернативный подход: обёртка Tabler в Astro-компоненты. Мы использовали astro-icon + Iconify как более универсальное решение.

Что дальше

• Можно реализовать низкий приоритет: декоративные кавычки в цитатах (CTA, About), иконки перед заголовками секций.
• Посмотреть сайт в браузере и при необходимости подстроить размеры/цвета иконок.
• При добавлении новых услуг или инструментов — обновить маппинги serviceIcons / categoryIcons в соответствующих компонентах.