Документація SVG Force

Останнє оновлення: Березень 2026

Ласкаво просимо до офіційної документації SVG Force — потужного інструменту для конвертації SVG іконок у компоненти React, React Native та інших фреймворків.

1. Вступ

SVG Force — це онлайн-сервіс, який дозволяє розробникам швидко та легко конвертувати SVG файли в готові до використання компоненти для популярних фреймворків.

1.1 Основні можливості

  • Конвертація SVG в React, React Native, Vue та інші фреймворки
  • Підтримка градієнтів, тіней та анімацій
  • Оптимізація SVG коду
  • Налаштування параметрів експорту
  • Пакетна обробка файлів (для преміум користувачів)
  • Історія генерацій та бібліотека SVG

2. Початок роботи

2.1 Реєстрація

Для початку роботи з SVG Force вам потрібно створити обліковий запис:

  1. Перейдіть на головну сторінку сервісу
  2. Натисніть кнопку "Зареєструватися"
  3. Введіть ваш email та пароль
  4. Підтвердіть email адресу

2.2 Вибір тарифного плану

SVG Force пропонує декілька тарифних планів, які підійдуть як для індивідуальних розробників, так і для команд. Докладніше про тарифи можна дізнатися на сторінці підписок.

3. Використання генератора

3.1 Завантаження SVG файлу

Існує кілька способів завантажити SVG файл:

  • Перетягніть файл у робочу область
  • Натисніть кнопку "Завантажити" та виберіть файл, або папку з файлами з комп'ютера

3.2 Налаштування параметрів

Після завантаження файлу ви можете налаштувати:

  • Фреймворк: React, React Native, Vue, Angular та інші
  • Назва іконки: Власна назва для згенерованої іконки
  • Назва компонента: Власна назва для згенерованого компонента

3.3 Генерація коду

Після налаштування всіх параметрів натисніть кнопку "Генерувати". Система автоматично обробить ваш SVG файл і згенерує готовий до використання код компонента.

3.4 Експорт результату

Згенерований компонент автоматично завантажується на ваш компʼютер у вигляді файлу .tsx Ми не зберігаємо згенерований файл у себе.

4. Підтримувані фреймворки

4.1 React

Генерація React компонентів з підтримкою hooks, props та TypeScript. Компоненти оптимізовані для використання в сучасних React додатках.

4.2 React Native

Спеціальна генерація для React Native з використанням react-native-svg. Підтримка всіх основних SVG елементів та властивостей.

4.3 Vue

Генерація Vue компонентів (Vue 2 та Vue 3) з підтримкою Composition API та TypeScript.

4.4 Angular

Генерація Angular компонентів з підтримкою декораторів та TypeScript.

4.5 Svelte

Генерація Svelte компонентів з підтримкою TypeScript.

5. Розширені можливості

5.1 Градієнти

SVG Force додає можливість додавати градієнти до ваших svg картинок.

5.2 Тіні та фільтри

Сервіс підтримує додавання тіней та фільтрів до ваших svg картинок.

5.3 Анімації

SVG Force може створювати анімації для кольорів в ваших svg картинках.

5.4 Пакетна обробка

Користувачі можуть завантажувати та обробляти кілька SVG файлів одночасно, що значно прискорює робочий процес.

5.5 CLI для Team підписки

SVG Force CLI дозволяє ініціалізувати проєкт і запускати конвертацію SVG через термінал. Рекомендоване середовище: Node.js v20.19.4 та npm v10.8.2.

  1. Встановіть CLI глобально: npm i -g @svgforce/cli
  2. Увійдіть до Team-акаунту: svgforce login
  3. Ініціалізуйте CLI у корені проєкту: svgforce init — майстер налаштування запитає потрібні параметри
  4. Якщо під час init обрано опцію «Створити npm скрипти», запускайте конвертацію надалі через npm run icons
npm i -g @svgforce/cli
svgforce login
svgforce init
# якщо під час init обрано «Створити npm скрипти»:
npm run icons

6. Поради та найкращі практики

6.1 Оптимізація SVG перед завантаженням

Для кращих результатів рекомендуємо попередньо оптимізувати ваші SVG файли, видаливши непотрібні метадані та коментарі.

6.2 Використання семантичних назв

Давайте вашим компонентам зрозумілі та описові назви, що полегшить подальшу підтримку коду.

6.3 Налаштування розмірів

При конвертації SVG, переконайтесь що viewBox налаштований правильно для коректного масштабування іконок.

7. Усунення несправностей

7.1 Проблеми з градієнтами

Якщо градієнти не відображаються коректно, переконайтесь що ваш SVG файл використовує стандартні SVG градієнти (linearGradient або radialGradient).

7.2 Помилки конвертації

Якщо виникають помилки під час конвертації, спробуйте спростити SVG файл або зверніться до служби підтримки.

7.3 Проблеми з анімацією

Деякі складні SMIL анімації можуть не підтримуватись. У таких випадках рекомендуємо використовувати CSS анімації.

8. Підтримка

Якщо у вас виникли питання або проблеми, ви можете звернутися до нашої служби підтримки:

  • Email: [email protected]
  • Форма зворотного зв'язку на сайті
  • Discord спільнота (посилання в футері)

9. Оновлення та зміни

Ця документація регулярно оновлюється. Слідкуйте за оновленнями в нашому Changelog.

Для отримання інформації про нові функції та можливості підпишіться на наш розсилку або відвідайте наш блог.