我如何更改 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。您可以简单地创建一个 returns SVG 的组件，这样您的代码可能会更清晰。

Answer 2

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

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

您还可以为 SVG 元素提供 id 和 class 属性并使用样式组件来更改这些属性。

我如何更改 svg 图标颜色？

How i can change svg icon color?

css

reactjs

styled-components