This library uses a SVG image sprite to display icons. The sprite is automatically created from a folder of single SVG icons ./src/icons
. Accompanying the sprite the build-system also creates a SCSS file that will properly size the icons when used in HTML and create icon mixins to use them in the stylesheets. The SCSS file is placed in ./src/sass/base/_sprite.scss
To render a icon inside HTML use the following markup:
<i class="i i-<icon name>"></i>
By convention a <i>
element is used as it does not have any semantic meaning.
To use a icon in Sass:
// This element should look like an icon
.myIconElement
+i-<icon name> // Get the icon size and position
+i // Apply general icon styles
In addition to the icons and the icon mixins there are some Sass helper mixins and functions in place to get icon sizes and positions without having to hard-code values. See: ./src/sass/lib/mixins/_icons.sass
and ./src/sass/lib/functions/_icons.sass
.