Question

所以我对ReactJS和SVG文件都比较陌生。

我已经研究了所有的SVG标签，现在完全受react支持，所以我想了解以下内容：

class Example extends Component {
    render() {
        return(
            <svg className="search__icon">
                <use xlinkHref="../../public/img/sprite.svg#icon-paper-plane" />
            </svg>
        )
    }
}

我的SVG Sprite表如下：

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1">
<defs>
<symbol id="icon-paper-plane" viewBox="0 0 20 20">
<title>paper-plane</title>
<path d="M18.64 2.634c-0.344 0.121-17.321 6.104-17.656 6.222-0.284 0.1-0.347 0.345-0.010 0.479 0.401 0.161 3.796 1.521 3.796 1.521v0l2.25 0.901c0 0 10.838-7.958 10.984-8.066 0.148-0.108 0.318 0.095 0.211 0.211s-7.871 8.513-7.871 8.513v0.002l-0.452 0.503 0.599 0.322c0 0 4.65 2.504 4.982 2.682 0.291 0.156 0.668 0.027 0.752-0.334 0.099-0.426 2.845-12.261 2.906-12.525 0.079-0.343-0.148-0.552-0.491-0.431zM7 17.162c0 0.246 0.139 0.315 0.331 0.141 0.251-0.229 2.85-2.561 2.85-2.561l-3.181-1.644v4.064z"></path>
</symbol>
</defs>
</svg>

我没有安装任何东西的SVG加载器，但是我仍然不太明白为什么它不起作用？我正在使用create-react-app吗？有人可以启发我吗？我是否必须将svg转换为JSX属性，即擦除冒号并使用camelToe表示法？我是否必须以某种方式将svg导入到我的组件中？

在React中使用SVG ...将SCG文件转换为jsx？

0 个答案: