如何通过传递道具以动态方式更改 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

我不太确定为什么不起作用，有什么线索吗？我尝试 console.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 可以提供帮助，你试过用反引号括起来的 ${color} 吗？