Icon Module

The Icon module provides a flexible container for SVG or image-based icons, with support for sizes, colors, outline/fill, interactive (action) states, and loading/disabled variants.

Signature:

@mixin use-icon($colors: (), $sizes: ());

Example:

@include termeh.use-icon(("primary", "green"), ("small", "large"));

Dependencies

Icon module uses the following Termeh global var():

Component	Type	Usage	Default
decorator → size	Color	Loading spinner thickness	null

---

Icon module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
shade	Default loading spinner color	error
shade → mute	Default action icon color	null
shade → readable	Default hover color for action icons	null

Modifiers

• .is-outline → applies color to stroke instead of fill
• .is-action → makes icon clickable
• .is-loading → applies loading state
• .is-disabled → applies disabled state
• .is-<size> → applies a registered size as icon size
• .is-<color> → applies a registered color as accent color