Gatsby只呈现第一张svg图像，并将其应用于其他图像。当它必须显示所有这些图标时(在path中没有问题)，它会这样显示:
https://ibb.co/8PHfXkD
这是我的代码:
import Html from "../assets/skills/html.inline.svg"
import Css from "../assets/skills/css.inline.svg"
import Bird from "../assets/skills/bird.inline.svg"
import Gatsb from "../assets/skills/gatsby.inline.svg"
function Team() {
return (
<Layout>
<div>
<Html />
<Css />
<Js />
<Vue />
<Rea />
<Gatsb />
<Next />
<Bird />
</div>
</Layout>
)
}
export default Team
我是这样使用这个插件的:
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /.inline.svg$/,
}
}
}
有什么问题吗?
我猜您的svg共享共享相同的内部id，因此它只显示第一个。如果是，修改每一个的id，将它们转换为一个唯一的值。