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

Изображение к вопросу
Изображение к вопросу
  • 6 сентября 2023 г. 12:16
Ответы на вопрос 5
Если вы используете плагин SVGR, вы можете изменить размеры SVG-иконок, указав требуемую ширину и высоту при импорте иконки.

Пример:

1. Установите плагин SVGR следующей командой:
```
npm install --save-dev @svgr/cli
```

2. Создайте файл конфигурации `.svgrc.js` в корневом каталоге вашего проекта и добавьте следующий код:
```javascript
module.exports = {
  svgoConfig: {
    plugins: {
      removeViewBox: false,
    },
  },
};
```
Это позволит сохранить атрибут `viewBox` в SVG, чтобы вы могли контролировать размеры иконок с помощью CSS.

3. Импортируйте SVG-иконку, указав требуемую ширину и высоту:
```jsx
import { ReactComponent as MyIcon } from '../path/to/my-icon.svg';

const MyComponent = () => {
  return (
    <div>
      <MyIcon width={24} height={24} />
    </div>
  );
};

export default MyComponent;
```
Вы можете изменить значения `width` и `height` на нужные вам размеры.

Теперь вы должны быть в состоянии контролировать размеры SVG-иконок с помощью CSS или прямо в коде.
Удали жестко прописанные размеры внутри элементов SVG, чтобы размеры задавались через стили. 


Используй гибкое позиционирование и пропорциональные значения для размеров элементов в SVG вместо жестких размеров, указанных внутри элемента.


Удали жестко прописанные размеры внутри элементов SVG и используй размеры, задаваемые через стили, чтобы осуществить более гибкую настройку размеров элементов.


Избавься от жестко указанных внутри SVG элементов размеров и задай размеры через стили, чтобы иметь возможность более гибко управлять размерами элементов.
Похожие вопросы