CODEWITHSUNDEEP
javascripthtmlcsssvg
vadersfather
vadersfather

Reputation: 9369

Dynamically resize inline SVG

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?

Upvotes: 4

Views: 8120

Answers (1)

Gianluca Mancini
Gianluca Mancini

Reputation: 1312

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;
}

Upvotes: 14

Related Questions