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 components and 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-red-base);
}

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


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

Iconbox #

Use the iconbox module around the icon to put it in a box with a background.


<span class="iconbox bg-silver radius-large">
    <span class="icon icon-16">
        <svg ...>
    </span>
</span>
<span class="iconbox iconbox-large bg-dark radius-circle">
    <span class="icon icon-light icon-16">
        <svg ...>
    </span>
</span>

See more about the Iconbox module.

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--icon-color: {color-value};

// params
--icon-size: {size-value};