Colors

<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-down"></use>
    </svg>
</i>
<!-- ICON Component -->
<i class="kx-icon{% if size %} kx-icon--size-{{ size }}{% endif %}{% for class in classes %} {{ class }}{% endfor %}">
    <svg{% if ariaHidden %} aria-hidden="true"{% endif %} focusable="false">
        <use xlink:href="{{ '/assets/img/icons/sprites/icons.svg' | path }}#{% if symbol %}{{ symbol }}{% endif %}">{% if title -%}<title>{{ title }}</title>{% endif -%}</use>
    </svg>
</i>
{
  "size": "moderate",
  "classes": null,
  "title": null,
  "symbol": "angle-down",
  "ariaHidden": null
}
  • Content:
    // ==========================================================================
    // BASE: icons
    // ==========================================================================
    
    .kx-icon {
        display: inline-block;
        vertical-align: middle;
    }
    
    // Modifiers: Size
    // ==========================================================================
    
    .kx-icon--size-tiny {
        @include icon-scale(tiny);
    }
    
    .kx-icon--size-small {
        @include icon-scale(small);
    }
    
    .kx-icon--size-base {
        @include icon-scale(base);
    }
    
    .kx-icon--size-moderate {
        @include icon-scale(moderate);
    }
    
    .kx-icon--size-medium {
        @include icon-scale(medium);
    }
    
    .kx-icon--size-large {
        @include icon-scale(large);
    }
    
    .kx-icon--size-xlarge {
        @include icon-scale(xlarge);
    }
    
    .kx-icon--size-xxlarge {
        @include icon-scale(xxlarge);
    }
    
    .kx-icon--size-xxxlarge {
        @include icon-scale(xxxlarge);
    }
    
    // Size of svg inside icon-container
    .kx-icon {
        position: relative;
    
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: inherit;
            fill: currentColor;
        }
    
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    
    // Modifiers: Color
    // ==========================================================================
    
    .kx-icon--light {
        fill: $color-white;
    }
    
    .kx-icon--dark {
        fill: $color-black;
    }
    
    
  • URL: /components/raw/icon/_icon.scss
  • Filesystem Path: src\components\01-icon\_icon.scss
  • Size: 1.5 KB

There are no notes for this item.