Videos → Iconify Web Component

แนะนำตัวและหัวข้อการพูด0:00

สวัสดีครับ ผมชื่อไท เป็น software engineer ที่ Eventpop อยู่ใต้ Opn Pro วันนี้ก็เป็น flash talk สั้นๆ วันนี้ผมจะมาขาย library ตัวนึงที่ชื่อว่า Iconify Icon Web Components อันนี้ผมไม่ได้ทำนะ ผมไปเจอมา แล้วผมใช้มาตลอดเลย แล้วชอบมากๆ

การใช้ไอคอนบนเว็บในอดีต0:22

ถ้าเราย้อนกลับไปสัก 10 ปี การจะเอา icon มาใช้บนเว็บ ไม่ใช่เรื่องยาก ส่วนมากถ้าเราใช้ Bootstrap มันก็จะมี พวก icon set ต่างๆ ที่แบบ built-in มาให้ เราก็แค่เอา CSS code ไปใส่ไว้ใน head ใช่ไหมครับ แล้วก็ copy ตัวอย่าง code อยากจะใช้ไอคอนไหนก็ ก๊อบ code มาแปะ แค่นี้ก็ใช้ได้ ไอคอนก็โผล่ใช่ไหมครับ แล้ว

การเปลี่ยนแปลงของวิธีการเขียนโค้ดในปัจจุบัน0:46

พอมาดูปีนี้ครับเป็นยังไงกันบ้างนะครับ ในยุคนี้วิธีการเขียนโค้ดของเราก็ค่อยๆ เปลี่ยนไปใช่ไหมครับ เมื่อก่อนเราเขียน HTML ตรงๆ เดี๋ยวนี้เราเขียนพวกเทมเพลต หรือว่าเขียน JSX กันมากขึ้นนะ เพราะว่าใช้ React กัน

หรือการใส่ CSS ให้กับหน้าเว็บนะครับ เมื่อก่อนเราก็ใส่แท็ก link stylesheet ใช่ไหม แต่เดี๋ยวนี้สิ่งที่นิยมมันก็ค่อยๆ เปลี่ยนไป กลายเป็น การ npm install file CSS เข้ามา แล้วก็ bundle พร้อมกับตัวแอปเข้าไปเลยใช่ไหมครับ

ความหลากหลายของ Icon Sets และปัญหาที่เกิดขึ้น1:18

แถมปัจจุบันเนี่ยพวก icon set ต่างๆ เนี่ย เริ่มมีหลากหลายให้เราเลือกใช้มากขึ้นนะครับ ตัวที่ดังที่สุดก็คงจะหนีไม่พ้น Font Awesome ใช่ไหมครับ การเอา Font Awesome มาใช้ใน project React นะ ทางเว็บ Font Awesome เนี่ยก็มีคู่มืออยู่ใน docs ให้ใช้งานอยู่แล้วนะครับ ก็ install dependency 4 ตัวนี้ แล้วก็ import component FontAwesomeIcon แล้วก็ import icon ที่อยากจะใช้แล้วก็เอามาใช้ แต่ถ้า project เราไม่ได้ใช้ React ล่ะครับ ถ้าเราใช้ Vue

doc ก็มีบอกเนาะ ไม่เป็นไร ก็ import

component มา เลือกว่าจะเอาใช้ Vue 2 หรือ Vue 3 นะครับ configure ว่าให้ Vue รู้จักตัว component นี้ สุดท้ายก็เอามาใช้นะครับ ก็ easy นะครับ Svelte ล่ะครับ ไม่รู้ครับ doc ไม่ได้เขียน ก็ต้องไปหาวิธีกันเอาเองนะว่าจะเอามาใช้ยังไง ซึ่งก็มีหลายท่ามาก จะใช้ SVG Core หรือจะเอาไฟล์ CSS แบบเดิมมาใช้อะไรพวกนี้ ไม่มีคำตอบให้ใช่ไหมใน docs อันนี้ก็จะเป็นปัญหาของการใช้งานพวก library ที่เป็น component icon ประเภทแรกนะครับ

ประเภทของ Icon Components2:26

ผมมองว่ามันมี icon component อยู่ประมาณ 4 ประเภทครับ

1. icon component ที่พัฒนา โดยเจ้าของ icon set2:30

ประเภทแรกก็คือ icon components ที่พัฒนา โดยเจ้าของ icon set นะครับ ก็จะพบว่ามีปัญหาคือมัน support framework แค่บาง framework ตัวอื่นเราก็ต้องไป- เราก็ต้องไปแบบ- ศึกษาเอาเอง ว่าจะเอามันมาใช้กับ framework ของเรายังไงเนอะ มาดู set อื่นๆ กันดีกว่า Material Design Icon นะครับ ตัวนี้ก็ทำโดย Google ใช่ไหม ถ้าเราอยากจะเอา Material Design Icon มาใช้ในแอป React ล่ะ ทำยังไงครับ ไม่ได้บอกนะ ใช่ไหม docs ไม่ได้บอกเลยว่าจะเอามาใช้ใน React ยังไงนะครับ

2. icon component ที่มาพร้อมกับ UI toolkit3:03

แต่ยังดีครับที่เรามีไลบรารีที่ชื่อว่า MUI หรือ Material UI นะครับ ซึ่งก็ได้ทำ Material Icon Component ไว้ให้ใช้ใน project React ได้นะครับ ถ้าจะใช้ก็ install dependency 4 ตัวนะ แล้วก็เอาไอคอนแต่ละตัวเนี่ยมาใช้ได้เลย จะเห็นว่าแต่ละไอคอนนี้เขาก็ทำเป็น React component พร้อมใช้นะครับ ก็สะดวกครับ Vue ล่ะครับ Vue ก็ไม่มี แต่ว่ามันก็จะมี library ที่ชื่อว่า Vuetify นะครับ ก็มี

font icon รวบรวม icon ของ Material Design ให้ใช้เหมือนกันนะครับ วิธีใช้ก็ไปอ่าน docs กันเอาเองนะครับ อันนี้คือผมจัดให้เป็นประเภทที่ 2 คือ icon component ที่มาพร้อมกับ UI toolkit ซึ่งเดี๋ยวก็จะเจอปัญหาครับ ถ้าเกิดบางทีเนี่ย ถ้าเกิดบางทีไอคอนที่เราอยากจะใช้ มันไม่ได้อยู่ใน Material Design แต่มันไปอยู่ใน Font Awesome แล้วเราจะทำยังไง เราต้องลง dependency 8 ตัวแบบนี้หรือเปล่า แล้วพอเอาไอคอนจาก 2 set มาใช้เนี่ย ก็จะเห็นว่า syntax มันแบบโห คนละเรื่องกันอีก อันหนึ่งเป็น component อันหนึ่งเป็น component กลาง แล้วเอาไอคอนมาใส่ อีกอันหนึ่งมาเป็น React component สำเร็จรูปเลย แถมฟีเจอร์ก็ไม่ตรงกันอีก อย่างของ MUI เนี่ย กำหนดสี โดยอิงจากธีมได้เลย แต่ของ Font Awesome หรือของเจ้าอื่น อาจจะไม่มีฟีเจอร์แบบนี้ใช่ไหมครับ ก็เป็นปัญหาของแบบที่ 2 ครับ

จริงๆ ปัญหาก็มีอีกเยอะนะ แต่เราไปต่อกันดีกว่า

3. ไลบรารีรวบรวมไอคอนเซ็ตต่างๆ ไว้ใช้กับเฟรมเวิร์คแต่ละตัว4:26

ต่อมาผมก็เจอไลบรารีที่ชื่อ React Icons ครับ ซึ่งดีมากเลยครับ มันรวบรวม icon set ดังๆ แล้วก็แพ็กเกจไว้เป็น npm ตัวเดียวนะครับ install ใช้ใน React ได้เลย ก็คือ import มาแล้วก็ใช้เป็น component แบบนี้นะครับ อันนี้ผมเรียกเป็นประเภทที่ 3 คือ

เป็นไลบรารีรวมไอคอนเซ็ตดังๆ ที่เอาไว้ใช้กับเฟรมเวิร์คแต่ละตัวนะครับ ซึ่งของ Vue ของ Svelte ของ Solid ของ Angular พวกนี้มีให้ใช้หมดเลย ก็พิมพ์ชื่อเฟรมเวิร์คแล้วก็ตามด้วย icons นะครับ แต่ปัญหาก็ยังมีครับ คือ library แต่ละตัว ก็ maintain คนละคนกันใช่ไหม จำนวน icon ก็ไม่เท่ากัน บางอันเนี่ยแบบโห มีเยอะ บางอันนี้เยอะมาก แต่บางอันก็อาจจะมีให้เลือกแค่นิดเดียว แล้วเวลาเราอยากจะใช้เนี่ย ก็ต้องขึ้นอยู่กับ library ที่เราเลือกใช้เนาะ หรือบางทีเราอยากจะใช้ไอคอนที่มันไม่ได้อยู่ใน ไอคอนเซ็ตอะไรเลย เป็นไอคอนที่เราลากวาดใน Figma เนี่ย

ทำยังไงอ่ะ อันนี้ก็บางตัวก็ไม่มีคำตอบให้นะครับ เราก็ต้องไป implement ไอคอนเอาเอง แบบ export รูปมาสร้าง tag SVG ใส่อะไรเองหมดเลย อ่า ลำบากครับ ที่ผ่านมาเนี่ย การเอาไอคอนมาใส่ในเว็บเลยเป็นเรื่องนึงที่ เวลาผมเจอ ผมรู้สึกว่าแบบ โอ๊ย เหนื่อยจังเลย ขี้เกียจทำจัง ยุ่งยากจังเลย

4. ไลบรารีที่ไม่อิงกับ icon set หรือ framework ใด5:40

จนกระทั่งผมมาเจอโปรเจคหนึ่งที่ชื่อว่า iconify.design นะครับ ผมจัดให้อยู่ในประเภทที่ 4 ครับ คือ icon library ที่ไม่อิงกับ icon set ไหนเลย แล้วก็ไม่อิงกับ framework อะไรเลยด้วย รู้สึกว่ารอบนี้นะครับผมกับลิฟฟี่ก็จะ หัวข้อพูดก็จะมีความคล้ายๆ กัน

คือเราเริ่มเจอ solution ที่มัน cross library cross framework นะครับ

แนะนำ Iconify.design และ Iconify Icon Web Component6:02

อันนี้คือ Iconify นะครับ เป็นโปรเจคที่รวบรวม icon กว่า 150,000 ไอคอน รวมมาให้ใช้ในที่เดียวกันนะครับ ก็ไปดูรายการไอคอนต่างๆ ได้ก็จะโคตรเยอะนะครับ แล้วไลบรารีที่ผม จะมาขายในวันนี้ครับ ชื่อว่า Iconify Icon Web Component นะครับ เนื่องจากมันเป็น web component เนี่ย มันไม่อิงกับ framework อะไรเลยครับ ต่อให้เราเขียนเว็บแบบ HTML ธรรมดาเนี่ย ไม่ใช้ framework อะไรเลยนะ ก็สามารถเอาไลบรารีนี้มาใช้ได้ครับ

วิธีการใช้งาน Iconify Icon Web Component ในเฟรมเวิร์คต่างๆ6:29

เริ่มจากการใส่ script tag เพื่อใส่ script ของ web component ตัวนี้เข้าไป แล้วก็ดึงมาใช้ครับ ก็จะเห็นว่าเป็น custom element ใน HTML นะครับ ก็จะได้ icon แบบนี้ เรียบร้อย - Vue ล่ะครับ ถ้าอยากใช้ใน project Vue ก็ install dependency 1 ตัวนะครับ แล้วก็ import เอามาใช้นะครับ Svelte ล่ะครับ Svelte ก็เหมือนกันครับ ติดตั้งแล้วก็เอามาใช้ syntax เหมือนกันเป๊ะเลย React ล่ะครับ ก็เหมือนกันครับ import แล้วก็เอามาใช้ แต่ว่า library นี้นะครับ- React มันจะค่อนข้างเรื่องมาก เพราะว่าโดย default ของ React เนี่ย มันไม่รู้จักพวก custom element ใน HTML ปกติถ้าใช้ React กับ TypeScript นะ มันจะรู้จักแค่ React component กันเอง ถ้าเราไปใช้ custom element TypeScript มันจะบ่น

คือถ้าเอามาใช้ตรงๆ มันก็จะขึ้น type error นะครับ มีหนำซ้ำไม่พอนะครับ แถมใน React เนี่ย support web component ของมันโคตรแปลก คือผมใส่ className เพื่อเปลี่ยนสีของไอคอน ให้เป็นสีเขียว แต่ใช้ไม่ได้ ใช้ไม่ได้ทำไม เพราะว่าเวลาเรา render element อื่นๆ ปกติ React มันจะเปลี่ยน className เป็น class ให้ ยกเว้นพวก web components มันไม่เปลี่ยนให้ไม่รู้ทำไม ครับ อ่า ก็ ก็จะยุ่งยากนิดนึง ซึ่งทีม Iconify ก็ทำ wrapper มาให้

