我尝试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。
SVG图像实际上只是美化的HTML元素。
您可以编辑SVG图像以将fill
和stroke
属性设置为您想要的任何内容。
您还可以给出SVG元素id
和class
属性,并使用样式组件来更改它们。
如果它是作为图像源传递的svg,即<img src="image.svg" />
,则可能无法实现它。但是,如果您将svg
代码直接注入页面,则可能。
在这种情况下,只需更改要更改颜色的标签上的fill
属性即可。
既然你在react
频道上问了这个问题,我假设你正在使用React。您可以简单地创建一个返回SVG的组件,以便您的代码更清晰。