There is now a CSS unit for this, so instead of something like this:

svg {
  height: round(#{$line-height-xsmall * $font-size-xsmall});
}

we can now do:

svg {
  height: 1lh;
}

to align an icon with the ::first-line of some wrapping text next to it.

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#line_height_units
https://caniuse.com/mdn-css_types_length_lh