Icon
Monochrome SVG-based icons.
Basic Example
This is how a basic .icon looks like and how you write the markup:
<!-- example -->
<img class="icon" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
Modifiers
Size
Render icons in different sizes with the modifiers .icon--small, .icon--large, .icon--xlarge:
<!-- example -->
<img class="icon icon--small" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
<img class="icon icon--large" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
<img class="icon icon--xlarge" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
Weight
Render icons in different weights with the modifiers .icon--thin and .icon--bold:
<!-- example -->
<img class="icon icon--thin" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
<img class="icon icon--bold" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
Color
Render icons in different semantic colors with the modifiers .icon--attention, .icon--positive, .icon--negative:
<!-- example -->
<img class="icon icon--attention" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
<img class="icon icon--positive" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
<img class="icon icon--negative" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
SVG and HTML
Generally speaking, there are two different ways to display SVG graphics on a web page. You may treat the SVG file like an <image> (or <object>) by using a HTML-tag with a source- (or data-) attribute:
<!-- SVG as image -->
<img class="icon" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" />
<!-- SVG as object -->
<object class="icon" type="image/svg+xml" data="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg">
The other option is writing the SVG markup inline, directly into the HTML:
<!-- inline SVG markup -->
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="none" stroke="#000000" stroke-width="2px" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
Learn more about SVG in HTML The explanaintion above is simplified. If you wish to learn more, take a look at this excellent article on css-tricks.com.
Writing the SVG markup by hand isn’t a practical solution. In most cases, you can add icons to your page by using an <image>-tag. However, in some cases the only option is the inline method because styling the SVG via CSS only really works this way. See the following section Inline-SVG Helper for a solution.
Inline-SVG Helper
If you need to embed SVG markup directly, add the attribute yoi-icon to your <img> or <object> tag. No further settings required – the tag gets replaced instantly with the actual SVG markup:
<!-- example -->
<img class="icon icon--xlarge" src="https://reimar.github.io/yoi/assets/img/icon-arrow-up.svg" yoi-icon />
List of Available Icons
| Name | Icon |
|---|---|
| icon-arrow-down |  |
| icon-arrow-left |  |
| icon-arrow-right |  |
| icon-arrow-up |  |
| icon-checkmark |  |
| icon-chevron-down |  |
| icon-chevron-left |  |
| icon-chevron-right |  |
| icon-chevron-up |  |
| icon-minus |  |
| icon-plus |  |
| icon-spyglass |  |
| icon-x |  |