Использование SVG иконок в Next.js

Для использования SVG иконок в Next.js можем создать файл в pages, в общем любую страницу создаем, в ней пишем такой код:

import LogoVk from '../svgs/logo-vk.svg'

export default function SvgSprite() {
  return(
    <LogoVk 
      width="24"
      height="24"
    />
  )
}

Также нужно будет установить babel-plugin-inline-react-svg:

npm i babel-plugin-inline-react-svg --save-dev

И добавить в корень файл .babelrc

{
  "presets": [ "next/babel" ],
  "plugins": [ "inline-react-svg" ]
}

Цвет в css задаем при помощи: fill