magekey/grunt-sprite

Magento2 grunt sprite generation tool

, _(*1)

Magento 2 Grunt Sprite Tool

Sprite Generation for Magento 2, based on Grunt, _(*2)

Installation

1. Run composer require magekey/grunt-sprite
2. Go to package directory cd vendor/magekey/grunt-sprite
3. Run npm install
4. Run grunt setup create a convenient symlink grunt-sprite and config file grunt-sprite-config.json.sample in the project root.
5. Rename grunt-sprite-config.json.sample to grunt-sprite-config.json and define your themes

LESS Example:, _(*3)

{
  "path": {
    "sprite_mytheme": "<%= project %>/app/design/frontend/Vendor/mytheme/web"
  },
  "sprite": {
    "mytheme": {
      "src": "<%= sprite_mytheme %>/images/sprite/*.png",
      "dest": "<%= sprite_mytheme %>/images/sprite.png",
      "destCss": "<%= sprite_mytheme %>/css/source/_sprite.less"
    }
  }
}

SCSS Example:, _(*4)

{
  "path": {
    "sprite_mymodule": "<%= project %>/app/design/frontend/Vendor/mytheme"
  },
  "sprite": {
    "test_module": {
      "src": "<%= sprite_mymodule %>/MyPackage_Module/web/images/sprite/*.png",
      "dest": "<%= sprite_mymodule %>/MyPackage_Module/web/images/sprite.png",
      "destCss": "<%= sprite_mymodule %>/MyPackage_Module/web/scss/_sprite.scss",
      "cssTemplate": "<%= src %>/templates/scss.template.handlebars"
    }
  }
}

Usage

cd grunt-sprite
grunt sprite:<sprite>

Add sprites to your theme in app/design/Vendor/theme/web/css/_styles.less, _(*5)

@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel)

// Add new line to import sprites
@import 'source/_sprite.less'; // Sprites