Mengekspor dari Sketch untuk font ikon

Saya mencoba untuk mengekspor ikon SVG dari Sketch untuk mengimpor ke Fontello, namun SVG tampaknya tidak benar untuk aplikasi (mereka juga tidak berfungsi di IcoMoon).

Ikon yang saya coba buat sebagai tes adalah ikon gaya 'hamburger' sederhana yang hanya beberapa baris, tetapi tidak akan berfungsi dengan benar. Sangat frustasi untuk sedikitnya.

Adakah yang punya pengalaman dengan ini dan bisa berpisah dengan pengetahuan mereka? Terima kasih.

fonts icon sketch-app

— Alex McCabe
sumber

Bisakah Anda meletakkan file svg Anda di web di suatu tempat dan menautkannya? Apa sebenarnya masalah dengan icomoon? Saya telah menemukan jika saya tidak menggabungkan bentuk saya ke jalan minimal, bahwa icomoon akan melakukan hal-hal aneh.

— chovy

Apa sebenarnya masalah di icomoon?

— chovy

Saya menemukan jawabannya, saya menggunakan perbatasan pada SVG dan saya tidak menyadari bahwa ikon-font mengabaikannya.

— Alex McCabe

Saya mengalami masalah yang serupa (mungkin sama). Menyeret file SVG yang diekspor ke Fontello tidak melakukan apa-apa. Saya tidak tahu apakah itu bug pada Fontello, atau file tidak dikenali karena alasan tertentu.

— elliottregan

Saya pindah menggunakan Icomoon. Tampaknya membaca file .svg lebih baik. Saya juga menemukan bahwa jika Anda menggunakan perbatasan itu akan membuang semuanya.

— Alex McCabe

Jawaban:

Saya menemukan cara mengekspor SVG dari sketsa untuk mengimpor icomoon yang benar:

Langkah 1

Cegah SVG dibuat dari batas dengan memilih grup jalur dan mengklik: layer> paths> vectorize stroke

Untuk mengetahui bahwa ini berhasil, sapuan di mana ditransformasikan menjadi jalur tertutup dan inspektur sekarang menampilkan warna isian alih-alih warna batas.

Langkah 2

Ekspor setiap ikon / svg dengan mengklik tab Make Exportable pada inspector dan pilih format SVG.

Langkah 3

Impor ikon SVG ke icomoon seperti biasa, sekarang set harus menampilkan ikon dengan benar dan ukuran kotak harus akurat. CATATAN: Pastikan semua sketsa SVG Anda memiliki ketinggian yang sama.

UPDATE 2016 Terima kasih kepada @jackocnr karena telah menunjukkan bahwa:

Pada 2016, opsi menu Sketsa adalah Layer> Convert to Outlines

— Gus
sumber

Saya benar-benar lupa tentang opsi stroke vectorize. Terima kasih sobat!

— Alex McCabe

"... Pastikan semua SVG yang ada di sketsa Anda memiliki ketinggian yang sama." Bagaimana Anda mengelola, misalnya simbol minus ("-") untuk ini?

Pada tahun 2016, pilihan menu Sketsa adalah Layer> Convert to Outlines

— jackocnr

Manual ini bekerja untuk saya. ini sangat informatif. Penulis berbicara tentang masalah ekspor sketsa. Saya mengutip dari artikelnya jika artikel tersebut akan dihapus.

Solusi Keseluruhan

Buat artboard untuk setiap ikon (masukkan -> artboard).
Pastikan posisi setiap artboard tidak memiliki setengah-piksel dan merupakan bilangan genap.
Hapus semua rotasi ikon.
Hapus semua kotak pembatas sehingga Sketch tidak mengekspor kode yang tidak dibutuhkan.
Mencegah SVG dibuat dari batas layer> path> vectorize stroke (terima kasih Gus )
ekspor Bersihkan .svg

* ini adalah ikon yang penulis coba ekspor

Sketsa bug pengekspor

Bug # 1

memperbaiki ekspor sketsa dengan mengubah posisi artboard ke angka genap. Ini menghapus semua transformasi dalam kode. Pada catatan lain, karena posisinya dimatikan setengah piksel, Sketch mengubah ukuran kotak pandang saya menjadi 0 0 25 25. Artboard asli saya adalah 24 x 24px. Bug ini bahkan menambahkan spesifikasi ke kode. Tidak ada bueno

Bug # 2

Masalah: Sesuai desain, setiap ikon disetel ke lebar: 24px, tinggi: 24px, dan jari-jari batas: 3px. Masalahnya adalah, ketika mengekspor, persegi panjang ditambahkan ke jalur, sehingga membuatnya sulit untuk skala pada ukuran berapa pun dengan css.

Solusi: Hapus kotak ikatan transparan dan biarkan css melakukan keajaiban. Semua pengembang benar-benar diperlukan adalah kotak tampilan diatur ke 24 x 24px. Mereka dapat menambahkan lebar, tinggi, dan radius batas.

Bug # 3

Masalah: Sketsa mengekspor rotate (-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>

Solusi: Buka ikon .svg Anda ke Adobe Illustrator, putar ikon, lalu seret & lepas kembali ke Sketsa. Ini menghilangkan rotasi secara bersamaan.

Bug # 4 Masalah: menggunakan alat ekspor menerjemahkan dan mengubah lagi. Solusi: Tidak ada. Tapi jangan lakukan itu. Butuh waktu terlalu lama untuk memotong dan membuang-buang waktu.

— Atau Frenkel
sumber

Jika Anda menggunakan sub-jalur, ratakan bentuk sebelum mengekspor. Saya masih mendapat kesalahan di Fontello tentang membuat jalur gabungan secara manual, tetapi tampaknya telah bekerja dengan benar.

(Bentuk saya adalah lingkaran dengan dua bentuk terpotong darinya.)

— elliottregan
sumber

Sayangnya, Anda hanya bisa rata dalam bentuk saling berpotongan. Jika Anda menggunakan kurangi, itu tidak akan membiarkan Anda.

— Alex McCabe

@AlexMcCabe Ada berita tentang cara meratakan jalur yang mengurangi satu sama lain?

— Guido Bouman

Tidak ada apa-apa sobat, hal terbaik untuk dilakukan adalah menyederhanakan bentuk Anda sebanyak mungkin, atau tangan bergabung dengan garis. Yang merupakan mimpi buruk: /

— Alex McCabe