emii.gay/_includes/icon.html

26 lines
1 KiB
HTML
Raw Normal View History

2021-11-08 21:58:58 +00:00
{% comment %}
Displays an inline icon from an svg. The icon must be an asset in the :/assets/images/icon/ directory of the project. The icon should be viewboxed to be 24x24px, and will be inserted into the page and take on the color of the text/element it occupies. Keep track of the icon's filename in the repository. This value should be present in two places.
1. The icon's name should also be an id applied to the main SVG element of the icon.
2. The icon's name should be passed using the name argument of the include.
Neither of these values should include the .svg extension.
Alt text support is included.
Arguments:
size: The width and height the icon should have on the page
alt: Alt text to make available to screenreaders
name: See above.
{% endcomment %}
<svg
height="{{size}}"
width="{{size}}"
viewBox="0 0 24 24"
aria-labelledby="{{alt}}">
<title id="{{alt}}">{{alt}}</title>
<use xlink:href={{name | prepend: "/static/icon/" | prepend: site.base_url | append: ".svg#"| append: name}} />
</svg>