Version: v0.8.0 - Beta.  We welcome contributors & feedback.

Icons

THT comes with a set of essential icons in SVG format.

Because they are SVG, they inherit all text styles (size, color, etc.).

Each icon is only about 50 bytes. They are inlined, so they don't trigger any extra network requests.

Example:

tem cancelHtml {
    <div style="color: red">
        {{ Web.icon('cancel') }} Cancel
    </div>
}

Icons

arrowLeft
arrowRight
arrowUp
arrowDown
chevronLeft
chevronRight
chevronUp
chevronDown
wideChevronLeft
wideChevronRight
wideChevronUp
wideChevronDown
caretLeft
caretRight
caretUp
caretDown
menu
plus
minus
cancel
check
home
download
upload
search
lock
heart
star
gear

Stylesheet

If you are not using the Basic CSS Framework, you need to include this in your CSS:

.ticon {
    display: inline-block;
    position: relative;
    height: 1em;
    width: 1em;
    top: 0.15em;
    fill: currentColor;
}

.ticon * {
    stroke: currentColor;
    stroke-width: 15;
    fill: none;
}

.ticon .svgfill {
    stroke: none;
    fill: currentColor;
}

Styling Icons

You can set the style of icons, including line thickness, using regular CSS:

.ticon.ticon-caretRight * {
    color: red;
    stroke-width: 10;
}

See Also