How to make svg fit container in React?-CodePudding

See the image above. That is the svg container I have highlighted but I only want the svg to take up it's actual size (i.e. just the inner white triangle)

I've tried changing parent width and height but nothing seems to work. how do I fix this?

this is the markup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#fff">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M12 16l-6-6h12z"></path>
</svg>

the second path seems to be the exact width and height of what I need

second edit:

export const Icon = ({ name }) => {
  let Icon: any = icons[name]
  return (
    <div
      className={css`
        display: flex;
        align-items: center;
      `}
    >
      <Icon height={24} fill="red" />
    </div>
  )
}

and icons is

import { ReactComponent as MyIcon } from "./my-icon.svg"

const icons = {
  "my-icon": MyIcon
}

CodePudding user response：

M12 16l-6-6h12z represents your triangle and means

move to the point with coordinates 12 16
then draw the line to -6 -6 (relatively to current point)
then draw the horizontal line with the length equals to 12 then
to go the first point

And you get your icon as the result.

There are several ways you can fit the path, but you should understand how a path works. You can read about it here.

And see examples below

First way to fit:

svg {
 border: 1px solid red;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#red">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M 12 24 l -12 -24 h24 z"></path>
</svg>

Second:

svg {
 border: 1px solid red;
 }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#red">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M 12 12 l -12 -12 h24 z"></path>
</svg>

CodePudding user response：

You can see from the SVG that the width and height are currently set to 24. A good start would be to set the width and height to 1em to better match the font size. See first example in the demo below.

If you feel the triangle is too small now, you can make it appear bigger by adjusting the viewBox. At the moment it has quite a bit of padding around it. To shring that padding, increase the viewBox x and y (first two numbers) and reduce the width and height (second two numbers. In the second example below, I have shrunk the padding by 3 units all around the icon by increasing the x and y by 3, and reducing the width and height, by 2 * 3 correspondingly.

The icon is now bigger compared to the text, But it can appear a bit high now. There are a few ways to adjust that. Including the following:

Use position: relative and top: 2px to push the <svg> down a bit.
Reduce the icon size to something like 0.7em, so that the icon matches better the X height of the font, rather than the full Em height.
Use a different vertical-align setting to adjust the position of the icon relative to the rest of the line. In example 3 below, I have set the icon to vertical-align: text-top.
Push the icon lower in the viewBox by increasing the padding at the top of the viewBox. In example 4 below I've reduced the viewBox y (second number) to increase the top padding.

body {
  background-color: dodgerblue;
}

div {
  font: 16px sans-serif;
  color: white;
}

svg {
  width: 1em;
  height: 1em;
}

<div>
  Show

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#fff">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M12 16l-6-6h12z"></path>
  </svg>
</div>


<div>
  Show

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18" width="24" height="24" fill="#fff">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M12 16l-6-6h12z"></path>
  </svg>
</div>


<div>
  Show

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18" width="24" height="24" fill="#fff" style="vertical-align: text-top">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M12 16l-6-6h12z"></path>
  </svg>
</div>


<div>
  Show

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 1 18 18" width="24" height="24" fill="#fff">
   <path fill="none" d="M0 0h24v24H0z"></path>
   <path d="M12 16l-6-6h12z"></path>
  </svg>
</div>