To use icons in a Next.js 14 project, you can integrate a popular library like Font Awesome or use SVG icons directly. Here’s a practical example using both methods:
Method 1: Using Font Awesome
- Installation: Install the Font Awesome React package.
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core
BashUsage: Import and use Font Awesome icons in your component.
// app/components/MyComponent.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
const MyComponent = () => {
return (
<div>
<h1>Enjoy your coffee</h1>
<FontAwesomeIcon icon={faCoffee} />
</div>
);
};
export default MyComponent;
BashMethod 2: Using SVG Directly
- SVG File: Place your SVG icons in a folder like
public/icons
. - Usage: Reference SVG icons directly in your component using the
Image
component for optimization or directly as animg
tag.
// app/components/MyComponent.tsx
import Image from 'next/image';
const MyComponent = () => {
return (
<div>
<h1>Hello Next.js</h1>
{/* Using Next.js Image component for SVG */}
<Image src="/icons/my-icon.svg" alt="My Icon" width={50} height={50} />
{/* Or using img tag directly */}
<img src="/icons/my-icon.svg" alt="My Icon" />
</div>
);
};
export default MyComponent;
BashConsiderations
- Font Awesome: Provides a large collection of icons and is easy to use with components.
- SVG Icons: Best for custom icons, and using the
Image
component helps with optimization like lazy loading.
These methods will integrate seamlessly into a Next.js project, providing flexibility in how you manage and display icons across your application. Choose the method that best fits your project’s needs—Font Awesome for extensive icon options and ease of use, or direct SVG for more control and fewer dependencies.