30 lines
900 B
JavaScript
30 lines
900 B
JavaScript
/*
|
|
create custom element classes from svg files
|
|
example:
|
|
|
|
class icon_arrow_up extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML = `<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.9383 10L23.7001 18.9614C23.916 19.2016 23.9084 19.5731 23.6828 19.8038C23.4573 20.0344 23.0941 20.0422 22.8593 19.8214L14.9383 11.72L7.01742 19.8214C6.86685 19.9754 6.6474 20.0356 6.44173 19.9792C6.23605 19.9228 6.0754 19.7585 6.02029 19.5482C5.96518 19.3378 6.02398 19.1134 6.17455 18.9594L14.9383 10Z"
|
|
/>
|
|
</svg>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('it-icon-arrow-up', icon_arrow_up);
|
|
*/
|
|
|
|
|
|
{% for svg_icon in svg_files %}
|
|
|
|
class {{ svg_icon.classname }} extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML = `{{ svg_icon.content|safe }}`;
|
|
}
|
|
}
|
|
|
|
customElements.define('{{ svg_icon.elementname }}', {{ svg_icon.classname }});
|
|
|
|
{% endfor %}
|