Question 201983 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Remove Margin from Inside an SVG?

I have this react component with an SVG icon. Here’s what it looks like. I’ve added the 1px white border around it so you can see where the svg stops:

enter image description here

As you can see, there is a lot of empty space vertically to the right of the icon, inside the svg. I’ve highlighted the empty space in magenta here:

enter image description here

I’ve tried editing the viewbox parameters different ways but I haven’t figured out how to fix this yet.

Here’s the code:

import * as React from "react";

function SvgTelephoneIcon(props) {
    const {iconwidth, iconheight, color} = props;
    return (
        <svg
            width={iconwidth}
            height={iconheight}
            viewBox="0 0 28 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            {...props}
        >
            <path
                d="M16.25 18.125h-.106C3.863 17.419 2.119 7.056 1.875 3.894A1.875 1.875 0 0 1 3.6 1.875h3.444a1.25 1.25 0 0 1 1.162.788L9.156 5a1.25 1.25 0 0 1-.275 1.35L7.55 7.694a5.856 5.856 0 0 0 4.737 4.75l1.357-1.344A1.25 1.25 0 0 1 15 10.844l2.356.944a1.25 1.25 0 0 1 .769 1.162v3.3a1.875 1.875 0 0 1-1.875 1.875Zm-12.5-15a.625.625 0 0 0-.625.625v.05c.288 3.7 2.131 12.45 13.087 13.075a.625.625 0 0 0 .663-.587V12.95l-2.356-.944-1.794 1.781-.3-.037C6.987 13.069 6.25 7.631 6.25 7.575l-.037-.3 1.774-1.794-.937-2.356h-3.3Z"
                fill={color}
            />
        </svg>)
}
export default SvgTelephoneIcon;

How can I remove the empty space that is highlighted in magenta in the second image above?

Tags:

2

Answers


  1. 0

    I changed the view box and it worked for me:

                viewBox="0 0 20 20"
    Login or Signup to reply.
  2. 0

    Try with css adding a className='fill-container‘ to the svg and add a rule.fill-container{width:100%; height: 100%; margin: 0;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search