ditmer-embla-icons
v3.0.4
Published
Ditmer embla icons
Downloads
577
Readme
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>