为什么Figma导出的SVG在React里显示时路径错乱？

这问题我遇到过，Figma导出的SVG确实容易有坑。你提到路径错乱，大概率是SVG文件里的 transform 或者 viewBox 没处理干净。

Figma导出的SVG通常会带一堆没必要的属性，比如 transform、fill 的硬编码颜色，或者嵌套的 g 标签。这些都会干扰React渲染。建议你先用工具（比如SVGOMG）清理一下SVG代码，去掉无用的属性和嵌套结构。

另外，你现在的写法 require('./logo.svg') 可能会导致Webpack处理SVG时出问题。推荐直接把SVG内容复制到组件里，像这样：

function Logo() {

  return (

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="50" height="50">

      <path d="你的路径数据"/>

    </svg>

  );

}

记得检查 viewBox 属性，这个很关键。如果 viewBox 缺失或者值不对，SVG渲染肯定乱套。你可以在清理后的SVG文件里找到正确的 viewBox 值，然后手动加上。

还有一点，Figma导出时默认可能会把画布偏移量也带上，导致SVG的坐标系偏移。导出前最好把图标挪到画布原点，再试试导出。

如果还是不行，可以试试用 dangerouslySetInnerHTML 直接插入SVG字符串，虽然名字听着吓人，但确实是处理复杂SVG的一个办法：

function Logo() {

  const svgContent = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="你的路径数据"/></svg>';

  return <div dangerouslySetInnerHTML={{ __html: svgContent }} />;

}

总之，清理SVG代码、调整 viewBox、优化导出设置，基本就能搞定。这活儿挺烦人的，但习惯了就还好。