hkk Frontend 2017

Icon 

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


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


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


<!-- Groß -->
<svg class="icon icon--user icon--large" id="icon-b971" 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-fae8" 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-64d7" 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.