javascript - SVG 与 React.js

Question

尝试在 React 中使用 Facebook 的 SVG 图标作为背景图像，但它不起作用。控制台中的错误 - 意外的 token (1:0) 您可能需要适当的加载程序来处理此文件类型。

有人可以帮我解决这个问题吗？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>fb_icon</title>

    <defs></defs>
    <g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-1111.000000, -5441.000000)" fill="#29B573">
            <g id="fb_icon" transform="translate(1112.000000, 5442.000000)">
                <path d="M28.9992927,1.41463415 C13.7891463,1.41463415 1.41463415,13.7891463 1.41463415,29 C1.41463415,44.2101463 13.7891463,56.5846585 28.9992927,56.5846585 C44.2101463,56.5846585 56.5853659,44.2101463 56.5853659,29 C56.5853659,13.7891463 44.2101463,1.41463415 28.9992927,1.41463415 M28.9992927,57.9992927 C13.0089756,57.9992927 0,44.9903171 0,29 C0,13.0089756 13.0089756,0 28.9992927,0 C44.9903171,0 58,13.0089756 58,29 C58,44.9903171 44.9903171,57.9992927 28.9992927,57.9992927" id="Fill-1" stroke="#29B573"></path>
                <path d="M22.8572341,24.6880537 L25.489161,24.6880537 L25.489161,22.1303951 C25.489161,21.0015171 25.5174537,19.2615171 26.3365268,18.1842732 C27.200161,17.0426634 28.3856244,16.2674439 30.4234049,16.2674439 C33.7449659,16.2674439 35.1426244,16.7413463 35.1426244,16.7413463 L34.4848195,20.6414927 C34.4848195,20.6414927 33.3877707,20.3239073 32.3642829,20.3239073 C31.3400878,20.3239073 30.4234049,20.6910049 30.4234049,21.7137854 L30.4234049,24.6880537 L34.622039,24.6880537 L34.3292098,28.4976634 L30.4234049,28.4976634 L30.4234049,41.7308585 L25.489161,41.7308585 L25.489161,28.4976634 L22.8572341,28.4976634 L22.8572341,24.6880537 Z" id="Fill-3"></path>
            </g>
        </g>
    </g>
</svg>

Answer 1

看看https://facebook.github.io/react/docs/dom-elements.html

像lines-width和fill-rule这样的属性变成linesWidth和fillRule等。