HAS Green Academy styleguide

Icon

1179 × 333 
<svg class="c-icon    " aria-hidden="true">
    <use xlink:href="../../dist/sprite.svg#icon-chevron-right" />
</svg>
 
<svg
  class="c-icon  {{ modifier }}  {{#if size}}c-icon--{{size}}{{/if}}"
  aria-hidden="true"
>
  <use xlink:href="{{ path '/dist/sprite.svg' }}#icon-{{ icon }}" />
</svg>
 
{
  "icon": "chevron-right"
}
  • Content: 
    /*  ======================================================
    atoms.icon
    Icon system based on svg sprites
    ====================================================== */

/*  Module
    ====================================================== */

.c-icon {
  display: block;
  inline-size: var(--space-base);
  block-size: var(--space-base);
  fill: currentColor;
}



/*  Modifier
    ========================================================================= */

.c-icon--rounded {
  border-radius: 50%;
}

.c-icon--large {
  inline-size: calc(var(--space-base) * 1.5);
  block-size: calc(var(--space-base) * 1.5);
}

.c-icon--small {
  inline-size: var(--space-small);
  block-size: var(--space-small);
}
  • URL: /components/raw/atoms-icon/_icon.scss
  • Filesystem Path: src/components/atoms/icon/_icon.scss
  • Size: 708 Bytes

No notes defined.