Как настроит config файл SVGR в NextJS?

Question

[Maksym Sahaidak]

Не получается настроить конфиг @svgr/webpack.

Мои действия:

• Установил пакет @svgr/webpack
  
• Создал файл .svgrrc.json
  
• Настроил кофиг.svgrrc.json:

  {
    "typescript": true,
    "svgo": true,
    "svgProps": {
      "width": "24",
      "height": "24"
    },
    "replaceAttrValues": { "#111": "currentColor" }
  }

  
  
• Добавил svg:

  import SvgGoogle from '@/shared/img/svg/social/google.svg'
  
  export default function Page() {
    return (
      <>
        <h2>profile</h2>
        <SvgGoogle />
      </>
    )
  }

  
  

Что не работает:
Конфигурационный файл вроде бы, как и применяется при сборке проекта, но почему-то не изменяет размеры svg как написано в конфиге (24 на 24), цвет не заменяется, такое чувство что я где то что, то пропустил. Если есть где-то нормальная документация по настройке этого конфига дайте, пожалуйста, на сайте svgr не нашел такой.

На всякий случай вот svg google и next.config.mjs:

svg google

<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.552 8.26138L11.3942 8.26099C11.0339 8.26099 10.7419 8.55294 10.7419 8.91318V11.5192C10.7419 11.8794 11.0339 12.1714 11.3941 12.1714H15.9881C15.4851 13.4769 14.5462 14.5703 13.3483 15.265L15.3072 18.6559C18.4494 16.8386 20.3072 13.65 20.3072 10.0805C20.3072 9.57228 20.2697 9.20896 20.1948 8.79986C20.1378 8.48903 19.868 8.26138 19.552 8.26138Z" fill="white"/>
<path d="M10.3072 16.087C8.05901 16.087 6.09635 14.8586 5.04224 13.0409L1.65137 14.9954C3.37696 17.9861 6.60955 20 10.3072 20C12.1212 20 13.8328 19.5116 15.3072 18.6605V18.6558L13.3484 15.2648C12.4523 15.7845 11.4155 16.087 10.3072 16.087Z" fill="white"/>
<path d="M15.3072 18.6605V18.6559L13.3483 15.2649C12.4523 15.7846 11.4155 16.087 10.3072 16.087V20.0001C12.1211 20.0001 13.8328 19.5117 15.3072 18.6605ZM4.22019 10C4.22019 8.89187 4.52261 7.85511 5.04219 6.95913L1.65131 5.00467C0.79549 6.47448 0.307129 8.18144 0.307129 10C0.307129 11.8186 0.79549 13.5256 1.65131 14.9954L5.04219 13.0409C4.52261 12.145 4.22019 11.1082 4.22019 10ZM10.3072 3.91306C11.7732 3.91306 13.1199 4.434 14.1717 5.30053C14.4312 5.51428 14.8084 5.49885 15.0461 5.26115L16.8925 3.41466C17.1622 3.14497 17.143 2.70353 16.8549 2.4536C15.0926 0.92473 12.7996 0 10.3072 0C6.6095 0 3.37691 2.01395 1.65131 5.00467L5.04219 6.95913C6.09629 5.14143 8.05896 3.91306 10.3072 3.91306Z" fill="white"/>
<path d="M14.1717 5.30053C14.4312 5.51428 14.8084 5.49885 15.046 5.26115L16.8925 3.41466C17.1622 3.14497 17.1429 2.70353 16.8549 2.4536C15.0926 0.924691 12.7996 0 10.3071 0V3.91306C11.7732 3.91306 13.1198 4.434 14.1717 5.30053Z" fill="white"/>
</svg>

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'))

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...(fileLoaderRule.resourceQuery?.not || []), /url/] },
        use: ['@svgr/webpack'],
      }
    )

    fileLoaderRule.exclude = /\.svg$/i

    return config
  },
}

export default nextConfig