Dynamically resize inline SVG

Question

I have an SVG that is being rendered inline <div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />. It needs to be rendered as such (not in img tag, or background) so that I can style certain properties within the svg. While I'm successfully styling (using css selectors) properties that are not set in the svg, I cannot set the height and width because it's being override by the inline height/width properties. So what is the best way, given an svg with a height/width, so control the height and width from CSS? Is it possible? Or if not, what is best practice for resizing inline svgs?

Answer 1

If you inline SVGs you don't need Javascript. For example, you can scale to 48px a 24px icon like this:

<div class="Icon">
  <svg class="Icon-image" width="24" height="24" viewBox="0 0 24 24">...</svg>
</div>

CSS:

.Icon {
  width: 48px;
}
.Icon svg {
  width: 100%;
  height: auto;
}