Иконка SVG не окрашивается в нужный цвет через свойство fill, что делать?

Question

[Anonymous]

У меня есть код для окрашивания иконки в красный цвет.

.all-buttons__img {
    fill: red;
}

В HTML это выглядит так:

<img src="@/assets/Icon.svg" alt="Иконка" class="all-buttons__img" />

Код SVG иконки:

<svg width="96" height="99" viewBox="0 0 96 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.7228 0.029369C42.2466 0.799919 30.7065 2.02796 22.1272 4.72487C13.5479 8.19232 5.71458 13.9714 1.61142 16.283C-1.37269 17.8241 0.492379 20.4488 1.61142 23.1457C11.3098 52.8116 24.715 61.6488 33.6673 63.9605C34.4133 58.9519 35.9753 53.2692 38.2134 47.1048C37.4674 47.1048 37.0944 47.466 36.3484 47.466C30.7531 49.3923 25.5076 56.7366 25.5076 56.7366C25.5076 56.7366 26.277 44.7691 34.4833 41.6869C36.3484 40.9164 38.5631 40.9404 40.4282 41.3257L42.643 36.6302C42.643 36.2449 42.9927 36.2931 42.9927 35.9078C43.7387 33.5962 45.6737 28.5636 51.2689 28.5636C52.0149 28.5636 53.0874 28.5397 53.8334 28.9248C54.5794 29.6953 55.3021 29.7194 56.0482 30.49C55.6751 23.555 54.2763 15.4643 50.9192 5.44725C50.1732 3.13563 50.0799 -0.355906 46.7228 0.029369ZM41.9436 20.4969C46.4197 20.4969 49.7535 23.9885 49.7535 23.9885C49.7535 23.9885 46.4197 27.8412 41.9436 27.8412C37.4674 27.8412 34.1336 24.3497 34.1336 24.3497C34.1336 24.3497 37.8404 20.8822 41.9436 20.4969ZM24.342 27.7208C26.0672 27.5763 27.3727 27.8412 27.3727 27.8412C27.3727 27.8412 26.65 33.2109 23.2929 35.9078C19.9357 38.6047 14.6669 37.8342 14.6669 37.8342C14.6669 37.8342 15.3896 32.4644 18.7468 29.7675C20.4253 28.4191 22.6168 27.8653 24.342 27.7208ZM51.2689 34.4631C48.9995 34.3839 48.8443 37.3767 47.5388 39.3994C27.396 81.7793 44.881 95.9862 48.2382 97.9126C51.5953 99.4537 73.6731 104.872 93.8158 62.8769C95.3079 60.9505 97.4993 58.1814 94.5152 56.255C90.7851 53.5581 82.5322 46.6473 74.6989 42.4093C66.8656 38.1713 56.7942 36.2449 52.318 34.7039C51.8984 34.5594 51.5931 34.4744 51.2689 34.4631ZM50.2198 55.4122C51.8517 55.2678 53.9966 55.2919 56.0482 56.255C59.7783 58.1814 61.6434 62.8769 61.6434 62.8769C61.6434 62.8769 57.2371 64.8273 53.134 62.5157C49.4038 60.5893 47.5388 55.8938 47.5388 55.8938C47.5388 55.8938 48.5879 55.5568 50.2198 55.4122ZM69.4533 65.044C71.1319 64.8996 73.3 64.9237 75.1651 65.8868C79.2683 67.8132 80.7603 72.8699 80.7603 72.8699C80.7603 72.8699 75.8645 74.4591 72.1344 72.1475C68.0312 70.2211 66.5392 65.5256 66.5392 65.5256C66.5392 65.5256 67.7748 65.1885 69.4533 65.044ZM45.6737 69.3783C45.6737 69.3783 49.7535 77.8784 55.3488 80.5753C60.944 83.2722 69.9196 81.2977 69.9196 81.2977C69.9196 81.2977 60.5243 90.9295 52.318 87.0768C44.4847 83.2241 45.6737 69.3783 45.6737 69.3783Z" fill="white"/>
</svg>

Но иконка не окрашивается в нужный цвет. Мне нужно ИМЕННО ИКОНКУ окрасить в нужный цвет через стили CSS без танцов с файлами и с самим кодом иконки, ибо нужно, чтобы на определенной странице иконка была одного цвета, а на другой - другого

Answer 1

[pavelpressf]

<svg width="96" height="99" viewBox="0 0 96 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.7228 0.029369C42.2466 0.799919 30.7065 2.02796 22.1272 4.72487C13.5479 8.19232 5.71458 13.9714 1.61142 16.283C-1.37269 17.8241 0.492379 20.4488 1.61142 23.1457C11.3098 52.8116 24.715 61.6488 33.6673 63.9605C34.4133 58.9519 35.9753 53.2692 38.2134 47.1048C37.4674 47.1048 37.0944 47.466 36.3484 47.466C30.7531 49.3923 25.5076 56.7366 25.5076 56.7366C25.5076 56.7366 26.277 44.7691 34.4833 41.6869C36.3484 40.9164 38.5631 40.9404 40.4282 41.3257L42.643 36.6302C42.643 36.2449 42.9927 36.2931 42.9927 35.9078C43.7387 33.5962 45.6737 28.5636 51.2689 28.5636C52.0149 28.5636 53.0874 28.5397 53.8334 28.9248C54.5794 29.6953 55.3021 29.7194 56.0482 30.49C55.6751 23.555 54.2763 15.4643 50.9192 5.44725C50.1732 3.13563 50.0799 -0.355906 46.7228 0.029369Z" fill="white"/>
</svg>

Comments

[Anonymous]

Вы только испортили иконку.

[pavelpressf]

Скорее всего иконка имеет фоновый цвет, который перекрывает свойство fill. В этом случае тебе нужно задать свойство background-color на прозрачный цвет.

style="background-color: transparent"

Answer 2

[Ilya_Dityatiev]

Решение для SCSS файла:

.all-buttons__img {
    path {
        fill: red;
    }
}

Для CSS:

.all-buttons__img path {
    fill: red;
}