我怎么能改变svg图标颜色?

问题描述 投票:0回答:2

我需要更改该图标的颜色:enter image description here

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

css reactjs styled-components
2个回答
0
投票

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

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

您还可以给出SVG元素idclass属性,并使用样式组件来更改它们。


0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.