36: Menggunakan Grunticon - Trik CSS

Anonim

Kami telah menghabiskan banyak masa untuk bercakap mengenai penggunaan sebaris dan elemen. Anda boleh membina sistem ikon dengan sistem yang penuh dengan kelebihan.

Anda boleh membuat sistem ikon SVG walaupun dengan cara lain. Anda boleh meletakkan lembaran sprite gridded tradisional di SVG dan melakukan sprite latar belakang seperti yang biasa kita lakukan dengan gambar raster. Pada masa akan datang anda akan dapat menggunakan pengecam serpihan, sehingga menjadi lebih mudah. Lebih banyak maklumat mengenai perkara-perkara ini.

Cara lain adalah memasukkan data URI gambar SVG ke dalam fail CSS. Itulah pendekatan yang diambil oleh Grunticon.

Grunticon adalah plugin Grunt untuk mengautomasikan sistem ikon SVG. Ia memerlukan folder yang penuh dengan SVG dan memprosesnya ke dalam fail CSS. Terdapat banyak pemilih di sana, berdasarkan nama fail gambar SVG, yang memiliki background-imageURI data SVG (bukan Base64 sekalipun).

Melakukannya dengan cara ini bermaksud anda mendapat skalabiliti faedah SVG dan saiz fail, tetapi itu sahaja. Namun, selalunya itulah yang anda perlukan.

Mungkin bahagian terbaik tentang Grunticon adalah bahawa ia memberi anda semua yang diperlukan untuk kekurangan. Ini termasuk lembaran gaya alternatif untuk data PNG URI dan bahkan PNG individu sendiri (yang dihasilkannya untuk anda). Selain itu, skrip yang anda gunakan di halaman anda untuk menentukan sokongan dan hanya memuatkan lembaran gaya yang sesuai.

Saya rasa wajar untuk mengatakan bahawa ini membuat penurunan lebih mudah daripada def / teknik, buat masa ini. Bukan itu mustahil.

Grumpicon adalah versi penyemak imbas Grunticon, yang kami gunakan dalam screencast ini.

Grunticon adalah, semasa saya menulis ini, sedang berusaha untuk meningkatkan secara progresif hingga SVG sebaris tertanam, yang akan sangat keren!