vui-icons

This component contains Sass mixins and CSS that can be used to incorporate icons into your application.

For further information on this and other VUI components, see the docs at ui.valence.d2l.com.

Installation

vui-icons can be installed from Bower:

bower install vui-icons

Or alternatively from NPM:

npm install vui-icons

Depending on which installation method you choose, use that path when doing the SASS import:

@import "bower_components/vui-icons/icons.scss";
// or... 
@import "node_modules/vui-icons/icons.scss";

Usage

There are several ways to consume the icon images. The one you choose depends on your use case.

As a background image with text

In cases where the icon is purely decorative (it doesn't provide any additional information) and is accompanied by text, applying the icon using a background image is a good approach. It hides the icon from assistive technology (like a screen reader), allowing the text to stand alone.

Examples of this might include a button or link which contain text and the icon is redundant:

<button>
    <span class="vui-icon-bookmark" />
    Bookmark
</button>
<a>
    <span class="vui-icon-print" />
    Print
</a>

To make these CSS classes available, make sure you bundle the icons.css file (from the Bower/NPM package) with your application's CSS. The full list of available vui-icon-* class names is listed below.

As a background image with off-screen text

If you would prefer the text accompanying the icon to be invisible, the background image approach can be combined with off-screen text. The text will be positioned outside of the visible screen area using CSS, essentially hiding it for everyone except those using assistive devices.

To position something off-screen, you can either use the vui-offscreen component, or follow WebAIM's text-indent technique.

For example, a button or link which contains only an icon:

<button title="Bookmark">
    <span class="vui-icon-bookmark" />
    <span class="vui-offscreen">Bookmark</span>
</button>
<a title="Print">
    <span class="vui-icon-print" />
    <span class="vui-offscreen">Print</span>
</a>

We've used the title attribute in this example so that tooltips will appear on-hover.

Directly as an image element

Another way to consume the icons is by simply pointing a HTML <img> element's src attribute directly at the icon file. In both the Bower and NPM packages, all the icon files can be found in the images directory.

HTML:

<img src="/images/actions/subscribe.svg" alt="subscribed" />

Don't forget to provide alternate text if the icon isn't accompanied by any other text.

Available Icons

Name	CSS Class	Filename
Bookmark	`vui-icon-bookmark`	`/images/actions/bookmark.png`
Browse	`vui-icon-browse`	`/images/actions/browse.png`
Copy	`vui-icon-copy`	`/images/actions/copy.png`
Create	`vui-icon-create`	`/images/actions/create.png`
Delete	`vui-icon-delete`	`/images/actions/delete.png`
Download	`vui-icon-download`	`/images/actions/download.png`
Edit (Bulk)	`vui-icon-edit-bulk.`	`/images/actions/edit-bulk..png`
Edit	`vui-icon-edit`	`/images/actions/edit.png`
Help	`vui-icon-help`	`/images/actions/help.svg`
Link	`vui-icon-link`	`/images/actions/link.png`
Preview	`vui-icon-preview`	`/images/actions/preview.png`
Print	`vui-icon-print`	`/images/actions/print.svg`
Remove	`vui-icon-remove`	`/images/actions/remove.png`
Reorder	`vui-icon-reorder`	`/images/actions/reorder.png`
Search	`vui-icon-search`	`/images/actions/search.png`
Share	`vui-icon-share`	`/images/actions/share.png`
Sliders	`vui-icon-sliders`	`/images/actions/sliders.svg`
Subscribe	`vui-icon-subscribe`	`/images/actions/subscribe.svg`
Tag	`vui-icon-tag`	`/images/actions/tag.png`
Upload	`vui-icon-upload`	`/images/actions/upload.png`