height svg by font size-CodePudding

i have many text on site and some time i need add SVG icon in text in: p,h1,span,ul and other text based components. How i can set SVG hight by text in this tags without FLEX? i try line-height, height: 100%, dont help...

<h1>Hello <svg class="heightByFontSize"></svg> world!</h1>
<p>Hello <svg class="heightByFontSize"></svg> world!</p>
<span>Hello <svg class="heightByFontSize"></svg> world!</span>

.heightByFontSize{
    // ????
}

CodePudding user response：

.heightByFontSize {
  height: 0.7em;
  width: auto;
}

<h1>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</h1>
<p>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</p>
<span>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</span>