{"_id":"584f26bca4a2541900818d02","parentDoc":null,"user":"55a6caa022cfa321008e01d6","category":{"_id":"560b13cbafa0990d00979545","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","pages":["560b13f987b71d0d000d3bf6","560b394aaf40a70d003df31e","560b39669c7be70d00100bef","560b397d4a1f990d00dc7338","560b3991c341310d00de29de","560b39ae4a1f990d00dc733a","562ffd364445ae1900383e84","5642a810cc9d8e0d00adda69","5660daef89e82f0d008f6823","56a1e0b42255370d00ad5e9c"],"__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-29T22:42:19.181Z","from_sync":false,"order":13,"slug":"css-javascript-design-resources","title":"CSS and Design Assets"},"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"55a6e72e8cc73e0d00096635","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-12-12T22:37:48.309Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"[block:html]\n{\n  \"html\": \"<head>\\n<title>Using and Updating Icons</title>\\n<meta name=\\\"description=\\\" content=\\\"How to call individual icons from the theme's combined SVG sprite, and how to update that SVG collection using the 'grunt svgstore' command.\\\">\\n</head>\"\n}\n[/block]\nThis page shows how to call icons from a theme's collection of icons, and how to update the collection with new icons. It covers:\n\n* [Installing Grunt](#grunt)\n* [Calling Theme Icons](#call)\n* [Adding New Icons](#add)\n* [Video Demo](#video)\n\n## <span id=\"grunt\"> Installing Grunt </a>\n\nSome 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:\n\nFirst, make sure you have Grunt installed globally on your machine:\n\n```\nnpm install -g grunt-cli\n```\n[block:html]\n{\n  \"html\": \"<!-- Does next command need to be run from a specific path? -->\"\n}\n[/block]\nThen, from your theme's root directory, run:\n\n```\nnpm install\n```\n\n## <span id=\"call\"> Calling Theme Icons </span>\n\nA Stencil theme's icons are delivered via a single SVG sprite, which is embedded on the page in \n`<theme-name>templates/layout/base.html`. This sprite is generated via the Grunt task `grunt svgstore`.\n\nThe task takes individual SVG files for each icon (in the theme's `assets/icons/` subdirectory) and bundles\nthem together, to be inlined on the top of the theme, inside a Handlebars partial.\n\nYou can then call each icon in a similar way to an inline image, via:\n\n```\n<svg><use xlink:href=\"#icon-svgFileName\" /></svg>\n```\n\nThe ID of each SVG icon you call is based on the filename of the icon you want, with `icon-` prepended. \nFor example: \n\n```\nxlink:href=\"#icon-facebook\"\n```\n\n## <span id=\"add\"> Adding New Icons </span>\n\nSimply add your new icon SVG file to the `assets/icons/` folder. Then, from your theme's root directory, run `grunt svgstore` or just `grunt`.\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"video\\\"></a> Video Demo </h2>\\n\\nWatch a video demonstration of installing Grunt and using it to update your theme's SVG sprite with custom icons: <br><p></p>\\n\\n<iframe src=\\\"https://www.youtube.com/embed/HXpayijDENM?ecver=2\\\" width=\\\"560\\\" height=\\\"315\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]","excerpt":"","slug":"updating-icons","type":"basic","title":"Using and Updating Icons"}

Using and Updating Icons


[block:html] { "html": "<head>\n<title>Using and Updating Icons</title>\n<meta name=\"description=\" content=\"How to call individual icons from the theme's combined SVG sprite, and how to update that SVG collection using the 'grunt svgstore' command.\">\n</head>" } [/block] This page shows how to call icons from a theme's collection of icons, and how to update the collection with new icons. It covers: * [Installing Grunt](#grunt) * [Calling Theme Icons](#call) * [Adding New Icons](#add) * [Video Demo](#video) ## <span id="grunt"> Installing Grunt </a> 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 ``` [block:html] { "html": "<!-- Does next command need to be run from a specific path? -->" } [/block] Then, from your theme's root directory, run: ``` npm install ``` ## <span id="call"> Calling Theme Icons </span> 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" ``` ## <span id="add"> Adding New Icons </span> 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`. [block:html] { "html": "<h2> <a name=\"video\"></a> Video Demo </h2>\n\nWatch a video demonstration of installing Grunt and using it to update your theme's SVG sprite with custom icons: <br><p></p>\n\n<iframe src=\"https://www.youtube.com/embed/HXpayijDENM?ecver=2\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>" } [/block]