HIDA - Helmholtz Information and Data Science Academy

Icon 

<!-- Dekorativ -->
<svg class="icon icon--dummy" viewBox="0 0 200 200" role="presentation">
    <use xlink:href="#icon-dummy"></use>
</svg>


<!-- Mit Titel -->
<svg class="icon icon--dummy" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e247aa-title">
    <title id="icon-e247aa-title">Das ist ein Icon</title>
    <use xlink:href="#icon-dummy"></use>
</svg>


<!-- Mit Titel & Beschreibung -->
<svg class="icon icon--dummy" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6dba13-title icon-6dba13-desc">
    <title id="icon-6dba13-title">Das ist ein Icon</title>
    <desc id="icon-6dba13-desc"></desc>
    <use xlink:href="#icon-dummy"></use>
</svg>


//- Attributes
- attr = attr || {};
- baseId = id || attr.id || `icon-${randomString()}`;

//- ARIA Label
- labelledby = [];
- if (title) labelledby.push(`${baseId}-title`);
- if (description) labelledby.push(`${baseId}-desc`);

//- Render icon
svg.icon(id=id, class=`icon--${icon}`, viewBox=viewBox || '0 0 200 200', role=title ? 'img' : 'presentation', aria-labelledby=labelledby.length > 0 && labelledby.join(' '))&attributes(attr)
  //- Add title
  if title
    title(id=`${baseId}-title`) #{title}

  //- Add description
  if description
    desc(id=`${baseId}-desc`) #{desc}

  //- Reference to SVG storage
  use(xlink:href=`#icon-${icon}`)
 
/* Dekorativ */
{
  "icon": "dummy"
}


/* Mit Titel */
{
  "icon": "dummy",
  "title": "Das ist ein Icon"
}


/* Mit Titel & Beschreibung */
{
  "icon": "dummy",
  "title": "Das ist ein Icon",
  "description": "Sowohl der Titel als auch die Beschreibung werden von Screenreadern vorgelesen."
}
  • Content: 
    import randomId from 'javascripts/utils/random-id';

export default function generateIcon({
  icon,
  title,
  desc,
  classes = [],
  id,
  paths,
  viewBox = '0 0 200 200',
}) {
  const labelledby = [];
  const xmlns = 'http://www.w3.org/2000/svg';

  // Get ID for icon
  const newId = id || randomId();

  // Append classes
  classes.push('icon', `icon--${icon}`);

  // Generate icon
  const $icon = document.createElementNS(xmlns, 'svg');
  $icon.setAttributeNS(null, 'viewBox', viewBox);
  $icon.setAttributeNS(null, 'role', title ? 'img' : 'presentation');
  $icon.setAttributeNS(null, 'class', classes.join(' '));
  $icon.setAttributeNS(null, 'id', `icon-${newId}`);

  // Add title
  if (title) {
    labelledby.push(`title-${newId}`);

    const $title = document.createElementNS(xmlns, 'title');
    $title.setAttributeNS(null, 'id', `title-${newId}`);
    $title.appendChild(document.createTextNode(title));
    $icon.appendChild($title);
  }

  // Description
  if (desc) {
    labelledby.push(`desc-${newId}`);

    const $desc = document.createElementNS(xmlns, 'desc');
    $desc.setAttributeNS(null, 'id', `desc-${newId}`);
    $desc.appendChild(document.createTextNode(desc));
    $icon.appendChild($desc);
  }

  // Add aria-labelledby to icon
  if (labelledby.length > 0) {
    $icon.setAttributeNS(null, 'aria-labelledby', labelledby.join(' '));
  }

  // Add reference to icons
  if (!paths) {
    const $use = document.createElementNS(xmlns, 'use');

    $use.setAttributeNS(
      'http://www.w3.org/1999/xlink',
      'xlink:href',
      `#icon-${icon}`,
    );

    $icon.appendChild($use);
    $icon.appendChild(document.createComment(' '));
  } else if (Array.isArray(paths)) {
    paths.forEach((path) => {
      const $path = document.createElementNS(xmlns, 'path');
      $path.setAttributeNS('', 'd', path);
      $icon.appendChild($path);
    });
  }

  return $icon;
}
  • URL: /components/raw/icon/generate-icon.js
  • Filesystem Path: src/components/_particles/icon/generate-icon.js
  • Size: 1.9 KB
  • Content: 
    .icon {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  user-select: all;
  vertical-align: middle;
  width: 1em;
}
  • URL: /components/raw/icon/icon.scss
  • Filesystem Path: src/components/_particles/icon/icon.scss
  • Size: 130 Bytes

There are no notes for this item.