Как изменить цвет изображения SVG при наведении курсора мыши в проекте Next.js? ⇐ CSS

[Anonymous]

Заголовок:

Как изменить цвет изображения SVG при наведении курсора мыши в проекте Next.js с помощью next/image?
Тело:
Я создаю проект Next.js, и у меня есть набор кнопок со значками SVG. Я импортирую свои SVG-файлы следующим образом:

Код: Выделить всё

import Image from "next/image";
import rooms from '@/public/assets/living-room 1.svg';
import mansion from '@/public/assets/mansion 1.svg';

Затем я визуализирую их в цикле:

Код: Выделить всё

{[{ img: rooms, label: "Rooms" }, { img: mansion, label: "Mansion" }].map((item, i) => (


{item.label}

))}

Что я хочу:

• При наведении курсора Значок SVG должен стать черным.
• Текст должен стать черным.
• Должна появиться толстая черная нижняя граница.
  />
• Кнопка не должна прыгать или двигаться при наведении.

Что я пробовал:

• Добавление className="fill-black" или group-hover:fill-black к элементу — но это не так работает.
• Использование CSS-фильтра для инвертирования цветов — частично работает, но неточно.

Почему не работает:

• Код: Выделить всё

  next/image

  воспринимает SVG как изображения, поэтому Tailwind fill-black или group-hover:fill-black не может изменить цвет.

Вопрос:
Как лучше всего сделать значки SVG изменяющими цвет при наведении в проекте Next.js?

• Следует ли мне продолжать использовать next/image с фильтрами CSS?
• Или мне следует импортировать SVG как компоненты React с помощью SVGR?
• Если я использую SVGR, как мне преобразовать текущий импорт SVG и применить стили наведения Tailwind для значка, текста и граница?

Подробнее здесь: https://stackoverflow.com/questions/798 ... js-project