如何通过传递道具来动态更改SVG填充颜色

Question

我的组件上有这个渲染的图标：

<div
style={{ cursor: 'pointer' }}
onClick={() => setNewEntryVisible(true)}
>
<PlusIconNoBorder color={selected.backgroundColor} />
</div>

我将来自状态的颜色作为道具传递，然后将道具传递到我的图标文件，在那里我使用fill:color如下：

import React from 'react'
function PlusIconNoBorder({color}) {
return (
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.5 2.5C8.5 2.22386 8.27614 2 8 2C7.72386 2 7.5 2.22386 7.5 2.5V8H2C1.72386 8 1.5 8.22386 1.5 8.5C1.5 8.77614 1.72386 9 2 9H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V9H14C14.2761 9 14.5 8.77614 14.5 8.5C14.5 8.22386 14.2761 8 14 8H8.5V2.5Z"
fill={color}
/>
</svg>
);
}
export default PlusIconNoBorder

我真的不知道为什么不起作用，有什么线索吗？我试着控制台.log(selected.backGrouldColor(，它是正确的。不确定的错误在哪里

Answer 1

试试这个，这个svg在svg标记中显示颜色。

import React from 'react'
function PlusIconNoBorder({color}) {
return (
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill={color} //<------- fill here
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.5 2.5C8.5 2.22386 8.27614 2 8 2C7.72386 2 7.5 2.22386 7.5 2.5V8H2C1.72386 8 1.5 8.22386 1.5 8.5C1.5 8.77614 1.72386 9 2 9H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V9H14C14.2761 9 14.5 8.77614 14.5 8.5C14.5 8.22386 14.2761 8 14 8H8.5V2.5Z"
fill={color}
/>
</svg>
);
}
export default PlusIconNoBorder

Answer 2

也许jsx能帮上忙，你试过用backticks括起来的${color}吗？