如何控制 svg 元素的宽度和高度

Question

I created a div wrapper with custom width and height and then put the SVG inside the wrapper but the width and height are not being modified, how can I control the width and height in this case?

export const SvgWrapper = styled.div`
  width: ${(props) => props.width && props.width};
  height: ${(props) => props.height && props.height};
  padding-bottom: ${(props) => props.paddingBottom && props.paddingBottom};
`;

Answer 1

As in normal CSS, you need to target the SVG using CSS selector, you currently applying styles for div element only.

export const SvgWrapper = styled.div`
  svg {
    width: ${(props) => props.width};
    height: ${(props) => props.height };
    padding-bottom: ${(props) => props.paddingBottom};
  }
`;