在React中使用fill CSS出现解析错误，求正确用法及替代方案

一、解决fill样式解析错误 #

你遇到的Unexpected digit after hash token错误，根源是JSX的style对象里，颜色值#746250未用引号包裹。React的JSX中，style属性接收的是JavaScript对象，字符串类型的属性值必须加引号，否则#会被当作注释起始符，触发语法解析失败。

正确写法如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g id="flat">
    <path
      d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
      style={{fill: '#746250'}}
    />
  </g>
</svg>

另外，也可以直接用SVG原生的fill属性替代style对象，写法更简洁：

<path
  d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
  fill="#746250"
/>

二、React中导入SVG的其他替代方法 #

1. 直接作为React组件导入 #

使用Create React App、Vite等现代构建工具时，默认支持将SVG作为React组件直接导入，可通过props灵活控制尺寸、颜色等样式：

import MySvg from './my-icon.svg';

function App() {
  return <MySvg width={64} height={64} fill="#746250" />;
}

2. 使用img标签引入 #

将SVG文件放在项目静态资源目录（如public文件夹），通过img标签的src属性引入，适合无需修改SVG内部元素样式的场景：

<img src="/my-icon.svg" alt="自定义图标" width="64" height="64" />

3. 手动/工具转换为React组件 #

可以手动把SVG代码改写成React组件，或者用SVGR等工具批量转换，转换后的组件能自由修改内部元素的属性和样式。

4. 作为CSS背景图引入 #

若仅需将SVG作为背景使用，可在CSS中通过background-image引入：

.icon {
  width: 64px;
  height: 64px;
  background-image: url('./my-icon.svg');
  background-size: cover;
}

之后在JSX中使用对应类名即可：

<div className="icon"></div>

内容的提问来源于stack exchange，提问作者Gin Ichimaru