Icon

Helper #

Use the icon-text class around the svg icon to make it the same size as the text.

<p>
    Lorem ipsum
    <span class="icon-text"><svg ...></span>
    dolor sit amet
</p>
<p class="text-large">
    Lorem ipsum
    <span class="icon-text"><svg ...></span>
    dolor sit amet
</p>

Size #

Superkube generates classes of icon sizes, which are specified in $icons map.

$icons: (
    small: 12px,
    base: 16px,
    large: 32px
);

In this case, such classes will be generated:

• icon-small
• icon-base
• icon-large

<div class="icon-small"><svg ...></div>
<div class="icon-base"><svg ...></div>
<div class="icon-large"><svg ...></div>

Behavior on small screens #

Use the suffix -sm to change the icon size on small screens.

<div class="icon-large icon-base-sm"><svg ...></div>