動的にサイズを変更するインラインSVG

Question

私はインラインでレンダリングされるSVGを持っています<div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />。 svg内の特定のプロパティをスタイルできるように、そのようにレンダリングする必要があります（imgタグまたは背景には含まれません）。 svgに設定されていないプロパティ（CSSセレクタを使用している）を正常にスタイリングしている間は、高さと幅を設定することはできません。だから、最高の方法は、高さ/幅のSVGを与え、CSSから高さと幅を制御する？出来ますか？そうでない場合は、インラインSVGのサイズ変更のベストプラクティスは何ですか？

Answer 1

SVGをインライン化する場合、Javascriptは必要ありません。たとえば、あなたがこのような24ピクセルのアイコンを48pxするように拡張することができます

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

CSS：[CSSのインラインSVG]の

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