ditmer-embla-icons v3.0.4

ditmer-embla

Getting Started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install ditmer-embla-icons --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('ditmer-embla-icons');

The "ditmer_embla" task

Overview

In your project's Gruntfile, add a section named ditmer_embla_icons to the grunt configuration.

grunt.initConfig({
    "ditmer_embla_icons": {
        dist: {
            iconsOutputPath: path.resolve(__dirname, "dist/icons"),
            illustrationsOutputPath: path.resolve(__dirname, "dist/illustrations"),
        }
    }
});

Using the plugin

Importing Embla styles into your sites .scss file

If you're already using .scss files, it's recommended to simply import the embla.scss file from your node_modules like this: @import "ditmer-embla/lib/scss/embla". To override variables you have to place them above the line where you import the Embla .scss file, like this:

//Import the embla icons scss here:
@import "ditmer-embla-icons/lib/scss/embla-icons";

//Place your sites styling below here

You display an illustration like this (make sure to replace /dist/icons/ with the one you configured in you grunt task):

<svg class="embla-icon" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="/dist/icons/sprite.symbol.svg#activity"></use>
</svg>

You display an illustration like this (make sure to replace /dist/illustrations/ with the one you configured in you grunt task):

<svg class="embla-illustration" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="/dist/illustrations/sprite.symbol.svg#accumulator"></use>
</svg>