Як реалізувати іконковий шрифт з певного набору SVG-файлів?

Повне пояснення

1. Що це і навіщо. Іконковий шрифт – це колекція векторних іконок, що зберігаються у форматі font (TTF/WOFF). Він дозволяє використовувати іконки як звичайні символи, що полегшує їх масштабування та стилізацію через CSS.

2. Ключові принципи, терміни, інваріанти. • SVG – векторний формат зображень. • FontForge, IcoMoon – інструменти для конвертації SVG у font. • Unicode‑кодова точка – кожна іконка отримує свій код. • CSS‑клас або псевдоелемент – спосіб вставки іконки у HTML.

3. Як це працює (життєвий цикл, алгоритм).

   1. Збираємо SVG‑файли.
   2. Імпортуємо їх у інструмент (FontForge, IcoMoon).
   3. Присвоюємо кожному SVG унікальний Unicode‑код.
   4. Генеруємо font‑файли (TTF, WOFF, WOFF2).
   5. Створюємо CSS‑таблицю зі селекторами, що відповідають кодам.
   6. Підключаємо font‑файл через @font-face і використовуємо у проекті.

4. Практика і реалізація (React/Next.js приклад).

   // _app.tsx
   import '../styles/icons.css';
   
   function Icon({name}: {name: string}) {
     return <span className={`icon-${name}`} aria-hidden="true"></span>;
   }
   

5. Тестування. Перевіряємо, що font‑файл завантажується (Network), і що символи відображаються у різних браузерах.

6. Оптимізація продуктивності. • Використовувати WOFF2 для зменшення розміру. • Підключати лише потрібні символи через subset‑інструменти (glyphhanger).

7. Accessibility. Додаємо aria-hidden="true" або role="img" + title для доступності.

8. Безпека та валідація. Переконуємося, що SVG‑файли не містять небезпечного коду (XSS), оскільки вони конвертуються у font.

9. Типові помилки й edge cases. • Неправильний Unicode‑код → іконка не відображається. • Браузери, що не підтримують WOFF2 → fallback‑у TTF.

10. Cheatsheet + follow-up питання. • Як підключити font‑файл у Next.js? – використати next/font або статичний файл. • Чому використовувати font замість inline SVG? – швидкість, масштабованість, CSS‑контроль.