Fontawesome 5 SVG with JS: How does svg scale with font-size css property?

Question

how does FA5 scale SVG icons via font-size css property? How can I scale this example svg like Fontawesome does? Thank you very much.

svg{
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50"/>
</svg> 

Answer 1

It can be scaled via font-size like this:

svg {width: 3em; height:3em}

#svg1 {font-size:10px}
#svg2 {font-size:20px}

<svg id="svg1" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

<svg id="svg2" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

Answer 2

With FA5 SVG icons it will append a class to the svg element as default, so you are able to hook into it by using the below

<div class="myIcon">
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="50"/>
    </svg> 
</div>

.myIcon .svg-inline--fa{
    font-size: 20px;
}