Font Awesome

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

1. Installation: Install the Font Awesome React package.

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

Usage: 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;

Method 2: Using SVG Directly

1. SVG File: Place your SVG icons in a folder like public/icons.
2. Usage: Reference SVG icons directly in your component using the Image component for optimization or directly as an img 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;

Considerations

• 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.