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.

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

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

1. Buat artboard untuk setiap ikon (masukkan -> artboard).
2. Pastikan posisi setiap artboard tidak memiliki setengah-piksel dan merupakan bilangan genap.
3. Hapus semua rotasi ikon.
4. Hapus semua kotak pembatas sehingga Sketch tidak mengekspor kode yang tidak dibutuhkan.
5. Mencegah SVG dibuat dari batas layer> path> vectorize stroke (terima kasih Gus )
6. 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.

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.)