Как поменять ширину svg картинки при использовании Next + svgr плагин?

Question

[Дмитрий Путилов]

Всем привет, возникла вот такая вот проблема, я использую Next и для подключения SVG как ReactComponent выбрал плагин SVGR

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

Все подключается, все норм, но есть одна проблема, я не могу задать и растянуть SVG

import ArchiveIcon from "./ArchiveIcon.svg";
import ArrowRight from "./ArrowRight.svg";
import DemoIcon from "./DemoIcon.svg";
import DownloadIcon from "./DownloadIcon.svg";
import LicenseIcon from "./LicenseIcon.svg";
import LogotypeIcon from "./LogotypeIcon.svg";
import MediaPlainIcon from "./MediaPlainIcon.svg";
import OptionsIcon from "./OptionsIcon.svg";
import OrdersIcon from "./OrdersIcon.svg";
import PausePlayerIcon from "./PausePlayerIcon.svg";
import PlayPlayerIcon from "./PlayPlayerIcon.svg";
import SearchIcon from "./SearchIcon.svg";
import VolumeIcon from "./VolumeIcon.svg";

export {
  ArchiveIcon,
  VolumeIcon,
  DemoIcon,
  OrdersIcon,
  LicenseIcon,
  MediaPlainIcon,
  LogotypeIcon,
  SearchIcon,
  OptionsIcon,
  PlayPlayerIcon,
  PausePlayerIcon,
  DownloadIcon,
  ArrowRight,
};

Вот я подключаю все SVG и далее
Использую ее вот так вот

import { ArrowRight } from "@shared/images";

<ArrowRight
      className={cs(classes.item, {
        [classes.disabled]: disabled,
      })}
    />

Вот я специально задал стили



А вот какой результат


Я пытался указать для path ширину и высоту тоже, не работает, есть идеи как решить проблему?

Comments

[godsplan]

указывай размеры прямо в в компоненте иконки
<Arrow width={12} height={12} />

[Дмитрий Путилов]

godsplane, такая же проблема

[Максим]

Там где начинается тег <svg сюда допишите viewBox="0 0 75 72"

Answer 1

[Константин]

У тебя, судя по скринам внутри svg размеры прописаны жестко, удали их, и тогда будут работать размеры из стилей.
и да, как писали в коментах viewBox обязательно нужен



вот скрин проекта, тоже на next и тоже SVGR

Answer 2

[AndreiKas20]

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config) {
// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

config.module.rules.push(
// Reapply the existing rule, but only for svg imports ending in ?url
{
...fileLoaderRule,
test: /\.svg$/i,
resourceQuery: /url/, // *.svg?url
},
// Convert all other *.svg imports to React components
{
test: /\.svg$/i,
issuer: fileLoaderRule.issuer,
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
use: ['@svgr/webpack'],
},
);

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i;

return config;
},
};

module.exports = nextConfig;

svgr.config.js

module.exports = {
icon: true,
svgo: true,
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
};