next.js 通过 babel 导入 svg 不缩放答案

【问题标题】：next.js imported svg via babel not scaling [duplicate]next.js 通过 babel 导入 svg 不缩放
【发布时间】：2021-01-24 23:02:42
【问题描述】：

我一直在尝试在我的 next.js 项目中缩小我的 svg 图标。

我通过添加文件.babelrc 将svg 导入到我的项目中

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

并在package.json 中添加"babel-plugin-inline-react-svg": "^1.1.1" 作为开发依赖项

但是，无论我对 SVG 文件进行什么更改，SVG 始终呈现为 100x100 图标。我已尝试检查代码但无法弄清楚 image link

svg[Attributes Style] {
    width: 100;
    height: 100;
}

^ Chrome f12 说明了这一点，但没有说明何时设置。（所以这是默认的吗？）

在我的 SVG 文件中，我尝试过更改

width=
height=

然后

viewBox=
x=
y=
style="CSS Changes"

感谢任何帮助！

【问题讨论】：

【解决方案1】：

对于可扩展的 SVG，它必须定义 viewBox。

【讨论】：