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

...