How to set width and height of inline svg's-CodePudding

How can I set the whidth and height of my inline svg?

Why is it not working in my case?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<svg style="display: none">
  <symbol id="checkmark" viewBox="0 0 24 24">
    <path stroke="#6CB21F" fill="#6CB21F" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
  </symbol>
</svg>
<div style="max-width:200px;">
  <div >
    <div >
      <ul >
        <li ><svg height="24" width="24" ><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li ><svg height="24" width="24" ><use href="#checkmark"></use></svg> Test</li>
        <li ><svg height="24" width="24" ><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li ><svg height="24" width="24" ><use href="#checkmark"></use></svg> Test</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

Flex is shrinking your icons. In order to avoid this create a CSS class like:

.shrink-0 {
   flex-shrink: 0;
}

and it to your <svg> like this

<svg height="24" width="24" >

CodePudding user response：

It isn't about the SVG, it's about flex it shrinks the SVG to give more width to other elements.

Use min-width in that case.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<svg style="display: none">
  <symbol id="checkmark" viewBox="0 0 24 24">
    <path stroke="#6CB21F" fill="#6CB21F" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
  </symbol>
</svg>
<div style="max-width:200px;">
  <div >
    <div >
      <ul >
        <li ><svg height="24" width="24" style="min-width: 24px" ><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li ><svg height="24" width="24" style="min-width: 24px" ><use href="#checkmark"></use></svg> Test</li>
        <li ><svg height="24" width="24" style="min-width: 24px" ><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li ><svg height="24" width="24" style="min-width: 24px" ><use href="#checkmark"></use></svg> Test</li>
      </ul>
    </div>
  </div>
</div>

Here's an article about that: https://css-tricks.com/making-width-and-flexible-items-play-nice-together/