<!-- Inline -->
<svg class="icon icon--user" id="icon-13bb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>

<!-- HKK Plus -->
<svg class="icon icon--hkk-plus" id="icon-1bc2" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-1bc2">
  <title id="title-icon-1bc2">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>

<!-- Grau -->
<svg class="icon icon--user icon--grey" id="icon-d3f5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>

<!-- Groß -->
<svg class="icon icon--user icon--large" id="icon-b1d8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>

<!-- Abstand rechts -->
<svg class="icon icon--user icon--before" id="icon-d119" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>
Das ist ein Icon.

<!-- Abstand links -->
Das ist ein Icon.
<svg class="icon icon--user icon--after" id="icon-f9dd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`icon--${icon}`);
  attr.id = id || attr.id || `icon-${randomString()}`;
  attr.viewBox = viewBox || attr.viewBox || '0 0 200 200';
  attr.role = title ? 'img' : 'presentation';
  
  //- Labelled by
  labelledby = [];
  if (title) labelledby.push(`title-${attr.id}`);
  if (desc) labelledby.push(`desc-${attr.id}`);
  if (labelledby.length > 0) attr['aria-labelledby'] = labelledby.join(' ');
  
  // Modifiers
  if (before) attr.class.push('icon--before');
  if (after) attr.class.push('icon--after');
  if (large) attr.class.push('icon--large');
  if (color) attr.class.push(`icon--${color}`);

//- Demo text
if text && after
  | #{text}

//- Render atom
svg.icon&attributes(attr)
  if title
    title(id=`title-${attr.id}`)= title
  if desc
    desc(id=`desc-${attr.id}`)= desc
  use(xlink:href=`#icon-${icon}`)

//- Demo text
if text && before
  | #{text}
/* Inline */
{
  "icon": "user"
}

/* HKK Plus */
{
  "icon": "hkk-plus",
  "title": "HKK Plus"
}

/* Grau */
{
  "icon": "user",
  "color": "grey"
}

/* Groß */
{
  "icon": "user",
  "large": true
}

/* Abstand rechts */
{
  "icon": "user",
  "before": true,
  "text": "Das ist ein Icon."
}

/* Abstand links */
{
  "icon": "user",
  "after": true,
  "text": "Das ist ein Icon."
}

  • Content:
    .icon {
      display: inline-block;
      height: 1em;
      pointer-events: none;
      vertical-align: -0.1em;
      width: 1em;
    }
    
    .icon--before {
      margin-right: 0.5em;
    }
    
    .icon--after {
      margin-left: 0.5em;
    }
    
    .icon--grey {
      color: $color-steelgrey-dark;
    }
    
    .icon--large {
      height: 1.3em;
      vertical-align: -0.4em;
      width: 1.3em;
    }
    
  • URL: /components/raw/icon/icon.scss
  • Filesystem Path: src/components/atoms/icon/icon.scss
  • Size: 322 Bytes

There are no notes for this item.