@timbeard/grid-spriter

GridSpriter

A mixin to help using svg sprites.

Installation

npm i -D @timbeard/grid-spriter

Constructor

@include GridSpriter($name, $col, $row, $params);

Parameter	Type	Is required	Default	Description
$name	string	✔		The name of your sprite set
$col	number	✔		The number of columns in your sprite grid
$row	number	✔		The number of rows in your sprite grid
$params	map		()	A map of optional parameters.

Optional parameters

Parameter	Type	Default	Description
path	string	'/assets/images/sprites/'	The base path to your sprite image
format	string	'svg'	The extension of your sprite image
def	map	null	A map with icon indexes as keys and icon names as values
modes	list	['is', 'prepend', 'append']	The modes for which to generate class definitions
type	string	'mask'	The type of images to use

Output

// Generated classes will look like this
// .#{$mode}-#{$name}-#{$id}-icon[-mask][::before|::after] {}

// For example if you used the mixin like so
$twitchParams: (
  def: (1: 'follow'),
  modes: ['is', 'append']
);

@include grid-spriter.sprite('twitch', 3, 2, $twitchParams);

// The resulting classes would look like this
.is-twitch-follow-icon-mask {}
.append-twitch-follow-icon-mask::after {}

Usage

Any element or pseudo-element containing a sprite image must have a set width and height. Any pseudo-element containing a sprite image must have a set content. An empty string will do. Any element or pseudo-element containing a sprite image as a mask must have a set background or background-color.

The default path for images is /assets/images/sprites/, the default format is svg. In our example, the image must be located at /assets/images/sprites/twitch.svg.

@use '@timbeard/grid-spriter';

$twitchParams: (
    def: (0: 'follow', 1: 'sub'),
    modes: ['is', 'prepend']
);

@include grid-spriter.sprite('twitch', 3, 2, $twitchParams);

// Twitch follow icon as background image
// The class can be anything as long as its target element also has a GridSpriter generated class
.is-twitch-follow-icon {
    width: 64px;
    height: 64px;
}

// Twitch sub icon as a before pseudo-element with mask image
.prepend-twitch-sub-icon-mask::before {
    content: '';
    display: inline-block;
    width: 64px;
    height: 64px;
    background-color: #6441A5;
}

<!-- twitch follow icon as background image -->
<div class="is-twitch-follow-icon"></div>

<!-- twitch follow icon as mask image -->
<div class="is-twitch-follow-icon-mask"></div>

<!-- twitch follow icon as a before pseudo-element with background image -->
<div class="prepend-twitch-follow-icon"></div>