1. Copy image files to your project

Copy the contents of the folder named css-bg which contains the CSS background images used in the UI Toolkit.

The dist folder contains minified SVGs. Full file path is:

path/to/node_modules/@pod-point/pod-point-ui-toolkit/dist/assets/img/css-bg/

The UI Toolkit will be continuously updated, therefore it is highly recommended to use a task runner to copy files over rather than manually.

2. Relink in the CSS

There is a Sass variable in the file 1-settings/_settings.global.scss which sets the file path to the background images:

$css-bg-path: '../img/css-bg/';

If your folder structure is different, you can reassign this variable after importing the settings SCSS files. See how to import the SCSS files here

To add a new background image to the UI Toolkit, drop the new icon in the src css-bg folder. Full file path is:

path/to/node_modules/@pod-point/pod-point-ui-toolkit/src/assets/img/css-bg/

Recompile by running gulp

The background images don't have to be SVGs but if they are, they will be minified before compiling to the dist folder