17: Alat Bangun - IcoMoon - Trik CSS

Anonim

Istilah "membangun alat" mungkin menakutkan. Ini mengingatkan kita pada alat baris perintah mewah yang membutuhkan konfigurasi dan ketergantungan sistem aneh yang rusak ketika Anda melihatnya salah. Terkadang alat build seperti itu, dan kita akan membahasnya di seri ini. Tapi sebenarnya alat build hanyalah sesuatu untuk membantu membuat proses Anda lebih mudah. Otomatiskan sesuatu yang sebelumnya Anda lakukan dengan tangan.

IcoMoon, dalam hal ini, adalah alat pembuatan. Itu adalah alat yang populer untuk membuat font ikon kustom. Luar biasa untuk itu. Saya mendukung alat apa pun yang mendorong pengembang front end untuk membuat aset yang disesuaikan dan efisien hanya untuk apa yang mereka butuhkan daripada menyertakan wastafel dapur (setiap ikon di bumi) dan hanya menggunakan sedikit saja. IcoMoon tidak hanya untuk font ikon @ font-face, tetapi juga dapat mengeluarkan blok defs SVG, yang disebut sprite SVG (juga istilah yang dapat diterima).

Pada dasarnya Anda mengklik ikon yang Anda inginkan dan kemudian mengekspornya dan Anda mendapatkan blok defs SVG yang sempurna untuk digunakan. Perhatikan bahwa mereka belum menggunakan , dan saya tidak yakin mengapa, tetapi itu berarti Anda harus menyertakan viewBoxdan hal-hal aksesibilitas sendiri saat Anda menerapkannya. Mendaftar untuk akun di sana, dan Anda dapat menyimpan proyek, artinya Anda dapat kembali dan menghapus / menambahkan barang sesuai kebutuhan daripada memulai dari awal. Itu benar-benar membuatnya menjadi alat pembangunan.

Penting untuk diketahui tentang IcoMoon: Anda dapat menambahkan SVG Anda sendiri. Anda tidak terbatas pada apa yang Anda lihat di aplikasi default. Anda bisa mendapatkan SVG dari tempat lain dan cukup tambahkan di sana dan itu akan menghemat proyek Anda. Anda dapat menggunakan IcoMoon sebagai alat pembuatan hanya dengan SVG khusus Anda sendiri dan itu akan tetap berguna.