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.
fonts
icon
sketch-app
Alex McCabe
źródło
źródło
Odpowiedzi:
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:
źródło
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
* 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).
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.
źródło
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.)
źródło