我如何更改 svg 图标颜色？答案

【问题标题】：How i can change svg icon color?我如何更改 svg 图标颜色？
【发布时间】：2019-07-11 13:31:42
【问题描述】：

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

我尝试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 和 Styled Components。

【问题讨论】：

所以，这是一个img 和一个svg src？你有工作代码的链接吗？
您可以通过填写 .svg 文件来更改图标颜色
仅供参考：“或登录方式”中有错字

标签： css reactjs styled-components

【解决方案1】：

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

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

您还可以赋予 SVG 元素 id 和 class 属性并使用 styled-components 来更改它们。

【讨论】：

【解决方案2】：

如果它是作为图像源传递的 svg，即 <img src="image.svg" /> ，那么实现它可能并非不可能。但是，如果您将svg 代码直接注入到页面中，这是可能的。

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

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

【讨论】：