adjust the size of inline svg according to viewport

Hi there,

HTML attributes won't accept CSS variables, you would have to use Javascript for that. But you could just write it to your CSS eg.

.icon-caret-left {
    width: var(--carret-w);
}

So I should omit width and height attributes in my html?
Should I adjust the viewBox too?

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-caret-left" viewBox="0 0 24 24" ...></svg>

css:

:root {

    --caret-w: 24px;
    --caret-h: 24px;
}

svg.icon.icon-tabler.icon-tabler-caret-left
  {
  width: var(--caret-w);
 height: var(--caret-h);
	}

that works.

But this doesn´t work:

@ media screen and (max-width:500px) {
 
  --caret-w: 30px;
   --caret-h: 30px;
 }

Hi Gerhard,

Try this instead:

@media (max-width: 500px) {
     :root {
        --caret-w: 30px;
        --caret-h: 30px;
     }
}

Thanks a lot!

My mistake was the space between @ and media.

Greetings from Cologne
Gerhard

And there was no selector :root in your CSS :)