-1

Actually I need to update arrow dynamically. I tried all possible scenarios. not working properly in css.

Actual SVG:

converted this SVG to DataURI. Code:

$color-right-arrow: $FF0000;

.wrapper { &:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.414' height='14.828' viewBox='0 0 8.414 14.828'%3E%3Cpath d='m9 18 6-6-6-6' transform='translate(-7.586 -4.586)' style='fill:none;stroke:%23#{$color-right-arrow};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px' data-name='Icon chevron right'/%3E%3C/svg%3E%0A"); left: 0; transform: translateY(-50%); width: 15px; height: 30px; } }

After inspect in browser, it showing svg code after updating the above code

Raj
  • 1
  • anyone can help me on this issue – Raj Aug 04 '23 at 11:12
  • Does this answer your question? [SCSS variable in background image with SVG image data URI](https://stackoverflow.com/questions/25477819/scss-variable-in-background-image-with-svg-image-data-uri) – herrstrietzel Aug 04 '23 at 15:41
  • @herrstrietzel, No it is not working. Can you please help me any other solution. dynamic variable value not working. – Raj Aug 04 '23 at 16:03

0 Answers0