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};