Icons

Overview

We use SVG icons wrapped in Vue components in Tui. The icons are defined as SVG files named according to appearance (e.g. chevron-left), which are then wrapped in a Vue component with a semantic name (e.g. BackArrow).

The SVG files are automatically optimised with SVGO as part of the build process, and pass through a webpack loader that converts them to a form that can be understood by JavaScript.

Usage

Icons can be imported and used like so:

<template>
  <div>
    <BackArrowIcon />
  </div>
</template>

<script>
import BackArrowIcon from 'tui/components/icons/BackArrow';

export default {
  components: { BackArrowIcon },
};
</script>

If the icon does not have a built-in colour, so it will be taken from the current text colour.

Icons default to a size of "200" (=16px). You can pass a different value to the size prop in order to get a differently sized icon (100 to 700, in increments of 100), or null to size it with the text. You should also pass an "alt" attribute to the icon where it is needed for accessibility.

For icons defined in Tui, you can see a list of them all on the Tui samples page under icons/Common.

Defining a new icon in a plugin

First you'll need an SVG file. It needs to be placed under icons/internal/obj in order to work. If adding a custom SVG file make sure fill and stroke are set to 'currentColor' so it gets the right colour when using it.

Icon wrappers should go in client/component/my_plugin/src/components/icons/ and be named according to their semantic meaning, not appearance (e.g. Delete.js, not TrashBin.js).

Create a file like so:

Add.js

// import an svg from bootstrap-icons in tui
import icon from '../../../tui/src/icons/internal/obj/bootstrap-icons/plus.svg';
// or one in your plugin
import icon from './internal/obj/bootstrap-icons/plus.svg';
import { createIconComponent } from 'tui/lib/svg_icon';

export default createIconComponent(icon);

Defining a new icon in Tui

First you'll need an SVG file. It needs to be placed under icons/internal/obj in order to work. There are a lot under bootstrap-icons, and Totara original icons should be placed in the totara folder. If adding a custom SVG file make sure fill and stroke are set to 'currentColor' so it gets the right colour when using it.

Icon wrappers should go in client/component/tui/src/components/icons/ and be named according to their semantic meaning, not appearance (e.g. Delete.js, not TrashBin.js).

Create a file like so:

Add.js

import icon from './internal/obj/bootstrap-icons/plus.svg';
import { createIconComponent } from 'tui/lib/svg_icon';

export default createIconComponent(icon);