Как да организирам и синхронизирам SVG файлове с Iconset

SVG е страхотен начин да въведете векторни изображения в работния процес на проектиране и разработка. Но събирането и организирането на SVG файлове на вашия компютър може да бъде предизвикателство.

Как Iconset може да помогне да премахне болката и да ни направи по-продуктивни?

  • Какво е SVG?
  • Какво е Iconset?
  • Какво ще научим?
  • Част 1: Първи стъпки с Iconset
  • Част 2: Добавяне на икони към Iconset
  • Част 3: Използване на Iconset с дизайнерски софтуер като Figma
  • Част 4: Използване на Iconset в разработка като при React
  • Част 5: Синхронизиране на Iconset на множество компютри с Dropbox

Какво е SVG?

SVG е почти 20-годишен формат на графичен файл. И макар да съществува от известно време, то съвсем наскоро набира скорост в общността на разработчиците.

SVG е чудесен по редица причини. На първо място, това е векторен формат, което означава, че се мащабира толкова голям или малък, колкото искате.

Но той е и гъвкав, тъй като можете да използвате SVG точно във вашия проект за разработка с обикновено малък размер на файла и безкраен мащаб. Можете дори да го анимирате!

Но опитът да се съберат и организират куп файлове може да бъде предизвикателство. Как ги кръщавате? Имате ли компютър, който може лесно да ги визуализира? Ами търсенето?

Какво е Iconset?

Iconset е безплатен инструмент за различни платформи, който ви позволява да събирате и управлявате всичките си SVG файлове на едно място.

Обичате бързо да се движите между Font Awesome и heroicons, но не искате да продължите да превключвате библиотеки? Можете да използвате Iconset за бързо търсене и да го плъзнете направо във вашия проект.

Ако планирате да го използвате за проект на React, можете дори да копирате файла като JSX и да го изхвърлите направо във вашия проект!

Какво ще научим?

Ще преминем през няколко различни сценария, които ще ни покажат колко е полезен Iconset.

Също така ще разгледаме как можете лесно да управлявате Iconset между различни компютри или среди, за да можете да имате една и съща страхотна библиотека навсякъде, където работите.

Част 1: Първи стъпки с Iconset

За да започнете, първо трябва да инсталирате Iconset локално. Това трябва да бъде подобен процес на инсталиране като всяко друго приложение.

След като е готов и е достъпен локално, трябва да можете да го отворите и да видите потребителски интерфейс без икони, което се очаква, тъй като не идва с никакви икони извън кутията.

Част 2: Добавяне на икони към Iconset

Добавянето на икони към Iconset е лесно като плъзгане, но имате няколко опции по време на процеса.

За да започнете, нека изтеглим безплатния набор от икони heroicons.

Изтеглете на: //heroicons.com/.

На уебсайта на heroicons трябва да видите голям бутон Изтегляне на всички, който ще изтегли zip файл, включващ всички файлове.

Ако отидете до оптимизираната папка, ще видите, че има две различни версии: плътна и контурна.

Сега, за да ги получите в Iconset, изберете всяка папка поотделно и я плъзнете направо в Iconset.

Веднъж там, имате няколко възможности.

  • Комплект: Тъй като това е първият ни набор, автоматично ще създадете нов. Ако имате съществуващи набори, можете да импортирате в тях.
  • Име на сет: Тук можем да наречем набора нещо, което ще запомним. За това препоръчвам да го кръстите „heroicons - Outline“.
  • Опции за импортиране: това са незадължителни настройки, но обикновено избирам опцията за оптимизиране и изчистване, за да съм сигурен, че иконите веднага са готови за работа.

И след като щракнете върху Импортиране, той ще направи това и вече ще имате първия набор от икони в Iconset!

Можете да продължите и да направите същото с твърдата директория, така че сега ще имаме два готови комплекта.

На този етап можете да използвате Iconset, за да търсите в иконите си и да видите всичките си файлове, налични в момента във вашата колекция.

Част 3: Използване на Iconset с дизайнерски софтуер като Figma

Голямото нещо на Iconset е колко лесно е да го използвате със софтуер за проектиране като Figma.

Ако исках да добавя икона на плик към уебсайта си, за да могат хората да се свържат с мен, бих могъл да потърся иконата на пощата и просто да я плъзгам върху моето платно:

След това мога да се отнасям към него като към всеки друг елемент от векторния дизайн и веднага да го използвам в моя проект.

Част 4: Използване на Iconset в разработка като при React

Друго страхотно нещо е колко лесно е да се използва в проект като React.

Извън кутията получавате няколко различни начина, по които можете да копирате файла и да го използвате в разработка, като например да го копирате като JSX.

Ако чувствам, че моят Next.js Sass Starter може да използва някои икони на страницата, мога да щракна с десния бутон на мишката върху която и да е икона и под Copy As select JSX мога да я поставя направо в моя проект!

И макар че ще се нуждае от някакъв стил, след като го пуснете, както всяко друго изображение или икона, той веднага е готов за работа.

Част 5: Синхронизиране на Iconset на множество компютри с Dropbox

С Iconset имате възможност да превключвате между различни библиотеки. Но важното е, че можете също да зададете местоположението на вашата библиотека.

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

И вътре в потребителския интерфейс на Iconset, можем едновременно да се движим и да превключваме местоположението, което използваме.

Ако за първи път настройвате Iconset, можете да започнете, като щракнете върху Премести и след това изберете местоположението, с което искате да го синхронизирате.

И след като щракнете върху Премести, той ще го премести в тази директория, като папка в Dropbox, и ще се синхронизира с облака като всяка друга папка и файл.

Като алтернатива, ако вече имате споделена библиотека на Iconset или ако настройвате това на нов компютър, можете да използвате опцията Switch и да изберете тази опция направо от Dropbox.

И след като натиснете Switch, вече ще заредите споделената си библиотека и ще бъдете готови да станете продуктивни.

Какво друго можете да направите?

Публикувайте и споделяйте набори от икони

Друга страхотна функция е, че можете да експортирате набори и да ги споделяте. Ако сте прекарали много време в колекция и искате да я споделите с други, експортирайте я, публикувайте я и я споделете с общността!

Повече организация

Iconset също поддържа функции като Папки и Любими. Това прави още по-лесно групирането и събирането на иконите, но за вас е логично да поддържате продуктивност.

Той също така поддържа маркиране, което прави още по-лесно търсенето.

Последвайте ме за още Javascript, UX и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин
  • ? Спонсорирайте ме