<svg class="n7-icon inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
    <use href="../../icons.svg#mini--chevron-right" />
</svg>
<svg
  class="n7-icon inline-block align-middle {% if type === 'fill' %}fill-current{% else %}stroke-current{% endif %}{% if size %} {{ size }}{% endif %}{% if classes %} {{ classes }}{% endif %}"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="{{ '/icons.svg' | path }}#{{ id }}" />
</svg>
{
  "id": "mini--chevron-right",
  "size": "w-8 h-8",
  "type": "fill"
}

SVG icon component configurations.

  • type: fill - add class for svg current color management, on fill or on stroke - default is stroke, component setting default is fill
  • classes: value - when you need extra classes - for style overriding etc
  • id: value - id of icon
  • size: value - svg icon size classes