Dialtone

Size

Utilities for controlling an SVG's size.

Classes

ClassOutput
d-svg--size14 width: 1.4rem !important; height: 1.4rem !important;
d-svg--size16 width: 1.6rem !important; height: 1.6rem !important;
d-svg--size18 width: 1.8rem !important; height: 1.8rem !important;
d-svg--size20 width: 2.0rem !important; height: 2.0rem !important;
d-svg--size24 width: 2.4rem !important; height: 2.4rem !important;
d-svg--size32 width: 3.2rem !important; height: 3.2rem !important;
d-svg--size48 width: 4.8rem !important; height: 4.8rem !important;
d-svg--size64 width: 6.4rem !important; height: 6.4rem !important;
d-svg--size100p width: 100% !important; height: auto !important;

Usage

Use d-svg--size{n} to control the size of an SVG.

<svg class="d-svg d-svg--system d-svg--size14">...</svg>
<svg class="d-svg d-svg--system d-svg--size16">...</svg>
<svg class="d-svg d-svg--system d-svg--size18">...</svg>
<svg class="d-svg d-svg--system d-svg--size20">...</svg>
<svg class="d-svg d-svg--system d-svg--size24">...</svg>
<svg class="d-svg d-svg--system d-svg--size32">...</svg>
<svg class="d-svg d-svg--system d-svg--size48">...</svg>
<svg class="d-svg d-svg--system d-svg--size64">...</svg>

Use d-svg--size100p to set the size of an SVG to the size of the containing element.

<div class="d-w32 d-h32">
  <svg class="d-svg d-svg--system d-svg--size100p">...</svg>
</div>
Last Updated: