Icon lists

<ul>
  <li class="icon-list_item">
    <svg class="icon-list_icon"><use xlink:href="#tick" /></svg>
    <span class="icon-list_text">Item</span>
  </li>
  <li class="icon-list_item">
    <svg class="icon-list_icon"><use xlink:href="#tick" /></svg>
    <span class="icon-list_text">Item</span>
  </li>
</ul>

Template

@mixin iconListVariables
/*  1. item spacing ......... */  var(--icon-list-item-spacing),
/*  2. icon width ........... */  var(--icon-list-icon-width),
/*  3. icon height .......... */  var(--icon-list-icon-height),
/*  4. icon gap ............. */  var(--icon-list-icon-gap),
/*  5. icon fill ............ */  var(--icon-list-icon-fill),
/*  6. icon offset x ........ */  -0.1rem,
/*  7. icon offset y ........ */  -0.3rem;

@mixin iconListSelectors
/*  1. icon list............. */  .icon-list,
/*  2. list item ............ */  .icon-list_item,
/*  3. icon ................. */  .icon-list_icon,
/*  4. text ................. */  .icon-list_text;