Page Comparison

...

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

...

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:

// 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);

...

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:

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

export default createIconComponent(icon);

...

We have used a web application called icomoon to create our fonts from SVG icons. The sources can can be found in server/theme/base/fonts/roots_font.json.zip (for the deprecated Roots/Basis theme stack) and server/theme/base/fonts/tfont.json.zip (for the newer Legacy/Ventura) theme stack. Once icons have been added and the font is regenerated, add the outputted font files into the server/theme/base/fonts directory (renaming as necessary) and the resulting SCSS files in the appropriate server/theme/base/scss/icons directory (additional naming changes may need to be done in style.scss).

Custom theme updates

Any custom themes using the following line of code will need to remove it, otherwise icons will not load. Instructions This potentially includes any custom theme that was based on Roots or Basis:

$THEME->parents_exclude_sheets = array(
    'base' => array('flexible-icons'), // Delete this line
);

You can find instructions on how to use the font icons can be found at in the Flexible Icons API documentation.

Tips and known limitations

...