我如何更改svg图标颜色？

Question

我需要更改该图标的颜色：

我尝试了fill，但是没有用。

该图标的样式

import styled from 'styled-components'


export default styled.img`
height: 14px;
padding-right: 7px;
fill: #d85040;
`

在组件中：

import google from '../img/google-brands.svg'

<SocialCont>
                    <SocialLink>
                    <CompanyLogo src={google} alt="facebook"/>
                    <SocialText>Google</SocialText>     
                    </SocialLink>
                </SocialCont>

我使用React和样式化组件。

Answer 1

如果它是作为源传递给图像的svg，即<img src="image.svg" />，则可能无法实现。但是，也可以将svg代码直接注入页面中。

在这种情况下，只需更改要更改颜色的标签上的fill属性即可。

自从您在react频道上问过这个问题以来，我假设您正在使用React。您可以简单地创建一个返回SVG的组件，以便您的代码更简洁。

Answer 2

SVG图像实际上只是美化的HTML元素。

您可以编辑SVG图像，将fill和stroke属性设置为所需的任何内容。

您还可以赋予SVG元素id和class属性，并使用样式化组件来更改它们。