OffHealth component library

Svgs 

<div class="flex gap-6 p-4 flex-wrap">

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#chevron-right" />
        </svg>

        <div>
            <p>Chevron right</p>
            <p class="text-sm">id: <strong>chevron-right</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#chevron-left" />
        </svg>

        <div>
            <p>Chevron left</p>
            <p class="text-sm">id: <strong>chevron-left</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#spinner" />
        </svg>

        <div>
            <p>Spinner</p>
            <p class="text-sm">id: <strong>spinner</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#pencil-square" />
        </svg>

        <div>
            <p>Pencil square</p>
            <p class="text-sm">id: <strong>pencil-square</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#x-mark" />
        </svg>

        <div>
            <p>X mark</p>
            <p class="text-sm">id: <strong>x-mark</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#information-circle" />
        </svg>

        <div>
            <p>Information circle</p>
            <p class="text-sm">id: <strong>information-circle</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#arrow-up-right" />
        </svg>

        <div>
            <p>Arrow up right</p>
            <p class="text-sm">id: <strong>arrow-up-right</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#arrow-small-right" />
        </svg>

        <div>
            <p>Arrow small right</p>
            <p class="text-sm">id: <strong>arrow-small-right</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#arrow-small-left" />
        </svg>

        <div>
            <p>Arrow small left</p>
            <p class="text-sm">id: <strong>arrow-small-left</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#home" />
        </svg>

        <div>
            <p>Home</p>
            <p class="text-sm">id: <strong>home</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#minus" />
        </svg>

        <div>
            <p>Minus</p>
            <p class="text-sm">id: <strong>minus</strong></p>
        </div>
    </div>

    <div class="flex items-center gap-4 p-6 border">
        <svg class="inline-block align-middle fill-current w-4 h-4" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#plus" />
        </svg>

        <div>
            <p>Plus</p>
            <p class="text-sm">id: <strong>plus</strong></p>
        </div>
    </div>

</div>
 
<div class="flex gap-6 p-4 flex-wrap">
  {% for svg in svgs %}
  <div class="flex items-center gap-4 p-6 border">
    {% render '@icon--small', { id: svg.id }, true %}
    <div>
      <p>{{ svg.icon }}</p>
      <p class="text-sm">id: <strong>{{ svg.id }}</strong></p>
    </div>
  </div>
  {% endfor %}
</div>
 
{
  "svgs": [
    {
      "icon": "Chevron right",
      "id": "chevron-right"
    },
    {
      "icon": "Chevron left",
      "id": "chevron-left"
    },
    {
      "icon": "Spinner",
      "id": "spinner"
    },
    {
      "icon": "Pencil square",
      "id": "pencil-square"
    },
    {
      "icon": "X mark",
      "id": "x-mark"
    },
    {
      "icon": "Information circle",
      "id": "information-circle"
    },
    {
      "icon": "Arrow up right",
      "id": "arrow-up-right"
    },
    {
      "icon": "Arrow small right",
      "id": "arrow-small-right"
    },
    {
      "icon": "Arrow small left",
      "id": "arrow-small-left"
    },
    {
      "icon": "Home",
      "id": "home"
    },
    {
      "icon": "Minus",
      "id": "minus"
    },
    {
      "icon": "Plus",
      "id": "plus"
    }
  ]
}

Svg icons set. Add single svg icon in directory public/svgs and run script npm run build-svg-sprite This create svg sprite used in the system