Esportazione da Sketch per il carattere icona

Sto cercando di esportare le icone SVG da Sketch per importarle in Fontello, tuttavia le SVG non sembrano essere corrette per l'app (inoltre non funzionano in IcoMoon).

L'icona che sto cercando di creare come test è una semplice icona di stile "hamburger" che è solo poche righe, ma non funzioneranno correttamente. È a dir poco frustrante.

Qualcuno ha qualche esperienza con questo e potrebbe separarsi dalle proprie conoscenze? Grazie.

Ho capito come esportare SVG dallo sketch per l'importazione corretta di icomoon:

Passo 1

Impedisci che SVG venga creato fuori dai bordi selezionando il gruppo di tracciati e facendo clic su: layer> tracciati> vettorializza tratto

Per sapere che ha funzionato, i tratti sono stati trasformati in tracciati chiusi e l'ispettore ora visualizza il colore di riempimento anziché il colore del bordo.

Passo 2

Esporta ogni icona / svg facendo clic sulla scheda Rendi esportabile nella finestra di ispezione e selezionando il formato SVG.

Passaggio 3

Importa le icone SVG su icomoon come al solito, ora il set dovrebbe visualizzare correttamente le icone e le dimensioni della griglia dovrebbero essere accurate. NOTA: assicurati che tutti i tuoi SVG sullo schizzo abbiano la stessa altezza.

AGGIORNAMENTO 2016 Grazie a @jackocnr per aver sottolineato che:

Nel 2016, l'opzione di menu Schizzo è Livello> Converti in contorni

Questo manuale ha funzionato per me. è molto istruttivo. lo scrittore parla dei problemi di esportazione degli schizzi. sto citando dal suo articolo nel caso in cui l'articolo verrà rimosso.

Soluzione globale

1. Crea una tavola da disegno per ogni icona (inserisci -> tavola da disegno).
2. Assicurati che la posizione di ogni tavola da disegno non abbia mezzo pixel e sia un numero pari.
3. Rimuovi tutte le rotazioni delle icone.
4. Rimuovi eventuali caselle di delimitazione in modo che Sketch non esporti il ​​codice non necessario.
5. Impedisci che SVG venga creato dal livello bordi> percorsi> vettorializza tratto (grazie Gus )
6. export Clean .svg

* questa è l'icona che lo scrittore ha tentato di esportare

Bug di esportazione di sketch

Bug n. 1

lo schizzo fisso trasforma l'esportazione cambiando la posizione della tavola da disegno in un numero pari. Ciò rimuove qualsiasi trasformazione nel codice. In un'altra nota, poiché la posizione era disattivata di mezzo pixel, Sketch ha cambiato la dimensione del mio viewbox a 0 0 25 25. La mia tavola da disegno originale era 24 x 24px. Questo bug ha anche aggiunto specifiche al codice. No bueno.

Bug n. 2

Problema: in base alla progettazione, ogni icona era impostata su larghezza: 24 px, altezza: 24 px e raggio del bordo: 3 px. Il problema è che, durante l'esportazione, il rettangolo è stato aggiunto al percorso, rendendo così difficile ridimensionare a qualsiasi dimensione con CSS.

Soluzione: elimina qualsiasi riquadro di delimitazione trasparente e lascia che css faccia la magia. Tutti gli sviluppatori veramente necessari erano il viewbox impostato su 24 x 24px. Potrebbero aggiungere larghezza, altezza e raggio del bordo.

Bug n. 3

Problema: Sketch esporta una rotazione (-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Soluzione: aprite l'icona .svg in Adobe Illustrator, ruotate l'icona, quindi trascinate nuovamente in Sketch. Questo rimuove la rotazione tutti insieme.

Bug n. 4 Problema: usando lo strumento slice esportare tradurre e trasformare di nuovo. Soluzione: niente. Basta non farlo. Ci vuole troppo tempo per tagliare comunque ed è una perdita di tempo.

Se si utilizzano percorsi secondari, appiattire la forma prima di esportare. Ho ancora un errore in Fontello sulla creazione manuale di percorsi composti, ma sembra aver funzionato correttamente.

(la mia forma era un cerchio con due forme ritagliate da esso.)