Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars and Stencil
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: