4

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?

lovelikelando
  • 7,593
  • 6
  • 32
  • 50
  • 1
    Possible duplicate of [Inline SVG in CSS](http://stackoverflow.com/questions/10768451/inline-svg-in-css) – Ani Menon May 11 '16 at 13:49
  • it may be a case of using the ever-hated `!important` tag, unless you can override the inline styling for these using specificity – jbutler483 May 11 '16 at 13:51
  • 1
    The SVG will have width and height set inline on the svg tag, remove those then plain CSS will allow you to adjust the width and height properties. – Aaron May 11 '16 at 13:53

1 Answers1

13

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;
}
SuibianP
  • 99
  • 1
  • 11
Gianluca Mancini
  • 1,302
  • 9
  • 10