Стилизация иконок Font Awesome в Next.js: методы и примеры - Fcodenotes

Чтобы стилизовать значки Font Awesome в Next.js, вы можете использовать несколько методов. Вот несколько вариантов:

Модули CSS: Next.js поддерживает модули CSS «из коробки». Вы можете импортировать библиотеку Font Awesome в свой компонент и применять стили с помощью модулей CSS. Сначала установите Font Awesome, используя npm или Yarn:

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

Затем импортируйте необходимые компоненты и значки в ваш компонент Next.js:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

Наконец, используйте компонент FontAwesomeIconдля отрисовки значка:

export default function MyComponent() {
  library.add(faCoffee);
  return (
    <div>
      <FontAwesomeIcon icon="coffee" />
    </div>
  );
}

Компонент Next.js Head: вы также можете использовать компонент Next.js Headдля добавления пользовательских стилей непосредственно в HTML-элемент head. Сначала импортируйте компонент Head:

import Head from 'next/head';

Затем в JSX вашего компонента используйте компонент Head, чтобы добавить ссылку на таблицу стилей Font Awesome:

export default function MyComponent() {
  return (
    <div>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        />
      </Head>
      <i className="fas fa-coffee"></i>
    </div>
  );
}

Библиотеки CSS-in-JS. Next.js хорошо работает с библиотеками CSS-in-JS, такими как Styled-Components или Emotion. Вы можете установить библиотеку по вашему выбору и использовать ее для стилизации значков Font Awesome.

npm install styled-components

Вот пример использования стилевых компонентов:

import styled from 'styled-components';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const StyledIcon = styled(FontAwesomeIcon)`
  color: red;
  font-size: 24px;
`;
export default function MyComponent() {
  return (
    <div>
      <StyledIcon icon={faCoffee} />
    </div>
  );
}