มาลองเปลี่ยน SVG เป็น Font Icon ด้วย IcoMoon App กันดีกว่า
IcoMoon App เป็นเครื่องมือจัดการไอคอนของ IcoMoon ผู้ให้บริการและ จัดการไอคอน icon ชื่อดัง มีผู้ใช้บริการมากมายรวมถึงบริษัทชั้นนำระดับโลกหลายๆเจ้า ซึ่งเจ้า IcoMoon App เป็นเครื่องมือจัดการไอคอนที่ค่อนข้างโดดเด่น ใช้งานง่าย และมีเวอร์ชั่นฟรีอีกด้วย (นี่แหละสำคัญ) มีฟังค์ชั่นจัดการองค์ประกอบไฟล์ SVG เช่น Rotate, Alignment, Scale ฯลฯ และยังสามารถ Generate เป็น Font Icon เอาไปใช้งานกับเว็บไซต์ได้อีกด้วย เริ่มสนใจกันแล้วใช่ม้าาา… งั้นมาลุยกันเลย !
Part 1 การจัดการ Project
เมื่อเข้าเว็บไซต์ของ IcoMoon แล้ว ให้กดไปที่ IcoMoon App ที่บนขวาของเว็บไซต์
เมื่อเข้ามาที่ IcoMoon App แล้ว จะเห็นว่ามี icon ฟรีของทาง IcoMoon ที่เราสามารถนำไปใช้ได้ขึ้นมา ซึ่งเจ้า IcoMoon App เนี้ย ไม่ต้อง Sign in ก็ยังสามารถใช้งานได้อีกด้วยนะ เจ๋งสุดๆ
เอาหล่ะ มาเริ่มจัดการ Project กัน ให้เรากดไปที่ Untitled Project ที่บนขวา
จากนั้นเว็บไซต์จะพาเรามายังหน้าจัดการ Projects มีส่วนประกอบหลักอยู่ 6 ส่วน คือ
1. ชื่อ Project (กดที่ชื่อ project เพื่อเปลี่ยนชื่อได้)
2. Load — เปิด project นั้นๆ ขึ้นมา
3. Download — ดาวน์โหลด project เป็นไฟล์ json เพื่อเอาไปส่งให้คนอื่นใช้ได้
4. Remove — ลบ project นั้นๆ ทิ้ง
5. New Project — สร้าง project ใหม่ ถ้าไม่เป็น premium member จะสร้างได้แค่ 4 Project เท่านั้น
6. Import Project — นำเข้า project จากไฟล์ json ที่มาจากข้อ 3
ถ้าจัดการ project เสร็จแล้ว ให้ load project นั้นๆ แล้วเตรียมตัวเข้าสู่ part ถัดไป
Part 2 การจัดการ Icon Set และ การนำเข้าไอคอน (Import Icons)
ถ้าเรายังใช้ project เดิมที่ระบบสร้างให้ตั้งแต่แรก (ที่มีไอคอนฟรีมาให้) ไอคอนนั้นจะมีชื่อกำกับไว้ว่า IcoMoon — Free ซึ่งเราเรียกกลุ่มไอคอนนี้ว่า Set โดย IcoMoon — Free ก็คือชื่อของ Set นั้นๆ นั่นเอง และในหนึ่ง project ก็สามารถมีได้หลาย Set อีกด้วย
มาเริ่มส่วนแรกกันเลย เริ่มจากการลบ Set IcoMoon — Free กันก่อน กดที่ไอคอนเบอร์เกอร์ (ใช่ไหมนะ ?) หลังชื่อ Set จะมีเมนูออปชั่นออกมา (ในที่นี้ไม่ขออธิบายทั้งหมดนะครับ เดี๊ยวยาว) จากนั้นเลือก Remove Set เพื่อทำการลบ Set นั้นๆ ทีนี้ project เราก็โล่งงงงง
ในเมื่อมีวิธีการลบ Set แล้ว ก็ต้องมีวิธีการนำเข้า icon ใน Set เช่นกัน โดยกดที่ปุ่ม Import Icons สีม่วงที่มุมบนซ้าย จากนั้นเลือกไฟล์ SVG ที่เตรียมไว้ได้เลย ทีนี้พวกไฟล์ที่เรานำเข้าจะขึ้นมาใน project เรา โดยจะอยู่ภายใต้ชื่อ Set เดียวกัน
ถ้าอยากเพิ่มไอคอนเข้ามาใน Set ของเรา แค่กดไปที่ไอคอนเบอร์เกอร์ แล้วเลือก Import to Set
ทริคเล็ก ๆ สำหรับไฟล์ SVG ที่จะนำเข้า คือ ให้ตั้งชื่อเป็นตัวเล็กทั้งหมดและ แทนที่ช่องว่างด้วยขีด ( — ) ไม่งั้นต้องมาเหนื่อยแก้ชื่อทีหลังแน่ ๆ
ถ้าเราต้องการเปลี่ยนชื่อของ Set เราต้องแก้ไข คุณสมบัติ หรือ Properties ของ Set โดยกดที่ไอคอนเบอร์เกอร์ เลือก Properties จะมี Pop-up Properties ขึ้นมา (รูปฝั่งซ้าย) กด Edit Metadata จะขึ้นอีก Pop-up (รูปฝั่งขวา) ซึ่งใน Pop-up นี้ เรามาสามารถแก้ไขชื่อของ Set หรือแม้แต่เพิ่มรายละเอียดความเป็นเจ้าข้าวเจ้าของได้อีกด้วยตามสะดวก
Part 3 การใช้งาน Tools จัดการไอคอน
ทีนี้เรามาดู Tools หรือเครื่องมือที่ใช้จัดการไอคอนของเรากัน บอกไว้ก่อนเลยว่า Tools นี้ไม่สามารถแก้ไขหรือ สร้างองค์ประกอบของไอคอนขึ้นมาใหม่ได้นะ แต่ถึงอย่างงั้นก็ช่วยเราปรับบางส่วนนิดๆ หน่อยๆ ได้ดีเลยแหละ โดย Tools จะมีอยู่ 4 อย่างดังนี้
1. Select มีหน้าที่ คือ เลือกไอคอน (ไอคอนที่ถูกเลือกจะมีกรอบสีเหลืองขึ้นมา)
2. Remove มีหน้าที่ คือ ลบไอคอนที่เราคลิก (ตอน hover จะมีกรอบสีแดงขี้นมา)
3. Move มีหน้าที่ คือ ย้ายตำแหน่งของไอคอน เพราะตอนเรา Generate Icon Font ชื่อของไอคอนในไฟล์ จะเรียงตามลำดับเหมือนใน Set การใช้งาน Move ก็แค่คลิกค้างที่ไอคอนนั้นๆ แล้วก็ลากไปวางในตำแหน่งที่เราต้องการ (ตอนคลิกค้าง จะมีกรอบสีเขียวขี้นมา)
4. Edit มีหน้าที่ คือ แก้ไของค์ประกอบของไอคอน (นี่แหละของดี) ใช้งานโดยคลิกไปที่ไอคอนทีต้องการแก้ไข จะมี Pop-up แก้ไขไอคอนขึ้นมา มีอยู่ 4 ส่วนหลัก ได้แก่
4.1 ส่วน Preview แสดงไอคอนนั้นๆ ให้เราเห็นว่ามีระยะห่างจากขอบเท่าไหร่ อยู่จุดกึ่งกลางไหม ก็สามารถดูได้จากส่วนนี้
4.2 ส่วน Edit มีฟังค์ชั่นอยู่ 5 ส่วน ได้แก่
- Rotate/Mirror ตามชื่อเลย ใช้หมุน/กลับด้าน
- Move ใช้เพื่อขยับตำแหน่งของไอคอนขึ้น/ลง/ซ้าย/ขวา
- Scale ใช้เพื่อลด/เพิ่มขนาดของไอคอน
- Canvas/Alignment ใช้เพื่อ เพิ่ม/ลด ขนาดของ canvas และ จัดตำแหน่งของไอคอน เช่น ชิดซ้าย ชิดบน หรือ อยู่ตรงกลาง เป็นต้น
- Color ใช้เพื่อลบสีที่ติดมาแต่เดิม เพื่อให้ไอคอนเป็นค่าสีกลาง **แนะนำให้ลบเสมอ** ไม่งั้นสีจะติดไปยัง Font Icon ของเรา ทำให้เปลี่ยนสียุ่งยากกว่าปกติ
ปล. ถ้าฟังค์ชั่น Color ไม่มี แสดงว่าไอคอนของเรามีค่าสีเป็นกลางแล้ว
4.3 ส่วน Tags and Names เอาไว้เปลี่ยนชื่อและ แท็กให้กับไอคอน
4.4 ส่วนอื่น ๆ
- ปุ่ม Download(SVG) ดาวน์โหลด SVG ของไอคอนนั้นๆลงเครื่อง
- ปุ่ม Replace เลือก SVG ใหม่มาแทนที่ SVG ตัวเก่า แต่จะใช้ชื่อและ แท็กตามตัวเก่า
- ปุ่ม Duplicate สร้างไอคอนตัวนั้นๆ เพิ่มขึ้นมา แท็กจะเหมือนกัน แต่ชื่อต้องสร้างใหม่
จะเห็นว่า Tools จัดการไอคอนนั้นค่อนข้างมีประโยชน์ทีเดียว ช่วยเก็บตกส่วนเล็กๆ น้อยๆ ที่เราอาจจะมองข้ามมันไปได้ ทั้งยังปรับแต่งให้ต่างจากเดิมไปเลยก็ยังได้
Part 4 การ Generate Font
มาถึงส่วนสำคัญของบทความนี้ซะที คือการ Generate Font Icon นั้นเอง (กว่าจะมาถึง ฮ่าๆๆ) มาเริ่มขั้นตอนกันเลย !
- ใช้ Select tools เพื่อเลือกไอคอนที่ต้องการจะนำไป Generate Font Icon
2. กดแท็บ Generate Font ที่ขวาล่างของเว็บไซต์ เพื่อเข้าหน้า Generate Font
ในหน้านี้เราแสดงไอคอนที่เราเลือกมา พร้อมชื่อของไอคอน เผื่อเราอยากรีเช็คอีกที
3. ทำการ Setting Preference โดยการกดปุ่ม Preferences ที่ด้านบนซ้าย จะมี Pop-up ขึ้นมา ทำให้เราสามารถเซ็ตค่าต่างๆ ของ font icon ที่เราจะสร้างออกมาได้อย่างละเอียด แต่ผมจะบอกแค่ 2 ส่วนนะ เพราะในส่วนอื่นจะเซ็ตหรือไม่เซ็ตก็ได้
3.1 ส่วนแรกจะไม่ได้อยู่ในหัวข้อไหนเลย คือส่วนของการตั้งชื่อ font ของเรานั้นเอง
- Font Name จะเป็นชื่อ font-family ของเรา
- Class Prefix เพิ่มคำนำหน้าในชื่อ class ของเรา เช่น ใส่ Class Prefix ว่า “ icon- ” และไอคอนของเราชื่อว่า “ email ” class ของไอคอนจะเป็น “ .icon-email ”
- Class Suffix เพิ่มคำท้ายในชื่อ class ของเรา เช่น ใส่ Class Suffix ว่า “ -test ” และไอคอนของเราชื่อว่า “ email ” class ของไอคอนจะเป็น “ .email-test ”
3.2 ส่วนหัวข้อ Version ในส่วนนี้เราสามารถใส่เวอร์ชั่นไอคอนของเรา เพื่อให้เราดูได้ว่าไอคอนเรา ณ ตอนนี้อยู่ในเวอร์ชั่นไหน ส่วนของ Developer ก็จะเช็คได้ว่าไอคอนที่ใช้อยู่ปัจจุบันเป็นเวอร์ชั่นล่าสุดหรือยัง
เราสามารถใส่ได้ทั้ง Major และ Minor เวอร์ชั่นจะแสดงในรูปแบบ *Major*.*Minor* เช่น 1.0
4. เมื่อเรา Setting Preference เรียบร้อยแล้ว เราก็เพียงทำการกดปุ่ม Download ที่เดียวกันกับแท็บ Generate Font ในด้านล่างขวา ก็จะทำการดาวน์โหลด Font Icon ของเราเป็นไฟล์ zip เป็นที่เรียบร้อย… ใช่ครับ ! แค่นี้จริงๆ !
Part 5 การดู Font Icon
เมื่อเราทำการแตกไฟล์ Font Icon ของเรา เราจะได้มาทั้งหมด 6 ไฟล์ดังในรูป
เราสามารถดูไอคอนของเราได้โดยการดับเบิลคลิกไฟล์ demo.html เราจะเห็นรูปไอคอนพร้อมกับชื่อ class ของไอคอนนั้นๆ ทำให้เราค้นหาไอคอนเพื่อเอาไปใช้งานได้ง่ายมากขึ้น ไม่ต้องมานั่งเดาจากชื่อ (ลองคิดสภาพว่ามีไอคอนสัก 1,000 ไอคอน ฮ่าๆๆ) เป็นความสะดวกที่ส่วนตัวของผมชอบมากเลยทีเดียว
ส่วนการนำไปใช้งานจริงๆ เราก็สามารถแกะโค้ดจากไฟล์ demo.html ได้เลย import ไฟล์ไม่กี่ไฟล์ก็เสร็จแล้ว
ส่งท้าย
ในการใช้งาน IcoMoon App ยังมีอีกหลายส่วนมากๆ ที่ไม่ได้อยู่ในบทความนี้ เพราะผมกลัวจะออกนอกเรื่อง (ฮ่าๆๆ) แต่ทั้งหมดนี้ก็เป็นส่วนสำคัญหลักๆ ที่ผมคิดว่าทุกท่านน่าจะใช้งานได้โดยไม่ติดปัญหา (ไหมนะ ?) อย่างไรก็ดี นี่เป็นบทความแรกของผม อาจจะอธิบายไม่ชัดเจนมากเท่าที่ควร ถ้าใครมีคำถาม หรือคำอธิบายเพิ่มเติม สามารถคอมเมนต์มาเลยนะครับ ขอบคุณขอบใจขอบพระทัยแต๊งกิ้ว สวัสดีครับ
