Question

我有一个svg文件，其填充设置为#fff：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     fill="#fff" width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<g>
    <polygon class="st0" points="77.037,18.139 62.557,11.529 62.557,24.75   "/>
    <path class="st1" d="M14.507,8.758V7.139c0-0.69-0.56-1.25-1.25-1.25s-1.25,0.56-1.25,1.25v33c0,0.69,0.56,1.25,1.25,1.25
        s1.25-0.56,1.25-1.25V27.521l20.55-9.381L14.507,8.758z M14.557,11.529l14.48,6.61l-14.48,6.61V11.529z"/>
</g>
</svg>

我在我的组件中将其用作ReactComponent：

import { ReactComponent as Flag } from '../assets/icons/flag.svg';

 <Flag/>

我想根据组件中的状态更改其color。我尝试像这样在fill组件上设置Flag属性：

<Flag fill="#000"/>

那没有用。但是，如果我以与尝试设置width相同的方式来设置fill，则可以：

<Flag width={50}/>

在使用ReactComponent时，如何更改svg的颜色？

Answer 1

您需要使用https://github.com/hugozap/react-svgmt

  <SvgLoader width="100" height="100" path="../assets/icons/flag.svg">
    <SvgProxy selector="svg" fill="#000" />

将SVG用作ReactComponent时如何更改其颜色

1 个答案: