GDL - Global Design Language

Icons: Sport 

<svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-basket" viewBox="0 0 48 48">
        <path d="M22.6 0h2.8l2.4.3a23.3 23.3 0 0113 6.6A23.4 23.4 0 0148 26.4 23 23 0 0142 39.8 23.5 23.5 0 0125 48a22.8 22.8 0 01-13.2-3.3A23.7 23.7 0 01.4 28L0 25.4v-2.8l.1-1A23.8 23.8 0 016.1 8 23.6 23.6 0 0120 .4l2.7-.4zm3 44.7l1.4-.2a25 25 0 007.1-2.5 6.2 6.2 0 003.1-3.3c1.2-2.9.8-5.8-.2-8.7a15.9 15.9 0 00-2.7-4.1l-3.9-5a15.4 15.4 0 01-2.6-5.8c-.3-1.2-.3-2.4-.5-3.6 0-.1 0-.4-.2-.4l-1.4-.2zM22.4 11l-1.2.1c-.4 0-.4.2-.5.5a28.4 28.4 0 01-.3 3.3 18.3 18.3 0 01-3.7 7.4l-3.9 5a12.3 12.3 0 00-2.5 8.7 6.9 6.9 0 003.5 6 24 24 0 005.8 2.2l2.8.6zm8.4.9v.6a3 3 0 000 .4 13.8 13.8 0 002.6 6.5c1.2 1.7 2.6 3.2 3.8 5a30.2 30.2 0 012.6 4 15 15 0 011.4 6.4v.6h.2a19.1 19.1 0 001-1.7 25.5 25.5 0 001.2-2.7 11.7 11.7 0 00-.7-10.2 17.3 17.3 0 00-5.3-5.8 22.5 22.5 0 00-6.8-3.2zm-24 23.6l.1-.1v-.5a15.4 15.4 0 013-9.1l4-5.1a18.4 18.4 0 003-5.4 10.9 10.9 0 00.6-3.4 3.5 3.5 0 00-.5.1l-3.6 1.5a18.3 18.3 0 00-8.2 7.7 11.9 11.9 0 00-1.5 5.7 11.6 11.6 0 001.1 4.9l2 3.6zm10-26.8v-.2a8.3 8.3 0 00-1.1-.7 7.3 7.3 0 00-3.5-.4 1.2 1.2 0 00-.6.2 20.2 20.2 0 00-5 5.6c-.5.7-1 1.5-1.3 2.3a24.2 24.2 0 0111.4-6.9zm14.8 0a24.2 24.2 0 0111.4 6.9v-.1-.2a20.6 20.6 0 00-6.4-7.8.7.7 0 00-.4-.1l-2.4.1a3 3 0 00-2.3 1.1zm-9.2-5.3a20.2 20.2 0 00-5.6 1.2.7.7 0 00.1.2 6.2 6.2 0 013 2.9.4.4 0 00.4.2l2-.3zm3.4 4.2l2 .3c.2 0 .4-.2.5-.3a5.8 5.8 0 012-2.3l1.1-.7a19.8 19.8 0 00-5.6-1.2z" />
    </symbol>
    <symbol id="icon-calcio" viewBox="0 0 48 48">
        <path d="M25.4 48h-2.9l-3-.5a23.1 23.1 0 01-8.2-3.2A24.3 24.3 0 013 35.5 23.6 23.6 0 01.1 21.6 23 23 0 015.4 9a23.6 23.6 0 0118-9 22.4 22.4 0 0111.8 2.8 23.8 23.8 0 0112.4 17l.4 2.8V25.8a22.5 22.5 0 01-2.8 9.4 23.8 23.8 0 01-17 12.4l-2.8.4zM24 29.9h4a.5.5 0 00.5-.4l2.5-7.6a.4.4 0 00-.1-.6l-6.6-4.8a.4.4 0 00-.6 0L17.4 21a.5.5 0 00-.2.7l2.4 7.6a.5.5 0 00.6.5H24zM5.1 25.6a1.5 1.5 0 000 .2l2 7.7a.6.6 0 00.4.3l5.7 1.9a.4.4 0 00.6-.3l2.8-4.2a.8.8 0 000-.5L14 22.3a.8.8 0 00-.4-.4L9 21a.5.5 0 00-.5.1l-3.3 4.3a2.1 2.1 0 00-.2.3zm34.3-4.8h-.3l-4.6 1a.7.7 0 00-.4.5l-2.7 8.5a.8.8 0 000 .5l2.6 4.1c.2.3.3.3.6.2l5.5-1.8a.7.7 0 00.4-.4l2.4-7.6a.6.6 0 000-.5L39.6 21a1 1 0 00-.2-.1zm-29.8-3a1.4 1.4 0 00.2 0l5 1.2a.7.7 0 00.4-.1l7-5.2a.8.8 0 00.2-.6V8.8a.5.5 0 00-.4-.6l-5.4-1.7a.7.7 0 00-.7.1l-5.2 3.9a2.3 2.3 0 00-1.2 2.2c.2 1.7 0 3.4 0 5zm29-3.3v-2.8a.8.8 0 00-.3-.6l-6.7-4.4a.7.7 0 00-.6-.1l-5.1 1.6a.4.4 0 00-.3.5v4.6a.7.7 0 00.2.5l7 5a.7.7 0 00.6.2l4.8-1.3a.4.4 0 00.3-.4v-2.9zM23.8 42h4.4a.9.9 0 00.6-.3c1-1.2 1.8-2.5 2.7-3.7a.5.5 0 000-.7l-2.4-3.8a.6.6 0 00-.6-.3h-9a.8.8 0 00-.5.3l-2.7 3.9a.4.4 0 000 .6l2.5 3.7a.7.7 0 00.7.3zm16.3-5l-3.3 1.2a8.7 8.7 0 00-2.4.9 8.5 8.5 0 00-1.5 2l-1.7 2.4a18.6 18.6 0 008.9-6.4zM6.5 12.9a19.8 19.8 0 00-3.3 10v-.2l3.1-4a.7.7 0 00.2-.4v-5.4zm22.8-9a19 19 0 00-10.6 0l5 1.7a.7.7 0 00.4 0zM7.8 37.3a19.2 19.2 0 008.4 6.1L16 43l-2.5-3.7a1.6 1.6 0 00-.7-.5L9 37.5zm33.7-24.3v5.4a1 1 0 00.2.4l2.7 3.7.3.4a19.9 19.9 0 00-3.2-9.9z" />
    </symbol>
    <symbol id="icon-volley" viewBox="0 0 48 48">
        <path d="M48 22.6v3.3l-.4 2.6A23.4 23.4 0 0141 40.9a23.4 23.4 0 01-13 6.7l-2.7.4h-2.7l-2.4-.3a23.4 23.4 0 01-13-6.7 23.4 23.4 0 01-7-19.5A22.9 22.9 0 016 8.2 23.5 23.5 0 0123 0a22.8 22.8 0 0113.3 3.4 23.7 23.7 0 0111.3 16.5l.4 2.7zM16.5 34.5a20 20 0 00-2 7.6.6.6 0 00.3.4 20.2 20.2 0 0012.2 2A20.4 20.4 0 0040 37l1.3-1.7c-8.5 4.3-16.8 4-24.9-.8zm-11-1.1c.5-9.5 4.9-16.5 13.1-21.1v-.1A20.2 20.2 0 0013 6.7a.4.4 0 00-.4 0A28.7 28.7 0 009.7 9a20.4 20.4 0 00-6 19.4 18.5 18.5 0 001.8 5zm31.3-8.1a20.3 20.3 0 007.7-2.2.5.5 0 00.1-.4 19.9 19.9 0 00-2.6-8.9A20.5 20.5 0 0028 3.7L25 3.3a24.6 24.6 0 0111.7 22zm-3.4 0v-.4a18.8 18.8 0 00-.4-5A20.3 20.3 0 0019.3 4.3c-1.2-.4-2.1.2-3.2.5l.3.3a24 24 0 019.2 17.6.7.7 0 00.3.5l2.5 1a18.6 18.6 0 005 1zm-15.2 6.3a1.5 1.5 0 00.1.1 20.4 20.4 0 0014 3.1 20.2 20.2 0 0011.5-5.4l.3-.4.4-2.3-.6.3a23.7 23.7 0 01-10.3 1.6 23.3 23.3 0 01-9.2-2.5.6.6 0 00-.7 0l-1.2.9a20.3 20.3 0 00-4.3 4.6zm2.1-16.4a19.5 19.5 0 00-5 3.5 20.7 20.7 0 00-6.2 18 5.4 5.4 0 00.5 2 9.4 9.4 0 001.7 1.7l.1-.4.6-3a23.7 23.7 0 019.8-13.6.8.8 0 00.5-.9c-.2-1.1-.3-2.3-.6-3.4a17 17 0 00-1.4-4z" />
    </symbol>
</svg>
 
<svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-basket" viewBox="0 0 48 48"><path d="M22.6 0h2.8l2.4.3a23.3 23.3 0 0113 6.6A23.4 23.4 0 0148 26.4 23 23 0 0142 39.8 23.5 23.5 0 0125 48a22.8 22.8 0 01-13.2-3.3A23.7 23.7 0 01.4 28L0 25.4v-2.8l.1-1A23.8 23.8 0 016.1 8 23.6 23.6 0 0120 .4l2.7-.4zm3 44.7l1.4-.2a25 25 0 007.1-2.5 6.2 6.2 0 003.1-3.3c1.2-2.9.8-5.8-.2-8.7a15.9 15.9 0 00-2.7-4.1l-3.9-5a15.4 15.4 0 01-2.6-5.8c-.3-1.2-.3-2.4-.5-3.6 0-.1 0-.4-.2-.4l-1.4-.2zM22.4 11l-1.2.1c-.4 0-.4.2-.5.5a28.4 28.4 0 01-.3 3.3 18.3 18.3 0 01-3.7 7.4l-3.9 5a12.3 12.3 0 00-2.5 8.7 6.9 6.9 0 003.5 6 24 24 0 005.8 2.2l2.8.6zm8.4.9v.6a3 3 0 000 .4 13.8 13.8 0 002.6 6.5c1.2 1.7 2.6 3.2 3.8 5a30.2 30.2 0 012.6 4 15 15 0 011.4 6.4v.6h.2a19.1 19.1 0 001-1.7 25.5 25.5 0 001.2-2.7 11.7 11.7 0 00-.7-10.2 17.3 17.3 0 00-5.3-5.8 22.5 22.5 0 00-6.8-3.2zm-24 23.6l.1-.1v-.5a15.4 15.4 0 013-9.1l4-5.1a18.4 18.4 0 003-5.4 10.9 10.9 0 00.6-3.4 3.5 3.5 0 00-.5.1l-3.6 1.5a18.3 18.3 0 00-8.2 7.7 11.9 11.9 0 00-1.5 5.7 11.6 11.6 0 001.1 4.9l2 3.6zm10-26.8v-.2a8.3 8.3 0 00-1.1-.7 7.3 7.3 0 00-3.5-.4 1.2 1.2 0 00-.6.2 20.2 20.2 0 00-5 5.6c-.5.7-1 1.5-1.3 2.3a24.2 24.2 0 0111.4-6.9zm14.8 0a24.2 24.2 0 0111.4 6.9v-.1-.2a20.6 20.6 0 00-6.4-7.8.7.7 0 00-.4-.1l-2.4.1a3 3 0 00-2.3 1.1zm-9.2-5.3a20.2 20.2 0 00-5.6 1.2.7.7 0 00.1.2 6.2 6.2 0 013 2.9.4.4 0 00.4.2l2-.3zm3.4 4.2l2 .3c.2 0 .4-.2.5-.3a5.8 5.8 0 012-2.3l1.1-.7a19.8 19.8 0 00-5.6-1.2z" /></symbol>
  <symbol id="icon-calcio" viewBox="0 0 48 48"><path d="M25.4 48h-2.9l-3-.5a23.1 23.1 0 01-8.2-3.2A24.3 24.3 0 013 35.5 23.6 23.6 0 01.1 21.6 23 23 0 015.4 9a23.6 23.6 0 0118-9 22.4 22.4 0 0111.8 2.8 23.8 23.8 0 0112.4 17l.4 2.8V25.8a22.5 22.5 0 01-2.8 9.4 23.8 23.8 0 01-17 12.4l-2.8.4zM24 29.9h4a.5.5 0 00.5-.4l2.5-7.6a.4.4 0 00-.1-.6l-6.6-4.8a.4.4 0 00-.6 0L17.4 21a.5.5 0 00-.2.7l2.4 7.6a.5.5 0 00.6.5H24zM5.1 25.6a1.5 1.5 0 000 .2l2 7.7a.6.6 0 00.4.3l5.7 1.9a.4.4 0 00.6-.3l2.8-4.2a.8.8 0 000-.5L14 22.3a.8.8 0 00-.4-.4L9 21a.5.5 0 00-.5.1l-3.3 4.3a2.1 2.1 0 00-.2.3zm34.3-4.8h-.3l-4.6 1a.7.7 0 00-.4.5l-2.7 8.5a.8.8 0 000 .5l2.6 4.1c.2.3.3.3.6.2l5.5-1.8a.7.7 0 00.4-.4l2.4-7.6a.6.6 0 000-.5L39.6 21a1 1 0 00-.2-.1zm-29.8-3a1.4 1.4 0 00.2 0l5 1.2a.7.7 0 00.4-.1l7-5.2a.8.8 0 00.2-.6V8.8a.5.5 0 00-.4-.6l-5.4-1.7a.7.7 0 00-.7.1l-5.2 3.9a2.3 2.3 0 00-1.2 2.2c.2 1.7 0 3.4 0 5zm29-3.3v-2.8a.8.8 0 00-.3-.6l-6.7-4.4a.7.7 0 00-.6-.1l-5.1 1.6a.4.4 0 00-.3.5v4.6a.7.7 0 00.2.5l7 5a.7.7 0 00.6.2l4.8-1.3a.4.4 0 00.3-.4v-2.9zM23.8 42h4.4a.9.9 0 00.6-.3c1-1.2 1.8-2.5 2.7-3.7a.5.5 0 000-.7l-2.4-3.8a.6.6 0 00-.6-.3h-9a.8.8 0 00-.5.3l-2.7 3.9a.4.4 0 000 .6l2.5 3.7a.7.7 0 00.7.3zm16.3-5l-3.3 1.2a8.7 8.7 0 00-2.4.9 8.5 8.5 0 00-1.5 2l-1.7 2.4a18.6 18.6 0 008.9-6.4zM6.5 12.9a19.8 19.8 0 00-3.3 10v-.2l3.1-4a.7.7 0 00.2-.4v-5.4zm22.8-9a19 19 0 00-10.6 0l5 1.7a.7.7 0 00.4 0zM7.8 37.3a19.2 19.2 0 008.4 6.1L16 43l-2.5-3.7a1.6 1.6 0 00-.7-.5L9 37.5zm33.7-24.3v5.4a1 1 0 00.2.4l2.7 3.7.3.4a19.9 19.9 0 00-3.2-9.9z"/></symbol>
  <symbol id="icon-volley" viewBox="0 0 48 48"><path d="M48 22.6v3.3l-.4 2.6A23.4 23.4 0 0141 40.9a23.4 23.4 0 01-13 6.7l-2.7.4h-2.7l-2.4-.3a23.4 23.4 0 01-13-6.7 23.4 23.4 0 01-7-19.5A22.9 22.9 0 016 8.2 23.5 23.5 0 0123 0a22.8 22.8 0 0113.3 3.4 23.7 23.7 0 0111.3 16.5l.4 2.7zM16.5 34.5a20 20 0 00-2 7.6.6.6 0 00.3.4 20.2 20.2 0 0012.2 2A20.4 20.4 0 0040 37l1.3-1.7c-8.5 4.3-16.8 4-24.9-.8zm-11-1.1c.5-9.5 4.9-16.5 13.1-21.1v-.1A20.2 20.2 0 0013 6.7a.4.4 0 00-.4 0A28.7 28.7 0 009.7 9a20.4 20.4 0 00-6 19.4 18.5 18.5 0 001.8 5zm31.3-8.1a20.3 20.3 0 007.7-2.2.5.5 0 00.1-.4 19.9 19.9 0 00-2.6-8.9A20.5 20.5 0 0028 3.7L25 3.3a24.6 24.6 0 0111.7 22zm-3.4 0v-.4a18.8 18.8 0 00-.4-5A20.3 20.3 0 0019.3 4.3c-1.2-.4-2.1.2-3.2.5l.3.3a24 24 0 019.2 17.6.7.7 0 00.3.5l2.5 1a18.6 18.6 0 005 1zm-15.2 6.3a1.5 1.5 0 00.1.1 20.4 20.4 0 0014 3.1 20.2 20.2 0 0011.5-5.4l.3-.4.4-2.3-.6.3a23.7 23.7 0 01-10.3 1.6 23.3 23.3 0 01-9.2-2.5.6.6 0 00-.7 0l-1.2.9a20.3 20.3 0 00-4.3 4.6zm2.1-16.4a19.5 19.5 0 00-5 3.5 20.7 20.7 0 00-6.2 18 5.4 5.4 0 00.5 2 9.4 9.4 0 001.7 1.7l.1-.4.6-3a23.7 23.7 0 019.8-13.6.8.8 0 00.5-.9c-.2-1.1-.3-2.3-.6-3.4a17 17 0 00-1.4-4z" /></symbol>
</svg>
 
/* No context defined. */
  • Content: 
    // $(function() {

//   $("svg symbol").each(function() 
//   {
//     $('body').append('<div class="u-flex u-column u-items-center u-p-base u-size-1-2 u-size-1-3@sm u-size-1-6@lg"><svg class="o-icon o-icon--md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + $(this).attr('id') + '"></use></svg><small>' + $(this).attr('id') + '</small></div>' );
//   });

// });


document.addEventListener("DOMContentLoaded", function() {
  // Seleziona tutti gli elementi <symbol> dentro <svg>
  var symbols = document.querySelectorAll("svg symbol");

  symbols.forEach(function(symbol) {
    // Crea un nuovo div con la struttura HTML richiesta
    var div = document.createElement('div');
    div.className = 'u-flex u-column u-items-center u-p-base u-size-1-2 u-size-1-3@sm u-size-1-6@lg';

    // Crea un elemento <svg> con l'attributo <use>
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('class', 'o-icon o-icon--md');  // Utilizza setAttribute per impostare la classe
    var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + symbol.id);
    use.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
    svg.appendChild(use);

    // Crea un elemento <small> contenente l'id del simbolo
    var small = document.createElement('small');
    small.textContent = symbol.id;

    // Aggiungi l'elemento <svg> e <small> al div creato
    div.appendChild(svg);
    div.appendChild(small);

    // Aggiungi il div al corpo del documento
    document.body.appendChild(div);
  });
});
  • URL: /components/raw/icons/icons.js
  • Filesystem Path: src/lib/components/icons/icons.js
  • Size: 1.6 KB

No notes defined.