<!-- Default -->
<svg width="16" height="16" class="icon icon-circle-check icon-status-success"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg>

<!-- Alert -->
<svg width="16" height="16" class="icon icon-circle-delete icon-status-alert"><use xlink:href="/assets/svg/core.svg#circle-delete" /></svg>

<!-- Warning -->
<svg width="16" height="16" class="icon icon-alert icon-status-warning"><use xlink:href="/assets/svg/core.svg#alert" /></svg>

<!-- Info -->
<svg width="16" height="16" class="icon icon-info-alt icon-status-info"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg>

{{ icon icon 16 class }}
/* Default */
{
  "text": "Go!",
  "class": "status-success",
  "icon": "core/circle-check"
}

/* Alert */
{
  "text": "Go!",
  "class": "status-alert",
  "icon": "core/circle-delete"
}

/* Warning */
{
  "text": "Go!",
  "class": "status-warning",
  "icon": "core/alert"
}

/* Info */
{
  "text": "Go!",
  "class": "status-info",
  "icon": "core/info-alt"
}

  • Content:
    svg.icon-status-alert {
      margin-right: .2rem;
      fill: palette(alert);
    }
    
    svg.icon-status-warning {
      margin-right: .2rem;
      fill: palette(warning);
    }
    
    svg.icon-status-info {
      margin-right: .2rem;
      fill: palette(info);
    }
    
    svg.icon-status-success {
      margin-right: .2rem;
      fill: palette(success);
    }
    
    
  • URL: /components/raw/status-icon/status-icon.scss
  • Filesystem Path: src/components/02-icons/02-status-icon/status-icon.scss
  • Size: 302 Bytes

There are no notes for this item.