ReactSVG 和 <svg> 组织当前项目的正确方法是什么

Question

所以我最近接手了一个项目。我之前的那个人使用 SVG。我的问题是那些使 JSX 文档很难阅读。有很多像下面这样的标签。

     <svg viewBox="0 0 488.455 488.455" fill="currentColor">
                    <path d="M287.396 216.317c23.845 23.845 23.845 62.505 0 86.35s-62.505 23.845-86.35 0-23.845-62.505 0-86.35 62.505-23.845 86.35 0" />
                    <path d="M427.397 91.581H385.21l-30.544-61.059H133.76l-30.515 61.089-42.127.075C27.533 91.746.193 119.115.164 152.715L0 396.86c0 33.675 27.384 61.074 61.059 61.074h366.338c33.675 0 61.059-27.384 61.059-61.059V152.639c-.001-33.674-27.385-61.058-61.059-61.058zM244.22 381.61c-67.335 0-122.118-54.783-122.118-122.118s54.783-122.118 122.118-122.118 122.118 54.783 122.118 122.118S311.555 381.61 244.22 381.61z" />
                  </svg>

最初这个项目是使用 vanilla HTML、js、CSS 构建的，我想这可能就是原因。我的问题是：什么是正确的反应文件组织？我应该将所有这些路径保存到一个不同的 js 文件并导入它们？我应该添加 import ReactSVG from 'react-svg' 而不是使用标签吗？我对此有点困惑

Answer 1

您可以在 src 中创建自定义文件夹，例如 icons 如果这些 svg 恰好是图标。并创建包含 svg 代码的 q react 组件。

import React from "react";

const MyIcon = () => {
    return(
        <svg>
            {/* svg code here */}
        </svg>
    )
}

并在其他组件中使用此组件

ReactSVG 和 <svg> 组织当前项目的正确方法是什么

ReactSVG and <svg> what's the proper way to organize my current project

html

javascript

css

svg

reactjs