solid icons in next js

1. Install necessary packages:

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

1. Create a fontawesome.js file to initialize FontAwesome icons:

// fontawesome.js
import { library } from '@fortawesome/fontawesome-svg-core';
import { faIcon1, faIcon2, / Add other icons as needed / } from '@fortawesome/free-solid-svg-icons';

library.add(faIcon1, faIcon2 / Add other icons as needed /);

1. Import the fontawesome.js file in your Next.js application:

// pages/_app.js
import '../path-to-fontawesome/fontawesome';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

1. Use the imported icons in your components:

// Example usage in a component
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faIcon1, faIcon2 / Add other icons as needed / } from '@fortawesome/free-solid-svg-icons';

function MyComponent() {
  return (
    <div>
      <FontAwesomeIcon icon={faIcon1} />
      <FontAwesomeIcon icon={faIcon2} />
      {/ Add other icons as needed /}
    </div>
  );
}

export default MyComponent;