From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Display Grunticon SVG icons in HTML documents

Display Grunticon SVG icons in HTML documents

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Display Grunticon SVG icons in HTML documents

“

- [Voiceover] In the previous movie, I used Grunt to generate new Grunticons from the command line and I extended the functionality of these Grunticons so that we can get inline SVGs in our document on the fly. The resulting style sheets and other materials are found in the exercise files for this movie, 05_05, under icons, socialmedia, and the folder SVG. Now I need to add these icons into my project so we can style them and work with them using CSS. All this is made possible thanks to the enhanceSVG function that came with version 2.0 of Grunticon. The documentation page explains exactly what needs to happen to get all this to work together. In the previous movie, we setup the option enhanceSVG: true in the grunticon process itself, so we've already output the code that's necessary. Now what's different between this code and what we got from Grunticon is the addition of this attribute here, grunticon.svgLoadedCallback. And also the use of the data-grunticon-embed attributes on the…

Contents