javascript - ReactJS 中的 SVG 图标

Question

我必须将 SVG 图标从常规网站移动到 ReactJS 网站。 SVG 必须进行一些修改才能与 JSX 兼容，因此我删除了所有 ':' 并将它们替换为驼峰式大小写属性名称以实现 JSX 兼容性。唯一的问题是 d 属性。

SVG 现在看起来像:

<svg id="Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 900 800" enable-background="new 0 0 1024 1024" xmlSpace="preserve">
    <g id="Layer_1"></g>
    <g id="Logo">
        <g>
            <g id="Fish">
                <g>
                    <path style={{fill:"#8DC046"}} d="M430.249,525.415c0,64.563-58.349,136.165-58.349,136.165l0.434,0.435l214.046-136.867L374.238,388.279
                        l-0.594,0.596C373.644,388.875,430.249,458.241,430.249,525.415z"></path>
                </g>
                <g>
                    <path style={{fill="#B8CD43"}} d="M586.381,525.147L374.238,388.279l-0.594,0.596c0,0,56.605,69.366,56.605,136.54L586.381,525.147z"></path>
                </g>
                <g>
                    <path style={{fill="#15AADB"}} d="M430.249,253.264c0,64.145-56.444,136.163-56.444,136.163l0.433,0.435l212.143-136.868L372.334,116.125
                        l-0.595,0.598C371.739,116.723,430.249,188.18,430.249,253.264z"></path>
                </g>
                <g>
                    <path style={{fill="#4AC5ED"}} d="M586.381,252.994L372.334,116.125l-0.595,0.598c0,0,58.51,71.457,58.51,136.541L586.381,252.994z"></path>
                </g>
                <g>
                    <path style={{fill="#F88F2D"}} d="M596.473,389.394c0,216.894-135.035,388.081-135.035,388.081l0.789,0.795L889.707,388.9L462.227-0.467
                        l-1.095,1.097C461.132,0.629,596.473,177.202,596.473,389.394z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

这给了我以下错误:

Module build failed: SyntaxError: Unexpected token (90:58)

这是有道理的，但在我的例子中，d 属性中有像 M596.473,389.394c0 这样的部分。正如您可以想象的那样，4 和 0 之间的字母 c 会导致问题，因为该字母不是整数。

如何在不使用库或其他东西的情况下使这个 SVG 工作？我只想将此 SVG 转换为有效的 JSX。

Answer 1

将每个地方的 style={{fill="#B8CD43"}} 更改为 style={{fill: "#B8CD43"}} ，就可以了。

不需要危险的SetInnerHTML。这是工作Demo