SVG 上的多种颜色填充作为 React 中的组件

Question

我可以使用它作为组件来更改 SVG 的填充

import { ReactComponent as Icon} from '../assets/icon.svg'
...
<Icon fill='#000' />

在 SVG 文件内的填充字段上使用“当前”

<path fill="current" />

但我有两条不同的路。我怎样才能设置它们有不同的填充？

<path fill="current" />
<path fill="otherColor?" />

Answer 1

我通过创建一个 return SVG 组件并接受道具

来设法使用不同的颜色

const Icon = (props) => (
  <svg>
    <g>
      <path fill={props.outside} />
      <path fill={props.inside} />
    </g>
  </svg>
)
...
<Icon outside='#000' inside='red'/>

SVG 上的多种颜色填充作为 React 中的组件

Multiple color fill on SVG as component in React

svg

reactjs