A set of SCSS mixins to help with easy use of svg background images as icons in stylesheets. Requires the postcss-svgicon plugin.
Just import the icon-helpers.scss
file into your project.
The icon mixins allow for simple and readable addition of icons via scss code.
Icons can be referred to by name, and are automatically injected into the stylesheet in an optimally efficient matter, using the Svgicon Postcss task.
- The postcss-svgicon plugin
- Adds an icon in a before psuedo element, as minified svg code in a data uri.
- Sets sensible defaults for size, position, base color, etc.
- Extends a core set of styles which all these icons require.
- Same as
icon
, but sets no defaults, and only results in css related to the specified options. - Use this to add states to an icon already defined with
icon
.
- Hides an icon
The mixins icon
and icon-state
take the following parameters:
$icon
: The name of the icon, as provided by the postcss-svgicon plugin$size
: The x y size- e.g. 20px
- or 5em 2em
$color
: A space-separated list of colors: base, hover/focus, and active.$position
: The x y position- e.g. center center
- or 0 100%
$selector
: Use this for simpler syntax when the icon is nested deep within the hover parent. See above examples.
If you just need a simple icon without hover states:
.parent {
@include icon(
$icon: tick,
$color: black
);
}
If you need hover states, and .parent
is the hover target:
.parent {
@include icon(
$icon: tick,
$color: black green purple
);
}
If you need hover states, but .parent
is within the hover target:
.a {
@include icon(
$icon: plus,
$color: black orange,
$selector: '.parent'
);
.parent {
// Other styles
}
}
This could also be achieved like so, but the above allows for brevity and legibility.
.a {
.parant {
// NOTE: 'icon' adds boilerplate needed by a new icon.
@include icon(
$icon: plus,
$color: black
);
}
&:hover,
&:focus {
.parent {
// NOTE: 'icon-state' adds just the required styles with no boilerplate
@include icon-state(
$icon: minus,
$color: black
);
}
}
}
Further any custom properties for the before element can be passed in a block after the mixin.
.parant {
@include icon(
$icon: cross,
$color: tomato,
$position: 5px 11px
) {
transform: scale(0.5);
transform-origin: 5px 11px;
};
&:hover,
&:focus {
@include icon-state(
$icon: tick,
$color: skyblue
) {
transform: scale(1);
}
}
}