Memindahkan ikon ke Figma: sprite SVG, font ikon, dan mask CSS

Semuanya ikut, kecuali ikonnya. Kotak kosong, bercak hitam, atau tidak ada apa-apa.

Anda memindahkan sebuah halaman ke Figma dan semuanya ikut, kecuali ikonnya. Di tempat panah, kaca pembesar, dan tanda tautan keluar tadi berada, sekarang ada kotak kosong, bercak hitam, atau tidak ada apa-apa sama sekali.

Ini bukan satu bug. Ikon di web digambar dengan empat cara yang sama sekali berbeda, dan tiap cara rusak dengan gayanya sendiri. Begitu tahu Anda sedang berhadapan dengan yang mana, langsung jelas apakah itu bisa diperbaiki dan bagaimana caranya.

Empat jenis ikon dan cara masing-masing mengecewakan

1. SVG inline

Ini yang paling mudah. Ikonnya ditulis langsung di HTML sebagai elemen <svg> berisi path. Konverter apa pun yang membaca DOM akan melihat geometrinya dan menyerahkan vektor ke Figma.

Kalau ini pun rusak, biasanya karena konverternya meratakan sesuatu, entah referensi <use> ke simbol yang dideklarasikan di tempat lain, filter CSS, atau isian currentColor yang kehilangan warnanya begitu keluar dari kaskadenya.

2. Sprite SVG

Semua ikon disimpan dalam satu berkas sebagai <symbol>, lalu tiap tempat yang menampilkan ikon hanya menaruh referensinya.

<svg class="icon"><use href="/icons.svg#chevron-down" /></svg>

Hemat untuk web, tak terlihat bagi konverter yang polos. Di dalam DOM, elemen itu tidak memuat path apa pun. Baca apa adanya, yang didapat adalah <svg> kosong. Itu sebabnya sprite begitu sering datang sebagai kotak kosong dengan ukuran yang justru sudah benar.

Menyelesaikannya berarti mengikuti referensi itu, mengambil berkas sprite, mencari simbol dengan id yang cocok, lalu memasang geometrinya. Dan kalau spritenya berada di origin lain, permintaan itu sendiri masih harus diizinkan.

3. Font ikon

Ikonnya berupa karakter di dalam sebuah font. Font Awesome, Material Icons, dan font ikon buatan sendiri semuanya bekerja begini. Ada elemen dengan kelas tertentu, pseudo-elemen ::before, dan properti content berisi titik kode dari area penggunaan pribadi Unicode.

.fa-search::before { content: "\f002"; }

Ada dua hal yang rusak di sini. Pertama, ikonnya hidup di pseudo-elemen, dan pseudo-elemen tidak ada di DOM. Sejauh apa pun Anda menelusuri pohon elemen, dia tidak akan muncul. Kedua, kalaupun konverter berhasil menangkapnya sebagai teks, yang sampai di Figma adalah karakter mentahnya, dan tanpa font ikon itu terpasang, Figma menggambar apa yang dia punya, yaitu kotak kosong atau glif acak.

Dari situlah gejala klasiknya datang, yaitu halaman impor yang bertaburan persegi panjang kecil di tempat ikon seharusnya berada.

4. Ikon dengan mask CSS

Yang ini pantas dapat bagian sendiri, karena makin sering dipakai dan cara gagalnya menyerupai keberhasilan. Elemennya sama sekali tidak punya isi. Yang ada cuma warna latar dan sebuah mask.

.icon {
  background-color: currentColor;
  -webkit-mask-image: url(/icons/search.svg);
  mask-size: contain;
}

Bentuknya ada di gambar mask, warnanya ada di elemen. Konverter yang membaca latar belakang akan mendapat persegi panjang penuh dengan warna ikon itu. Karena itu ikon jenis ini datang sebagai kotak hitam atau kotak berwarna, bukan sebagai ruang kosong. Warnanya benar, bentuknya yang lenyap.

Situs dokumentasi yang dibangun dengan VitePress banyak memakai pola ini. Dari situ pula kami menemukannya, ketika ada laporan bahwa seluruh ikon di sebuah situs dokumentasi masuk sebagai kotak hitam.

Kenapa konverter kehilangan ikon

Karena menangani keempatnya berarti mengerjakan empat hal berbeda, dan tiga di antaranya menuntut lebih dari sekadar membaca DOM.

• Sprite menuntut berkas yang direferensikan diambil dan simbolnya dikeluarkan.
• Font ikon menuntut gaya pseudo-elemen dibaca, titik kodenya diselesaikan, lalu glifnya digambar sebagai vektor, bukan diteruskan sebagai teks.
• Ikon mask menuntut gambar masknya diambil dan warna elemen diterapkan pada bentuk hasilnya, bukan pada persegi panjang.

Konverter yang cuma menelusuri DOM dan menyalin apa yang ditemukannya akan lolos di kasus pertama lalu gagal diam-diam di sisanya. Ini perilaku yang biasa, bukan kasus langka.

Cara mengenali yang mana

Buka halamannya, klik kanan pada ikon, pilih Inspect. Tiga puluh detik sudah cukup.

Apa yang Snapture lakukan pada masing-masing

Keempatnya ditangani, dan ini perlu dirinci, karena kalimat "kami mendukung ikon" bisa diucapkan alat mana pun.

• SVG inline masuk sebagai geometri vektor. Untuk SVG yang terlalu rumit sampai importer Figma tersedak, misalnya yang bertumpuk mask, filter, atau foreignObject, hasilnya dirasterkan. Itu penurunan mutu yang disengaja, bukan kegagalan diam-diam.
• Sprite diselesaikan dengan mengikuti referensi <use>, mengambil spritenya, lalu memasang geometri simbol yang dituju beserta viewBox yang benar.
• Font ikon dikenali dari content hasil hitungan pada pseudo-elemen, dan glifnya digambar sebagai bentuk, bukan diteruskan ke Figma sebagai karakter. Hasilnya tidak bergantung pada apakah font itu terpasang di komputer Anda.
• Ikon mask CSS diselesaikan dengan mengambil gambar masknya lalu menerapkan warna asli elemen pada bentuk hasilnya, sehingga ikon itu datang dengan warna sebenarnya dan bukan sebagai persegi panjang berwarna.

Pada pengukuran yang diterbitkan di halaman bukti, beranda Linear menghasilkan 215 node vektor dan Stripe 153. Sebagian besar dari itu adalah pekerjaan ikon, dan di situlah batas antara file yang bisa disunting dan file yang berlubang.

Kalau ikon di file Anda sudah telanjur rusak

Kotak hitam hasil raster tidak bisa diperbaiki. Informasi bentuknya memang tidak pernah ada di file itu. Impor ulang dengan alat yang menyelesaikan kasus Anda.

Satu-satunya pengecualian adalah font ikon. Kalau ikonnya masuk sebagai karakter teks dan font itu terpasang di komputer Anda, di layar Anda semuanya tampak benar, tapi siapa pun yang membuka file itu tanpa font tersebut akan melihatnya rusak. Lebih baik tetap impor ulang daripada menyerahkan file yang cuma jalan di komputer Anda sendiri.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia