Font Awesome คือชุดเครื่องมือที่รวบรวมไอคอนและโลโก้โซเชียลมีเดียจำนวนมากไว้สำหรับนักพัฒนาเว็บไซต์ ตามที่ DigitalOcean อธิบาย การใช้ไอคอนช่วยให้ผู้ใช้เข้าใจฟังก์ชันต่างๆ ของเว็บไซต์ได้ทันที เช่น ไอคอนรูปแว่นขยายที่สื่อถึงการค้นหา หรือไอคอนรูปถังขยะที่สื่อถึงการลบข้อมูล
สำหรับนักพัฒนา React การนำ Font Awesome มาใช้จะง่ายและมีประสิทธิภาพสูงสุดผ่าน Official React Component ที่ชื่อว่า @fortawesome/react-fontawesome ซึ่งทาง Font Awesome แนะนำอย่างเป็นทางการ คอมโพเนนต์นี้ช่วยให้เราสามารถนำเข้าและใช้งานไอคอนในรูปแบบของ SVG ซึ่งมีข้อดีกว่าวิธีดั้งเดิม (เช่น Web Fonts) หลายประการ โดยเฉพาะอย่างยิ่งคือการรองรับ Tree-shaking ที่จะช่วยลดขนาดของแอปพลิเคชันลงได้อย่างมาก โดยจะรวมเฉพาะไอคอนที่เราใช้งานจริงเข้าไปในโปรเจกต์เท่านั้น
การติดตั้งเพื่อใช้งาน Font Awesome กับ React นั้นมีขั้นตอนที่ชัดเจนและตรงไปตรงมา โดยเราจะติดตั้งแพ็กเกจที่จำเป็นทั้งหมดผ่าน npm (หรือ yarn) ตามคำแนะนำจากเอกสารทางการ
สิ่งแรกที่ต้องทำคือการติดตั้งคอมโพเนนต์ react-fontawesome ซึ่งเป็นหัวใจหลักในการแสดงผลไอคอนในแอปพลิเคชัน React ของเรา
npm i --save @fortawesome/react-fontawesome@latestหรือหากใช้ yarn: yarn add @fortawesome/react-fontawesome@latest
ถัดมาคือการติดตั้ง fontawesome-svg-core ซึ่งเป็นแพ็กเกจแกนกลางที่รวบรวมฟังก์ชันและเครื่องมือต่างๆ ที่จำเป็นเพื่อให้ไอคอนสามารถทำงานได้อย่างถูกต้อง
npm i --save @fortawesome/fontawesome-svg-coreหรือหากใช้ yarn: yarn add @fortawesome/fontawesome-svg-core
Font Awesome แบ่งไอคอนออกเป็นสไตล์ต่างๆ และแยกเป็นแพ็กเกจย่อยๆ สำหรับคู่มือนี้ เราจะเน้นไปที่ชุดไอคอนฟรี (Free Icon Packages) ซึ่งครอบคลุมการใช้งานส่วนใหญ่ได้เป็นอย่างดี โดยชุดไอคอนฟรีที่นิยมใช้มี 3 ชุดหลัก
free-solid-svg-icons: ไอคอนแบบทึบ (Solid)free-regular-svg-icons: ไอคอนแบบเส้นขอบ (Regular)free-brands-svg-icons: ไอคอนโลโก้แบรนด์ต่างๆคุณสามารถติดตั้งทั้งหมดได้ด้วยคำสั่งต่อไปนี้:
npm i --save @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-iconsหรือหากใช้ yarn: yarn add @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
เมื่อติดตั้งครบทั้ง 3 ขั้นตอนแล้ว โปรเจกต์ของคุณก็พร้อมที่จะเริ่มใช้งานไอคอนจาก Font Awesome ได้ทันที
การนำไอคอนมาแสดงผลในคอมโพเนนต์ React สามารถทำได้หลายวิธี แต่วิธีที่แนะนำและมีประสิทธิภาพสูงสุดมี 2 วิธีหลัก ตามที่ระบุในเอกสารของ Font Awesome ซึ่งแต่ละวิธีก็มีข้อดีและข้อเสียแตกต่างกันไป
วิธีนี้เป็นวิธีที่แนะนำมากที่สุด เนื่องจากจะใช้ประโยชน์จาก Tree-shaking ได้อย่างเต็มที่ หมายความว่าขนาดไฟล์สุดท้ายของแอปพลิเคชัน (Bundle size) จะเพิ่มขึ้นตามจำนวนไอคอนที่เรา import มาใช้งานจริงๆ เท่านั้น ทำให้แอปพลิเคชันมีขนาดเล็กและโหลดได้รวดเร็ว DigitalOcean ก็ได้เน้นย้ำถึงข้อดีนี้
ตัวอย่างการใช้งาน:
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
function MyComponent() {
return (
<div>
<h3>My Awesome Component</h3>
<p>
Let's have some <FontAwesomeIcon icon={faCoffee} />!
</p>
<p>
Task completed: <FontAwesomeIcon icon={faCheckSquare} />
</p>
<p>
Find me on <FontAwesomeIcon icon={faGithub} />
</p>
</div>
);
}
export default MyComponent;
หากโปรเจกต์ของคุณมีการใช้ไอคอนชุดเดิมซ้ำๆ ในหลายๆ คอมโพเนนต์ การสร้าง Library จะช่วยให้จัดการได้ง่ายขึ้น โดยเราจะ import ไอคอนทั้งหมดที่ต้องการใช้ไว้ในไฟล์เดียว แล้วเรียกใช้ไฟล์นั้นในจุดเริ่มต้นของแอป (เช่น index.js หรือ App.js) เพียงครั้งเดียว จากนั้นเราสามารถเรียกใช้ไอคอนได้จากทุกที่โดยใช้ชื่อไอคอนในรูปแบบ string
ขั้นตอนการสร้าง Library:
src/fontawesome.jslibrary และไอคอนที่ต้องการlibrary.add()ตัวอย่างไฟล์ src/fontawesome.js:
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faCheckSquare, faTrash } from '@fortawesome/free-solid-svg-icons';
import { faGithub, faReact } from '@fortawesome/free-brands-svg-icons';
// เพิ่มไอคอนเข้าไปใน library ทำให้สามารถเรียกใช้ได้ทั่วทั้งโปรเจกต์
library.add(faCoffee, faCheckSquare, faTrash, faGithub, faReact);
จากนั้น import ไฟล์นี้ใน src/index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './fontawesome'; // <-- Import library ที่เราสร้างขึ้น
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
ตัวอย่างการเรียกใช้ในคอมโพเนนต์:
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
function AnotherComponent() {
return (
<div>
{/* เรียกใช้ด้วย string */}
<FontAwesomeIcon icon="trash" />
{/* เรียกใช้ด้วย array [prefix, iconName] */}
<FontAwesomeIcon icon={['fas', 'coffee']} />
<FontAwesomeIcon icon={['fab', 'react']} />
</div>
);
}
คำอธิบาย Prefix: fas (Solid), far (Regular), fal (Light), fab (Brands) คือตัวย่อสำหรับสไตล์ของไอคอน ซึ่งจำเป็นเมื่อเรียกใช้ไอคอนด้วย array
| คุณสมบัติ | วิธีที่ 1: Import ทีละตัว | วิธีที่ 2: สร้าง Library |
|---|---|---|
| ประสิทธิภาพ (Bundle Size) | ดีเยี่ยม (รองรับ Tree-shaking) | ดี (ยังคงรองรับ Tree-shaking) |
| ความสะดวกในการใช้งาน | ต้อง import ทุกครั้งที่ใช้ในไฟล์ใหม่ | สะดวกมากเมื่อใช้ไอคอนซ้ำๆ ทั่วทั้งแอป |
| การจัดการโค้ด | เห็นที่มาของไอคอนชัดเจนในแต่ละไฟล์ | รวมศูนย์การจัดการไอคอนไว้ที่เดียว |
| กรณีที่เหมาะสม | โปรเจกต์ส่วนใหญ่, โปรเจกต์ที่เน้นประสิทธิภาพสูงสุด | โปรเจกต์ขนาดใหญ่ที่มีการใช้ไอคอนชุดเดิมซ้ำๆ |
หนึ่งในข้อผิดพลาดที่พบบ่อยคือการ import ไอคอนทั้งแพ็กเกจเข้ามาในโปรเจกต์ ซึ่งจะทำให้ขนาดของแอปพลิเคชันใหญ่ขึ้นโดยไม่จำเป็น การ import ทั้งแพ็กเกจ เช่น import { fas } from '@fortawesome/free-solid-svg-icons' จะทำให้ไอคอนทั้งหมดในชุดนั้นถูกรวมเข้ามาใน bundle ซึ่งอาจเพิ่มขนาดได้หลายร้อยกิโลไบต์
แผนภูมิด้านล่างแสดงการเปรียบเทียบขนาด Bundle โดยประมาณระหว่างวิธีการ import แบบต่างๆ เพื่อให้เห็นภาพความสำคัญของการเลือกใช้วิธีที่ถูกต้อง
จากแผนภูมิจะเห็นได้ว่าการ import เฉพาะไอคอนที่ใช้ (Individual Import) แทบไม่ส่งผลกระทบต่อขนาด Bundle ในขณะที่การ import ทั้งแพ็กเกจทำให้ขนาดเพิ่มขึ้นอย่างมหาศาล ดังนั้น ควรหลีกเลี่ยงการ import ทั้งแพ็กเกจเสมอ
@fortawesome/react-fontawesome มาพร้อมกับ props มากมายที่ช่วยให้เราปรับแต่งสไตล์ของไอคอนได้อย่างง่ายดาย ซึ่งเป็นวิธีที่สะดวกกว่าการเขียน CSS เองในหลายๆ กรณี
size กำหนดขนาดได้ตั้งแต่ "2xs" ถึง "2xl" หรือแบบตัวคูณ "1x" ถึง "10x".
<FontAwesomeIcon icon="coffee" size="2x" />style หรือ className เพื่อกำหนดสีได้ตามปกติ.
<FontAwesomeIcon icon="heart" style={{ color: 'red' }} />
<FontAwesomeIcon icon="star" className="text-yellow-500" /> {/* สำหรับ Tailwind CSS */}rotation (ค่าเป็นองศา 90, 180, 270) และ flip (ค่าเป็น "horizontal", "vertical", "both").
<FontAwesomeIcon icon="sync" rotation={90} />
<FontAwesomeIcon icon="arrow-right" flip="horizontal" />spin, pulse, beat, fade.
<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="heart" beat />fixedWidth เพื่อให้ไอคอนทุกตัวมีความกว้างเท่ากัน เหมาะสำหรับการจัดเรียงในเมนูหรือลิสต์.
<FontAwesomeIcon icon="home" fixedWidth />
<FontAwesomeIcon icon="user" fixedWidth />
มาลองนำความรู้ทั้งหมดมาสร้างคอมโพเนนต์ TodoItem ง่ายๆ ที่ประกอบด้วยข้อความ, ไอคอนสำหรับติ๊ก (checkbox) และไอคอนสำหรับลบ (trash) กัน
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งแพ็กเกจทั้งหมดตามที่อธิบายไว้ในส่วน "ขั้นตอนการติดตั้ง" เรียบร้อยแล้ว
สร้างไฟล์ใหม่ src/components/TodoItem.js และใส่โค้ดต่อไปนี้:
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquare, faCheckSquare, faTrash } from '@fortawesome/free-solid-svg-icons';
// สร้าง CSS-in-JS เพื่อความสะดวก
const styles = {
container: {
display: 'flex',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #eee',
fontSize: '1.2rem',
},
icon: {
marginRight: '15px',
cursor: 'pointer',
color: '#4a5568',
},
trashIcon: {
marginLeft: 'auto',
cursor: 'pointer',
color: '#a0aec0',
},
completedText: {
textDecoration: 'line-through',
color: '#a0aec0',
}
};
function TodoItem({ text }) {
const [isCompleted, setIsCompleted] = useState(false);
const toggleComplete = () => {
setIsCompleted(!isCompleted);
};
return (
<div style={styles.container}>
<FontAwesomeIcon
icon={isCompleted ? faCheckSquare : faSquare}
style={styles.icon}
onClick={toggleComplete}
size="lg"
/>
<span style={isCompleted ? styles.completedText : {}}>
{text}
</span>
<FontAwesomeIcon
icon={faTrash}
style={styles.trashIcon}
title="Delete"
onMouseOver={(e) => e.currentTarget.style.color = '#e53e3e'}
onMouseOut={(e) => e.currentTarget.style.color = '#a0aec0'}
/>
</div>
);
}
export default TodoItem;
แก้ไขไฟล์ src/App.js เพื่อแสดงรายการ To-Do ของเรา:
import React from 'react';
import TodoItem from './components/TodoItem';
function App() {
const todos = [
'เรียนรู้การใช้ Font Awesome ใน React',
'สร้าง Workshop ที่ใช้งานได้จริง',
'ดื่มกาแฟ',
];
return (
<div style={{ maxWidth: '500px', margin: '50px auto', border: '1px solid #ddd', borderRadius: '8px' }}>
<h2 style={{ padding: '15px', borderBottom: '1px solid #ddd', margin: 0 }}>My To-Do List</h2>
{todos.map((todo, index) => (
<TodoItem key={index} text={todo} />
))}
</div>
);
}
export default App;
เมื่อรันโปรเจกต์ (npm start) คุณจะเห็น To-Do List ที่มีไอคอนสวยงามและสามารถโต้ตอบได้ ซึ่งเป็นการนำความสามารถของ @fortawesome/react-fontawesome มาใช้ได้อย่างเต็มประสิทธิภาพ
การผสาน Font Awesome เข้ากับ React ด้วยไลบรารี @fortawesome/react-fontawesome เป็นวิธีที่ทันสมัยและมีประสิทธิภาพสูง ช่วยให้นักพัฒนาสามารถเพิ่มไอคอนคุณภาพสูงลงในแอปพลิเคชันได้อย่างง่ายดาย
ประเด็นสำคัญที่ควรจำ:
@fortawesome/react-fontawesome, @fortawesome/fontawesome-svg-core, และชุดไอคอนที่คุณต้องการ (เช่น @fortawesome/free-solid-svg-icons).size, color, spin เพื่อปรับแต่งสไตล์ไอคอนได้อย่างรวดเร็ว.ด้วยความเข้าใจในหลักการเหล่านี้ คุณจะสามารถใช้งานไอคอนในโปรเจกต์ React ของคุณได้อย่างมืออาชีพและมีประสิทธิภาพสูงสุด สำหรับข้อมูลเพิ่มเติมและไอคอนทั้งหมด สามารถศึกษาได้จาก เอกสารทางการของ Font Awesome