Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Using and Updating Icons

Installing Grunt

Some of a Stencil theme’s static assets are handled with the Grunt JavaScript automator, where required. This means that you have some dependencies on both Grunt and npm. To get started:

First, make sure you have Grunt installed globally on your machine:

npm install -g grunt-cli

Then, from your theme’s root directory, run:

npm install


Calling Theme Icons

A Stencil theme’s icons are delivered via a single SVG sprite, which is embedded on the page in <theme-name>templates/layout/base.html. This sprite is generated via the Grunt task grunt svgstore.

The task takes individual SVG files for each icon (in the theme’s assets/icons/ subdirectory) and bundles them together, to be inlined on the top of the theme, inside a Handlebars partial.

You can then call each icon in a similar way to an inline image, via:

<svg><use xlink:href="#icon-svgFileName" /></svg>

The ID of each SVG icon you call is based on the filename of the icon you want, with icon- prepended. For example:

xlink:href="#icon-facebook"


Adding New Icons

Simply add your new icon SVG file to the assets/icons/folder. Then, from your theme’s root directory, run grunt svgstore or just grunt.


Video Demo

Watch a video demonstration of installing Grunt and using it to update your theme’s SVG sprite with custom icons: