Как я могу изменить цвет значка 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 и Styled Components.

Answer 1

Изображения SVG - это просто прославленные элементы HTML.

Вы можете редактировать ваши SVG-изображения, чтобы установить атрибуты fill и stroke на все, что вам нужно.

Вы также можете присвоить SVG-элементам атрибуты id и class и использоватьstyled-компоненты, чтобы изменить их.

Answer 2

Если это svg, переданный в качестве источника для изображения, то есть <img src="image.svg" />, это может быть невозможно реализовать.Однако это возможно, если вы вводите код svg непосредственно в страницу.

В этом случае просто измените атрибут fill в тегах, для которых вы хотите изменить цвет.

Поскольку вы спрашивали об этом на канале react, я предполагаю, что вы используете React.Вы можете просто создать компонент, который возвращает SVG, чтобы ваш код мог быть чище.