Panduan Ekspor

Klik tombol Ekspor di menu sidebar kiri. Dialog ekspor terbuka sebagai modal yang memungkinkan Anda mengonfigurasi direktori output, memilih grup ikon yang akan disertakan, serta memilih format output dan file pendamping. Semua pengaturan diingat di antara sesi, sehingga setelah mengonfigurasi pengaturan ekspor yang diinginkan, ekspor berikutnya hanya butuh satu klik.

Langkah pertama adalah memilih tempat menyimpan file yang diekspor. Secara default, Bobcorn menggunakan Desktop Anda. Klik tombol folder di samping jalur untuk memilih lokasi lain.

Anda dapat memilih grup ikon mana yang akan disertakan dalam ekspor. Secara default, semua grup dipilih. Hapus centang grup yang tidak Anda inginkan dalam font — misalnya, Anda mungkin mengecualikan grup "draf" yang berisi ikon dalam proses pengerjaan.

Setiap grup menampilkan jumlah ikonnya di samping namanya. Total jumlah ikon di bagian bawah daftar diperbarui secara real time saat Anda mengaktifkan dan menonaktifkan grup, sehingga Anda selalu tahu persis berapa banyak glyph yang akan dikandung font yang diekspor.

Bobcorn dapat menghasilkan lima format font. Pilih yang sesuai dengan persyaratan dukungan browser proyek Anda:

WOFF2 selalu disertakan karena merupakan format font web yang esensial — tidak ada skenario di mana Anda menginginkan ekspor font web tanpanya. Semua format lainnya bersifat opsional berdasarkan kebutuhan spesifik Anda.

Selain file font itu sendiri, Bobcorn dapat menghasilkan beberapa file pendamping yang memudahkan integrasi dan kolaborasi:

CSS (icons.css)

Berisi deklarasi @font-face dan kelas CSS .icon-* untuk setiap ikon dalam kumpulan. Tambahkan file ini ke proyek dan Anda siap menggunakan ikon dengan nama kelas sederhana. Lihat panduan CSS @font-face untuk detail cara kerja CSS yang dihasilkan.

JS (icons-symbol.js)

Sprite SVG symbol yang mendaftarkan semua ikon sebagai SVG symbol inline saat skrip dimuat. Gunakan ini ketika Anda membutuhkan ikon multi-warna atau fitur khusus SVG bersamaan dengan ikon font. Lihat panduan SVG Symbol untuk pola penggunaan.

HTML (demo.html)

Halaman pratinjau interaktif yang menampilkan semua ikon yang diekspor beserta nama, nama kelas CSS, dan code point Unicode. Buka di browser untuk menelusuri kumpulan ikon lengkap. Berguna bagi desainer yang meninjau perpustakaan ikon dan developer yang mencari nama kelas saat integrasi.

ICP (project.icp)

File proyek Bobcorn. Ekspor ini untuk berbagi proyek ikon dengan rekan tim atau sebagai cadangan. Membuka file ICP di Bobcorn memulihkan seluruh status proyek — semua ikon, grup, metadata, dan pengaturan — persis seperti saat diekspor.

Aktifkan opsi ZIP untuk membundel semua file yang diekspor ke dalam satu arsip .zip. Ini berguna saat berbagi font ikon dengan rekan tim, mengunggah ke CDN, atau melampirkan ke dokumen serah terima desain. ZIP berisi struktur direktori yang sama seperti ekspor biasa — tanpa penumpukan atau reorganisasi.

Berikut tiga preset praktis untuk jenis proyek yang umum:

Proyek web modern

• WOFF2 (selalu aktif) + CSS + HTML demo
• Jejak minimal, mencakup 97%+ browser

Proyek kompatibilitas penuh

• WOFF2 + WOFF + CSS + HTML demo
• Mencakup IE 11+ dan semua browser modern

Design system / perpustakaan komponen

• WOFF2 + TTF + CSS + JS symbol + HTML demo + ICP
• Font untuk penggunaan CSS, TTF untuk alat desktop, JS symbol untuk varian multi-warna, ICP untuk backup proyek

Ketika semua opsi diaktifkan, Bobcorn menghasilkan struktur file berikut:

output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

Nama keluarga font (misalnya, "MyIcons") diambil dari nama proyek di Bobcorn. Semua file yang dihasilkan menggunakan nama ini sebagai awalan untuk konsistensi.

Setelah Bobcorn menghasilkan file Anda, ikuti langkah-langkah berikut untuk mengintegrasikan font ikon ke dalam proyek:

1. Salin file font + CSS ke direktori assets atau fonts proyek Anda
2. Tautkan CSS di HTML Anda: <link rel="stylesheet" href="MyIcons.css">
3. Gunakan ikon di mana saja dalam markup: <i class="icon icon-home"></i>
4. Opsional preload file WOFF2 untuk rendering awal yang lebih cepat

Berikut contoh integrasi lengkap:

<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Save</button>
</body>

Petunjuk rel="preload" memberi tahu browser untuk mulai mengunduh file font sebelum menemukan aturan @font-face dalam CSS. Ini menghilangkan jeda antara parse CSS dan pengunduhan font, menghasilkan first-paint yang lebih cepat dengan ikon yang langsung terlihat. Atribut crossorigin diperlukan untuk preload font, bahkan ketika font berada di origin yang sama.