Динамический размер inline SVG

Question

У меня есть SVG, который отображается inline <div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />. Он должен отображаться как таковой (не в теге img, или в фоновом режиме), чтобы я мог создавать определенные свойства в svg. Хотя я успешно стилю (с использованием селекторов CSS), которые не установлены в svg, я не могу установить высоту и ширину, потому что она переопределяется встроенными свойствами высоты/ширины. Итак, каков наилучший способ, учитывая svg с высотой/шириной, чтобы управлять высотой и шириной из CSS? Является ли это возможным? Или, если нет, что лучше всего подходит для изменения размера inline svgs?

Answer 1

Если вы встроили SVG, вам не нужен Javascript. Например, можно масштабировать до 48px 24px значок вроде этого:

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