Modules

Icon

This module helps to work with svg icons.

Text #

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet


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

Size #

By default, Superkube has several icon sizes, which are set in $scales.


// =Scales
$scales: (
    icon: (
        12: 12px,
        14: 14px,
        16: 16px,
        20: 20px,
        24: 24px,
        32: 32px,
        48: 48px,
        64: 64px
    )
);

Use the icon class and icon-{size} with a suffix to specify the icon size.


<span class="icon icon-12"><svg ...></span>
<span class="icon icon-24"><svg ...></span>
<span class="icon icon-64"><svg ...></span>

You can add your own icon size by extending $scales. See also how to work with scales for modules.


// =Scales
$scales: map-extend($scales, (
    icon: (
        128: 128px
    )
));

Superkube will automatically create a new size class with the specified value.


<span class="icon icon-128"><svg ...></span>

Responsive #

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


<span class="icon icon-64 icon-20-sm"><svg ...></span>

In the example above, the 64px icon would become 20px on small screens.

Color #

By default, icons have several classes for specifying color.


<span class="icon icon-64 icon-dark"><svg ...></span>
<span class="icon icon-64 icon-primary"><svg ...></span>
<span class="icon icon-64 icon-light"><svg ...></span>

You can add your own icon color by creating a color modifier and redefining the icon color variable.


.icon-important {
    --icon-color: var(--palette-negative-base);
}

Now you have the icon-important class with the new icon color.


<span class="icon icon-64 icon-important"><svg ...></span>

Box #

Use the icon-box-{size} modifier around the icon to put it in a box with a background. Where {size} corresponds to the icon size scale.


<span class="bg-aluminum icon-box-32 r-base">
    <svg ...>
</span>
<span class="bg-dark icon icon-light icon-box-32 r-circle">
    <svg ...>
</span>