Inline SVG icons
Copying icons to your project
1. Copy SVG icons to your project
Copy the contents of the folder named icons which contains the SVG icons 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/icons/
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. Make SVG icons inline
The SVGs can be used inline simply by changing the file extension. So depending on your templating language, you can rename the .svg to be .html or .hbs etc. and then use the file as an includes/partials.
The gulp task gulp-rename is useful for this scenario.
The UI Toolkit will be continuously updated, therefore it is highly recommended to use a task runner to copy files over rather than manually.
Add icons to the UI Toolkit
To add a new icon to the UI Toolkit, drop the new icon in the src icons folder. Full file path is:
path/to/node_modules/@pod-point/pod-point-ui-toolkit/src/assets/img/icons/
Recompile by running gulp