Come creare un set di icone personalizzate su Oxygen

Ciao 🙂 se vuoi capire come importare un set di icone personalizzate in formato .svg su Oxygen sei finito sull'articolo che fa per te! Mettiamoci subito al lavoro e vediamo come fare.

Dove scaricare icone in formato .svg

Prima di tutto dobbiamo disporre di una vasta libreria di icone. Tra le più note abbiamo Icons8 e Flaticon. In questa guida di insegnerò a scaricare icone con FlatIcon in modo totalmente gratuito (dovrai solo attribuire gli autori come indicato nelle loro linee guida.

Ti consiglio di registrare un account gratuito (se hai un account FreePik potrai usare quello, dato che i due siti sono collegati) così potrai creare un set con più di 10 icone.

Cercare le icone personalizzate da aggiungere al set

Dopo aver creato l'account inizia subito la ricerca delle tue icone digitando nella barra di ricerca quello che stai cercando. Per esempio se cerchi l'icona per un piatto di pesce, puoi digitare "seafood" (le ricerche su questo sito ti consiglio di farle in inglese):

A meno che non intendi utilizzare anche icone a pagamento, ti suggerisco di filtrare solo quelle gratuite, così da ottenere dei risultati più puliti.

Per farlo, clicca sul pulsante "Filters" e sotto "License" seleziona la voce "Free". La pagina a questo punto verrà ricaricata e non mostrerà i risultati a pagamento.

Quando avrai scelto l'icona da utilizzare clicca su di essa e poi premi il pulsante "Add to collection" per iniziare a popolare il tuo set di icone personalizzate.

Ora dovrai andare alla ricerca delle altre icone. Questa volta però ti suggerisco di effettuare la ricerca filtrando anche lo stesso stile di icone, dato che ne hai già selezionata una e sarebbe bene che tutte le icone appartengano allo stesso stile grafico.

Puoi fare ciò scrivendo la prossima ricerca direttamente sotto al form presente nell'icona che hai aperto, che come noterai ha già un filtro applicato, in questo caso "Lineal":

Per velocizzare il processo, anziché aprire ogni icona e aggiungerla al set, puoi posizionarci sopra il mouse e cliccare sull'apposito pulsante per aggiungere l'icona alla raccolta:

È importante che il tuo set sia composto da almeno 3 icone, altrimenti non riuscirai a visualizzarle correttamente su Oxygen Builder.

Quando avrai finito di aggiungere le icone al set potrai procedere con il download. Per farlo, devi aprire la tua raccolta tramite il tasto "Collections", in alto a destra. Poi clicca su "Download collection" e scegli come formato "SVG".

Verrà scaricato sul tuo computer un file .zip che dovrai estrarre. Al suo interno troverai tutte le icone del set in formato .svg. Accertati che siano tutte presenti e poi procedi con lo step successivo.

Creare il set di icone su IcoMoon

Ora possiedi le tue nuove icone, ma il set dovrai crearlo sul sito web di IcoMoon. Non è necessario registrare un account, dovrai semplicemente visitare il sito web e cliccare sul tasto viola "App IcoMoon", situato in alto a destra nella pagina.

Si aprirà una pagina di sviluppo, qui è dove dovrai caricare le icone in formato .svg per poi esportarle in set compatibile con Oxygen. Per caricare le icone clicca sul pulsante "Import Icons" e seleziona tutte le icone che intendi inserire nel set, poi conferma.

Le icone una volta caricate verranno inserite in una libreria sempre nella stessa pagina. Adesso devi cliccare su ognuna di queste icone per selezionarle e aggiungerle alla cartella di download (in basso noterai un "contatore" che ti informa su quante icone stai inserendo nel set).

Una volta selezionate le icone desiderate, clicca sul pulsante "Generate SVG & More", che si trova in basso a sinistra nella pagina:

Verrai riportato in una pagina che mostra l'elenco delle icone. Qui ti consiglio di rinominare tutte le icone inserendo il testo con cui vorrai trovarle all'interno del set di icone su Oxygen.

Questa procedura non andrebbe sottovalutata, perché oltre ad aiutarci nella ricerca su Oxygen, permette ai motori di ricerca (come Google) di comprendere semanticamente che cosa rappresentano le varie icone del nostro sito web.

Inserire il tag <title> nel file di esportazione

Ora che hai sistemato i titoli alle tue icone devi accertarti che questa informazione venga esportata insieme al tuo set. Di default l'opzione dovrebbe essere attiva, ma non si sa mai, quindi ecco come devi fare per verificarlo.

Clicca sul pulsante "Preferences" in alto alla pagina, si aprirà un pannello di controllo. Qui dovrai spuntare (qualora non lo sia già) la voce "Add <title> to definitions in symbol-defs.svg" e poi chiudere la schermata.

Senza questa spunta Oxygen non sarà in grado di visualizzare le nostre icone nel visual editor, quindi il set risulterà privo di icone. Dopo aver controllato che questa spunta si attiva, procedi pure con la guida 🙂

Quindi clicca sul pulsante "Download". Puoi trovare questo pulsante nell'esatto punto in cui poco fa hai cliccato "Generate SVG & More".

Caricare il set di icone su Oxygen

In questo modo scaricherai un altro file .zip. Estrai il contenuto in una cartella e poi recati nelle impostazioni di Oxygen, clicca infine sul tab "SVG Sets".

Nella sezione "Add New Set" devi specificare il nome del tuo set, poi clicca su "Scegli file" e seleziona il file rinominato "symbol-defs.svg" presente nella cartella principale del set di icone scaricato da IcoMoon.

Clicca su "Submit" per completare il caricamento.

Usare le nuove icone sul sito web

Benissimo, se hai seguito tutti i passaggi correttamente, ora dovresti poter utilizzare le tue nuove icone sul tuo sito web.

Quindi apri una pagina cliccando su "Edit with Oxygen" e inserisci al suo interno un elemento "Icon". Dal menu a tendina dovresti visualizzare il nome del tuo set di icone, cliccaci sopra e troverai tutte le tue icone!

Spero che questa guida ti sia stata utile. Se hai qualche domanda, non esitare a farla commentando tramite il form qui sotto 🙂 alla prossima!