Exportieren von Sketch für Icon-Font

Ich habe herausgefunden, wie man SVG aus der Skizze für den korrekten Import von icomoon exportiert:

Schritt 1

Verhindern Sie, dass SVG aus den Rändern heraus erstellt wird, indem Sie die Pfadgruppe auswählen und auf klicken: Ebene > Pfade > Strich vektorisieren

Um zu wissen, dass dies funktioniert hat, wurden die Striche in geschlossene Pfade umgewandelt und der Inspektor zeigt jetzt die Füllfarbe anstelle der Rahmenfarbe an.

Schritt 2

Exportieren Sie jedes Symbol/SVG, indem Sie im Inspektor auf die Registerkarte „ Exportierbar machen“ klicken und das SVG-Format auswählen.

Schritt 3

Importieren Sie die SVG-Symbole wie gewohnt in icomoon, jetzt sollte das Set die Symbole korrekt anzeigen und die Rastergröße sollte korrekt sein. HINWEIS: Stellen Sie sicher, dass alle Ihre SVGs auf der Skizze die gleiche Höhe haben.

UPDATE 2016 Danke an @jackocnr für den Hinweis:

Im Jahr 2016 lautet die Menüoption „Sketch“ „Ebene“ > „In Konturen konvertieren“.

Diese Anleitung hat bei mir funktioniert. es ist sehr informativ. Der Autor spricht über Probleme beim Exportieren von Skizzen. Ich zitiere aus seinem Artikel, falls der Artikel entfernt wird.

Gesamtlösung

1. Erstellen Sie für jedes Symbol eine Zeichenfläche (Einfügen -> Zeichenfläche).
2. Stellen Sie sicher, dass die Position jeder Zeichenfläche keine Halbpixel enthält und eine gerade Zahl ist.
3. Entfernen Sie alle Symboldrehungen.
4. Entfernen Sie alle Begrenzungsrahmen, damit Sketch keinen unnötigen Code exportiert.
5. Verhindern, dass SVG aus der Grenzebene erstellt wird> Pfade> Strich vektorisieren (danke Gus )
6. exportiere saubere .svg

*Dies ist das Symbol, das der Autor exportieren wollte

Fehler beim Sketch-Export

Fehler Nr. 1

Der Export der Skizzentransformation wurde korrigiert, indem die Position der Zeichenfläche in eine gerade Zahl geändert wurde. Dadurch werden alle Transformationen im Code entfernt. Da die Position um halbe Pixel verschoben war, änderte Sketch die Größe meiner Viewbox auf 0 0 25 25. Meine ursprüngliche Zeichenfläche war 24 x 24 Pixel groß. Dieser Fehler fügte dem Code sogar Spezifikationen hinzu. Nein bueno.

Fehler Nr. 2

Problem: Per Design wurde jedes Symbol auf width: 24px , height: 24px und border-radius: 3px gesetzt. Das Problem ist, dass beim Exportieren das Rechteck in den Pfad eingefügt wurde, was es schwierig macht, es per CSS auf jede beliebige Größe zu skalieren.

Lösung: Löschen Sie alle transparenten Begrenzungsrahmen und lassen Sie CSS die Magie übernehmen. Alles, was die Entwickler wirklich brauchten, war die auf 24 x 24 Pixel eingestellte Viewbox. Sie könnten die Breite, Höhe und den Randradius hinzufügen.

Fehler Nr. 3

Problem: Sketch exportiert eine Rotation (-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>

Lösung: Öffnen Sie Ihr .svg-Symbol in Adobe Illustrator, drehen Sie das Symbol und ziehen Sie es dann per Drag & Drop zurück in Sketch. Dies entfernt die Rotation insgesamt.

Fehler Nr. 4 Problem: Mit dem Slice-Tool exportieren, übersetzen und erneut transformieren. Lösung: Nichts. Tu es einfach nicht. Das Schneiden dauert sowieso zu lange und ist Zeitverschwendung.

Wenn Sie Unterpfade verwenden, reduzieren Sie die Form vor dem Exportieren. Ich habe in Fontello immer noch einen Fehler beim manuellen Erstellen zusammengesetzter Pfade, aber es scheint korrekt funktioniert zu haben.

(Meine Form war ein Kreis mit zwei ausgeschnittenen Formen.)