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

Question

我一直试图在我的 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 图标。 我试过检查代码，但无法弄清楚图像链接

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

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

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

width=
height=

进而

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

感谢任何帮助！

Answer 1

对于可缩放的 SVG，它必须定义viewBox 。