Membuat SVG Sprites Menggunakan Webpack 4

Dalam membuat sebuah website, icon merupakan bagian yang penting untuk membuat website kita terlihat menarik, sering kali kita sebagai developer menggunakan icon yang sudah di sediakan oleh Font Awesome, Tapi terkadang kita tidak menemukan icon yang cocok untuk website kita disitu.

Oleh karena itu, kita terpaksa membuatnya sendiri, dan tidak jarang juga kita memilih untuk mengunakan icon generator seperti Icomoon, Fontastic, dll untuk membuatnya, tapi menurut saya, menggunakan icon generator itu ribet.

Pembaca: sebentar, sebentar…., ribet? ribetnya dimana? kan tinggal klik — klik aja
Penulis: iya, bener, tinggal klik — klik aja, tapi harus melalui beberapa step 😞, dan kalau mau nambah icon, harus mengulangi lagi beberapa step itu 😞, menurut saya kenapa kita harus melalui beberapa step kalau kita bisa satu step, tinggal run satu command, langsung jadi deh iconnya, hehehe 😃
Pembaca: cuma satu step? keren juga, pakai tuh?
Penulis: pakai buid tools seperti webpack, gulp, grunt, dll, tapi di artikel ini saya mau menggunakan webpack, kenapa? supaya terlihat keren aja sih, hehehe 😃

Webpack

Webpack adalah module bundler. Tujuan utamanya adalah untuk menggabungkan file-file JavaScript untuk digunakan di browser, namun ia juga mampu mengubah, membundling, atau mengemas hampir semua resource atau aset apa pun.

kira — kira gambarannya seperti ini:

Webpack

Penulis: keren kan?
Pembaca: Wuih…., mantaf 😃

Untuk mempelajari webpack, setidaknya kalian perlu memahami beberapa Core Conceptsnya yaitu:

1. Entry
   Di property inilah webpack akan mulai ngebuild code kita, dan property ini memiliki default value ./src/index.js
2. Output
   Property ini nanti akan memberitahu webpack, dimana kamu akan minyimpan file hasil build webpack dan juga akan memberitahu webpack, file tersebut kamu beri nama apa. Property ini memiliki default value ./dist/main.js
3. Loaders
   Karena webpack hanya memahami Javascript dan JSON files, dengan menggunakan property ini si webpack dapat memproses jenis file lain. Kira — kira, tugas property ini seperti translater lah.
4. Plugins
   Kalau Loader digunakan untuk mengubah jenis modul tertentu, property ini dapat dimanfaatkan untuk melakukan berbagai tugas yang lebih luas, seperti optimasi bundel, manajemen aset dan injeksi.
5. Mode
   Properti ini berfungsi untuk menentukan environment kita, dan property ini memiliki default value production
6. Browser Compatibility
   Ini semacam pemberitauan aja kalau webpack itu support semua browser yang kompatibel dengan ES5.

Untuk konsep tersebut, silahkan baca detailnya di website webpack 😃

SVG Sprites

SVG Sprites adalah kumpulan icon yang memiliki extension SVG yang dimasukkan ke dalam satu file SVG.

kira — kira gambarannya seperti ini:

Sprites

Nah… itu tadi penjelasan singkat apa itu Webpack dan apa itu SVG sprites.
Selanjutnya kita akan membahas bagaimana cara membuat SVG sprites menggunakan webpack 😃

Let’s Get Started

Karena saya menggunakan yarn, jadi jangan lupa install yarn dulu ya... 😃

1. Buat folder svg-sprites atau terserah kalian mau kasih nama apa

2. Buka terminal, kemudian yarn init di folder yang kalian buat tadi

3. Setelah itu, install dependencies ini

4. Kemudian, buat folder spites di dalam folder yang kalian buat tadi

5. Buat file index.html, style.css, main.js, webpack.common.js, webpack.development.js, webpack.production.js.

6. Setelah itu, buka Google Chrome, buka website Flaticon, kemudian download icon yang kalian inginkan.

7. Copy and paste icon yang sudah kalian download tadi ke folder sprites

8. Buka folder svg-sprites dengan vscode, atau text editor yang kalian gunakan

9. Buka file webpack.common.js, kemudian copy and paste code ini

Dikode ini, kita memberitahu webpack, kalau kita ingin ngebuild file ./main.js, dan file hasil buildnya akan kita simpan di folder svg-sprites dengan nama main.build.js

10. Buka file webpack.development.js, kemudian copy and pasti code ini

Dikode ini, kita menggunakan webpack-merge karena kita tidak mau menulis ulang code yang sama yang akan kita gunakan di mode development dan production, dan dicode ini kita meberitahu webpack, kalau kita dalam mode development, open url localhost dengan port 3000.

11. Buka file webpack.production.js, kemudian copy and paste code ini

Dicode ini kita meberitahu webpack, kalau kita dalam mode production, gabungkan semua file.svg yang ada di folder sprites, dan simpan hasil buildnya di folder svg-sprites dengan nama sprites.svg.

Diplugin svg-spritemap-webpack-plugin di bagian output, kita set property svg4everybody ke true karena kita ingin SVG yang kita gunakan ini support di semua browser. Disitu juga kita set property svgo ke true karena kita ingin memperkecil size file.svg yang kita gabungkan tadi menjadi lebih kecil.

Kita juga set property prefix menjadi si- yang mana default valuenya sprite-. Jadi, kalau mau menggunakan SVG, cukup seperti ini saja

12. Buka file style.css, kemudian copy and paste code ini

Biasanya, di SVG itu kalau mau mengubah warna harus menggunakan property fill dan untuk mengubah ukuran harus menggunakan property width and height. Tapi kita tidak mau memakai itu.

Kita maunya cukup memakai color untuk mengubar warna, dan font-size untuk mengubah ukuran, oleh karena itu kita set property fill menjadi currentColor supaya kita bisa menggunakan property color untuk mengubah warna, dan kita juga set property width and height menggunakan em unit supaya kita bisa menggunakan property font-size untuk mengubah ukuran.

Jadi, kalau mau mengubah warna dan ukuran SVG, cukup seperti ini saja

Silahkan baca detail property currentColor di css-tricks dan detail unit em di w3schools.

13. Buka file index.html, kemudian copy and paste code ini

14. Buka file package.json, kemudian tambahkan code ini

Dicode ini kita memberitahu webpack, kalau kita run yarn dev, set environment ke mode development, kemudian jalankan server. Kita juga memberitahu webpack kalau config mode development itu ada di file webpack.development.js. Kemudian kalau kita run yarn build, set environment ke mode production, kemudian optimize code dan show progressnya. Kita juga memberitahu webpack kalau config mode production itu ada di file webpack.production.js.

15. Buka terminal, kemudian run yarn start

Tunggu sampai prosesnya selesai, dan…. bomb 💣, SVG Sprites kalian sudah jadi, dan siap untuk di gunakan 😃

Oh ya, ini link github untuk project ini, barang kali ketika kalian run yarn start ada error dan yang lainnya.

Kesimpulan

Awesome, walaupun memerlukan waktu untuk membuat confignya, tapi setelah confignya selesai, cukup satu step saja untuk membuat SVG Sprites 😃

Semoga tutorial ini dapat membantu kalian dan tolong ingatkan saya kalau ada penjelasan atau tutur kata saya yang salah ya… 😃
See you on the next article.

Originally published at logustra.com on December 8, 2018.