Як організувати та синхронізувати файли SVG за допомогою Iconset

SVG - це чудовий спосіб включити векторні зображення в робочий процес проектування та розробки. Але збір та організація SVG-файлів на вашому комп’ютері може бути складним завданням.

Як Iconset може допомогти зняти біль і зробити нас більш продуктивними?

  • Що таке SVG?
  • Що таке Iconset?
  • Що ми будемо вчитися?
  • Частина 1: Початок роботи з Iconset
  • Частина 2: Додавання піктограм до Iconset
  • Частина 3: Використання Iconset із таким програмним забезпеченням, як Figma
  • Частина 4: Використання Iconset у розробці, як у React
  • Частина 5: Синхронізація набору значків на кількох комп’ютерах за допомогою Dropbox

Що таке SVG?

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

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

Але він також гнучкий тим, що ви можете використовувати SVG безпосередньо у своєму проекті розробки із типово невеликим розміром файлу та нескінченним масштабом. Ви навіть можете анімувати це!

Але спроба зібрати та впорядкувати купу файлів може бути складною. Як ви їх називаєте? У вас є комп’ютер, який може легко їх переглянути? А як щодо пошуку?

Що таке Iconset?

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

Любите швидко переходити між Font Awesome та heroicons, але не хочете продовжувати перемикання бібліотек? Ви можете використовувати Iconset для швидкого пошуку та перетягування його прямо до проекту.

Якщо ви плануєте використовувати його для проекту React, ви навіть можете скопіювати файл як JSX і скинути його прямо у свій проект!

Що ми будемо вчитися?

Ми пройдемося через кілька різних сценаріїв, які покажуть нам, як корисний Iconset.

Ми також розглянемо, як ви можете легко керувати Iconset між різними комп’ютерами або середовищами, щоб ви могли мати ту саму чудову бібліотеку, де б ви не працювали.

Частина 1: Початок роботи з Iconset

Для початку потрібно спочатку встановити Iconset локально. Це повинен бути подібний процес встановлення, як будь-яка інша програма.

Після того, як він буде готовий і доступний локально, ви зможете відкрити його та побачити UI без піктограм, що очікується, оскільки він не містить жодних піктограм з коробки.

Частина 2: Додавання піктограм до Iconset

Додавання піктограм до Iconset так само просто, як і перетягування, але під час процесу у вас є кілька варіантів.

Для початку завантажимо безкоштовний набір іконок heroicons.

Завантажити за адресою: //heroicons.com/.

На веб-сайті heroicons ви побачите велику кнопку Завантажити все, яка завантажить zip-файл, що включає всі файли.

Якщо ви перейдете до оптимізованої папки, ви побачите, що існує дві різні версії: суцільна та контурна.

Тепер, щоб отримати їх у Iconset, виберіть кожну папку окремо і перетягніть її прямо в Iconset.

Опинившись, у вас є кілька варіантів.

  • Набір: Оскільки це наш перший набір, ви автоматично створюватимете новий. Якби у вас були наявні набори, ви можете імпортувати в ці набори.
  • Назва набору: Тут ми можемо назвати набір дещо, що ми запам’ятаємо. Для цього я рекомендую назвати його "героїкони - Контур".
  • Параметри імпорту: це необов’язкові налаштування, але я зазвичай вибираю варіант оптимізації та очищення, щоб переконатися, що будь-які піктограми негайно готові до роботи.

І як тільки ви натиснете Імпорт, це зробить все, і ви отримаєте перший набір піктограм у Iconset!

Ви можете продовжувати робити те ж саме із твердим каталогом, тож тепер у нас будуть готові два набори.

На цьому етапі ви можете використовувати Iconset для пошуку ваших значків та перегляду всіх ваших файлів, наявних на сьогодні у вашій колекції.

Частина 3: Використання Iconset із таким програмним забезпеченням, як Figma

Чудова річ у Iconset - це те, як легко використовувати його з таким дизайнерським програмним забезпеченням, як Figma.

Якщо я хотів додати піктограму конверта на свій веб-сайт, щоб люди могли зв’язатися зі мною, я міг знайти піктограму пошти і просто перетягнути її на своє полотно:

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

Частина 4: Використання Iconset у розробці, як у React

Ще одна крута річ - це те, наскільки легко його використовувати в такому проекті, як React.

Нестандартно ви отримуєте кілька різних способів скопіювати файл і використовувати його в розробці, наприклад, як JSX.

Якщо я відчуваю, що мій Next.js Sass Starter може використовувати деякі значки на сторінці, я можу клацнути правою кнопкою миші будь-яку піктограму, яку хочу, і в розділі Копіювати як вибрати JSX я можу вставити її прямо в свій проект!

І хоча він потребуватиме стилю, як тільки ви залишите його, як і будь-яке інше зображення або піктограму, він одразу готовий до роботи.

Частина 5: Синхронізація набору значків на кількох комп’ютерах за допомогою Dropbox

За допомогою Iconset ви можете переключатися між різними бібліотеками. Але головне, ви також можете встановити місце розташування вашої бібліотеки.

Коли Iconset створює вашу бібліотеку, вона зберігає все як файли та базу даних на вашому комп’ютері.

А всередині інтерфейсу Iconset ми можемо як переміщувати, так і міняти місце, яке ми використовуємо.

Якщо ви вперше налаштовуєте Iconset, ви можете розпочати, натиснувши кнопку Перемістити, а потім вибравши місце, до якого ви хочете його синхронізувати.

І як тільки ви натиснете "Перемістити", він перемістить його до цього каталогу, наприклад, до папки на Dropbox, і синхронізує з хмарою, як і будь-яку іншу папку та файл.

Крім того, якщо у вас вже є спільна бібліотека Iconset або якщо ви налаштовуєте це на новому комп’ютері, ви можете скористатися опцією Switch і вибрати цю опцію прямо з Dropbox.

І як тільки ви натиснете Switch, тепер ви завантажите свою спільну бібліотеку і будете готові до продуктивності.

Що ще ти можеш зробити?

Публікуйте та діліться наборами значків

Ще однією цікавою особливістю є те, що ви можете експортувати набори та ділитися ними. Якщо ви витратили багато часу на колекцію і хочете поділитися нею з іншими, експортуйте її, опублікуйте та поділіться спільнотою!

Більша організація

Iconset також підтримує такі функції, як папки та вибране. Це робить ще простішим групувати та збирати піктограми, однак вам має сенс підтримувати продуктивність.

Він також підтримує тегування, що робить пошук ще простішим.

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку
  • ? Спонсоруй мене