Автоматизація роботи з SVG іконками на GitHub: Створіть свою бібліотеку

Вітаю, шановні розробники та дизайнери! 🚀

Чи колись ви зіткнулися з викликами у керуванні, генерацією або публікацією ваших SVG іконок у вигляді спрайта? Я маю для вас справжній скарб. Представляю вашій увазі репозиторій на GitHub для генерації і публікації SVG іконок. Це чудовий інструмент, який може автоматизувати ваш процес роботи з іконками. Ви можете використовувати його як шаблон для ваших власних проектів!

🌟 Основні можливості:

  • Генерація SVG спрайтів: Автоматичне створення SVG спрайта з окремих SVG іконок.
  • Документація: Автоматичне створення документації для SVG спрайта.
  • Публікація в NPM: Після кожного push до головної гілки пакет оновлюється з новою версією на npm.
  • Автоматизація через GitHub Actions: Все, від генерації до публікації, автоматизовано!
  • Можливість використання у інших проектах: Після публікації, згенерований npm модуль може бути легко імпортований та використовуваний в будь-яких інших ваших проектах, забезпечуючи консистентність іконографії.

🧠Під капотом: react-svg-sprite-generator

Справжньою магією за цим стоїть модуль react-svg-sprite-generator. Якщо вас цікавить докладніше вивчити його можливості, ознайомтеся з моєю докладною статтею на dev.to, де я ретельно описав його можливості.

🚀 Як почати:

Цей репозиторій розроблено не лише для безпосереднього використання, але й може служити шаблоном для ваших проектів. Ось як:

Використання репозиторію як шаблону:

  1. Відвідайте репозиторій генерації та публікації SVG іконок.
  2. Натисніть на «Use this template» для створення нового репозиторію на основі цієї структури.
  3. Зробіть необхідні зміни, додайте ваши SVG іконки та насолоджуйтеся автоматизацією!

💡 Чому варто використовувати?

Робота з SVG іконками може бути викликаючою. Цей інструмент допомагає:

  • Забезпечити узгодженість: Підтримуйте однорідний набір іконок.
  • Ефективність: Оптимізуйте процес оновлення іконок.
  • Автоматизація: Зменшуйте ручні помилки і підвищуйте продуктивність.
  • Співпраця: Дизайнери можуть додавати нові іконки, а розробники їх використовувати!

📣 Висновок:

Іконки відіграють ключову роль у дизайні інтерфейсів. За допомогою цього репозиторію ви здатні не просто керувати іконками, але й підвищувати якість роботи з ними. Спробуйте його в дії та переконайтеся в його перевагах! Репозиторій знаходиться на GitHub.

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Може хтось знає нормальний онлайн-сервіс для генерування SVG спрайтів? Є один, але він присвоює ід як ід1, ід2, ід3.... фіг потім зрозумієш де яка. бажано ід присвоювати по назві файлу

Раз в кілька місяців, може рідше

мені здається онлайн буде складніше, бо треба кожен раз заватнтажувати весь набір svg іконок на сайт.

З прикладом цієї стат’ї у вас зберігається на гітхабі ісходні іконки, Змінюючи ісходні іконки — автоматом генерується спрайт.

Якщо ви не хочете через github і у в вас встановлений Nodejs на комп’ютері, то ви можете однією командою згенерувати спрайт і документацью за допомогою CLI модуля react-svg-sprite-generator :

npx react-svg-sprite-generator —src src/assets/icons —dest ./ —doc docs/index.html

я питав вже за готовий сервіс
до прикладу products.aspose.app/svg/svg-sprite-generator
але він ід робить, як я писав вже, просто нумерує підряд, не зручно.
можливо не обов’язково сервіс має вантажити файли. маніпуляції можна локально провести всі, зчитати вміст всіх файлів, запакувати в один код і дати завантажити його як файл.

Виглядає як досадна недоробка. Можна їм написати (зверху є кнопка «Support»). Я думаю вони це зможуть швидко пофіксити

Підписатись на коментарі