Eksportowanie ze szkicu dla czcionki ikony

Próbuję wyeksportować ikony SVG ze Sketch, aby zaimportować do Fontello, jednak SVG nie wydają się być odpowiednie dla aplikacji (nie działają również w IcoMoon).

Ikona, którą próbuję utworzyć jako test, to prosta ikona w stylu „hamburgera”, która składa się tylko z kilku linii, ale nie będzie działać poprawnie. To co najmniej frustrujące.

Czy ktoś ma z tym jakieś doświadczenie i może się rozstać ze swoją wiedzą? Dziękuję Ci.

Wymyśliłem, jak wyeksportować SVG ze szkicu w celu poprawnego importu icomoon:

Krok 1

Zapobiegaj tworzeniu SVG poza granicami, wybierając grupę ścieżek i klikając: warstwa> ścieżki> wektoryzuj obrys

Aby wiedzieć, że to zadziałało, obrysy zostały przekształcone w zamknięte ścieżki, a inspektor wyświetla teraz kolor wypełnienia zamiast koloru obramowania.

Krok 2

Wyeksportuj każdą ikonę / plik SVG, klikając kartę Udostępnij na inspektorze i wybierając format SVG.

Krok 3

Zaimportuj ikony SVG do icomoon jak zwykle, teraz zestaw powinien wyświetlać ikony poprawnie, a rozmiar siatki powinien być dokładny. UWAGA: Upewnij się, że wszystkie pliki SVG na szkicu mają tę samą wysokość.

AKTUALIZACJA 2016 Dziękujemy @jackocnr za zwrócenie uwagi, że:

W 2016 r. Opcja menu Szkic to Warstwa> Konwertuj na kontury

Ta instrukcja działała dla mnie. to bardzo pouczające. pisarz mówi o problemach z eksportowaniem szkiców. cytuję z jego artykułu na wypadek, gdyby artykuł został usunięty.

Ogólne rozwiązanie

1. Utwórz obszar roboczy dla każdej ikony (wstaw -> obszar roboczy).
2. Upewnij się, że pozycja każdego obszaru roboczego nie ma półpikseli i jest liczbą parzystą.
3. Usuń wszystkie obroty ikon.
4. Usuń wszystkie ramki ograniczające, aby Sketch nie eksportował niepotrzebnego kodu.
5. Zapobiegaj tworzeniu SVG poza granicami warstwa> ścieżki> wektoryzacja obrysu (dzięki Gus )
6. eksportuj czysty .svg

* to ikona, którą pisarz próbował wyeksportować

Szkicuj błędy eksportu

Błąd nr 1

naprawiono eksport transformacji szkicu poprzez zmianę pozycji obszaru roboczego na liczbę parzystą. To usuwa każdą transformację w kodzie. Z drugiej strony, ponieważ pozycja była wyłączona o pół piksela, Sketch zmienił rozmiar mojego viewboxa na 0 0 25 25. Mój oryginalny obszar roboczy miał 24 x 24px. Ten błąd dodał nawet specyfikacje do kodu. Bez bueno.

Błąd nr 2

Problem: Z założenia każda ikona została ustawiona na szerokość: 24px, wysokość: 24px i promień obramowania: 3px. Problem polega na tym, że podczas eksportowania prostokąt został dodany do ścieżki, co utrudnia skalowanie w dowolnym rozmiarze za pomocą css.

Rozwiązanie: Usuń dowolne przezroczyste obramowanie i pozwól css wykonać magię. Wszystkim deweloperom naprawdę potrzebnym był viewbox ustawiony na 24 x 24px. Można dodać szerokość, wysokość i promień krawędzi.

Błąd nr 3

Problem: Szkic eksportuje obrót (-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>

Rozwiązanie: Otwórz ikonę .svg w programie Adobe Illustrator, obróć ikonę, a następnie przeciągnij i upuść z powrotem do programu Sketch. To wszystko usuwa obrót.

Błąd nr 4 Problem: przy użyciu narzędzia do wycinania eksportuj tłumaczenie i przekształca ponownie. Rozwiązanie: Nic. Po prostu nie rób tego. Krojenie i tak trwa zbyt długo i jest stratą czasu.

Jeśli używasz ścieżek podrzędnych, spłaszcz kształt przed eksportowaniem. Wciąż pojawia się błąd w Fontello dotyczący ręcznego tworzenia ścieżek złożonych, ale wydaje się, że działał poprawnie.

(mój kształt był kołem z wyciętymi z niego dwoma kształtami.)