ชื่อว่า @iconify-icon/react ก็ install ตัวนี้แทนนะครับ แล้วก็เอามาใช้นะครับ ก็ import แบบนี้ แล้วก็ใช้แบบข้างล่างนะครับ เบื้องหลังเนี่ย ตัว React component ตัวนี้ มันจะ render เป็น web component อีกทีนึง ฉะนั้น API ต่างๆ ก็จะเหมือนกันหมด แถมมี TypeScript มาให้ด้วยนะครับ คราวนี้เนี่ย

การทำงานเบื้องหลังของ Iconify และการจัดการข้อมูลไอคอน8:05

ตัวไลบรารี่เนี้ยมันขนาดแค่ 8.2 กิโลไบต์ แต่ว่ามันมีไอคอนให้เลือกตั้ง 150,000 ไอคอน ถามว่ารูปไอคอนต่างๆ มันมาจากไหนครับ ดูตัวอย่างอันนี้ครับผม ลอง inspect ดู ก็พบว่าเวลาเรา render ไอคอนตัวนี้ มันมีการยิง request ไปที่ API ของ iconify.design นะครับ เพื่อขอข้อมูลของไอคอนต่างๆ ที่ใช้ แล้วมันก็จะ return เป็น JSON ออกมาแบบนี้นะครับ ซึ่งบางคนก็อาจจะมี concern ว่าไม่อยากให้แอป มีการยิง API ออกไปข้างนอก อยากให้ทุกอย่างมันถูก bundle หมดเลย ทำได้ไหม ก็ทำได้นะครับ เรากลับมาที่โค้ดเดิมนะ จะเห็นว่าชื่อไอคอนประกอบไปด้วยสองส่วนนะครับ ก็คืออันแรกเป็นชื่อของ icon set นะครับ icon set ทั้งหมดใน Iconify เนี่ย เขาอัปโหลดขึ้น npm ไปด้วยนะครับ ฉะนั้นก็เราสามารถ install เข้ามาได้ หลังจากนั้นชื่อไอคอนเนี่ย เราก็ import เข้ามานะครับ อันนี้ก็คือ import ไอคอนที่ต้องการใช้ แล้วก็แทนที่จะกำหนดชื่อไอคอนเป็น string ก็เอา object ที่ import เนี่ย ใส่เข้าไปแทนนะครับ

สิ่งที่เกิดขึ้นคือตอนที่มัน render เป็น HTML นะ เดิมที่ตรง attribute icon เป็นชื่อ icon นะ

มันเอาข้อมูลของ icon ยัดเข้าไปใน attribute icon เลยครับ ทำให้ตอนที่ render เนี่ย ตัว web component นี้มันมีข้อมูลพอแล้ว ก็ไม่ต้องไปเรียก API อะไรเพิ่มนะครับ

การสร้างและใช้งาน Custom Icons9:26

แล้วก็ถ้าเราอยากจะ render icon ที่ไม่ได้อยู่ใน set พวกนี้ล่ะ อย่างพวก custom icon ต่างๆ ก็มาดู syntax เมื่อกี้กันนะครับ จะเห็นว่า icon definition ของมันคือ มี 3 key คือ มี width มี height มี body ฉะนั้นเราสามารถสร้าง icon ของตัวเอง แล้วก็ทำให้มันอยู่ใน format แบบนี้ครับ เสร็จแล้วก็เอามาใช้ได้เลยประมาณนี้ครับ

สรุปประโยชน์ของ Iconify และข้อมูลเพิ่มเติม9:50

ฉะนั้นเนี่ยตั้งแต่ที่ผมใช้ Iconify ผมเลยรู้สึกว่าปัญหาของการนำไอคอนมาใช้ในเว็บ ส่วนมากเนี่ย เหลือน้อยมากและแทบจะไม่ค่อยมีแล้ว จริงๆ ยังมีรายละเอียดปลีกย่อยอื่นๆ อีกมากนะครับ เช่นวิธีการเอา web components ไปใช้กับ framework ที่เป็นพวก server-side rendering เช่นพวก Next.js แล้วจะทำยังไงให้ตอน hydrate มันแสดงผลไอคอนได้อย่างรวดเร็วอะไรพวกนี้ ผมไม่ได้เตรียมไว้ใน session วันนี้ครับ แต่ว่าผมเขียนเป็นโน้ตไว้ในเว็บของตัวเองแล้วครับ ก็สามารถไปอ่านได้ที่ลิงก์นี้นะครับ ก็ session วันนี้ของผมมีแค่นี้ครับ ขอบคุณครับ