react icons in nextJS

1. Install the required packages:

npm install react-icons

1. Import the desired icon component in your Next.js component file:

import { FaGithub } from 'react-icons/fa';

1. Use the imported icon component within your JSX:

function MyComponent() {
  return (
    <div>
      <FaGithub />
      {/ Other JSX elements /}
    </div>
  );
}

1. Customize the icon by adjusting its size and color using inline styles or CSS classes:

Using inline styles:

function MyComponent() {
  return (
    <div>
      <FaGithub style={{ fontSize: '2em', color: 'green' }} />
      {/ Other JSX elements /}
    </div>
  );
}

Using CSS classes:

import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div>
      <FaGithub className={styles.icon} />
      {/ Other JSX elements /}
    </div>
  );
}

1. (Optional) If you want to use a custom icon library or set up global styles, you can do so in your project configuration or layout components.

Note: Ensure that your project has proper configuration for CSS modules if you choose to use them in your Next.js project.