Pattern Library

<svg style="display: none;">
    <symbol id="close" viewBox="0 0 24 24">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
        <path d="M0 0h24v24H0z" fill="none"></path>
    </symbol>

    <symbol id="cancel" viewBox="0 0 11 12">
        <rect transform="rotate(45 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
        <rect transform="rotate(135 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
    </symbol>

    <symbol id="chevron-down" viewBox="0 0 23 14">
        <path d="M.893 1.5L11.5 12.107 22.107 1.5" stroke="currentColor" stroke-width="2" fill="none" vector-effect="non-scaling-stroke"  />
    </symbol>

    <symbol id="checkmark" viewBox="0 0 12 10">
        <path d="M1 4.364l3.536 3.535 6.363-6.363" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
    </symbol>
</svg>
{# Show available icons, in pattern library view only #}
{% if is_pattern_library %}
<template>
    {% include "patterns/atoms/icons/icon.html" with name="__icon__" %}
</template>
<script>
    const template = document.currentScript.previousElementSibling;
    const symbols = [...template.previousElementSibling.querySelectorAll('symbol')];
    const list = document.createElement('ul');
    list.innerHTML = symbols.map(el => `<li>${el.id}&nbsp;${template.innerHTML.replace(/__icon__/g, el.id)}</li>`).join('');
    document.body.appendChild(list);
</script>
{% endif %}