Custom icons

Overview (anchor)

A Sass utility is provided to enable compiling custom SVG icons as CSS variable tokens and (optional) utility classes as follows:

:where(html) {
  --house: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>");
}
.house {
  --svg: var(--house);
}

The icon variables can be used in custom styles and the variable token and class can be used with the icon utilities.

Adding icons (anchor)

The method for adding new icons is the same for modules and framework options and can be used completely independently simply to compile SVG as variable tokens if required.

The following template is included with the source code:

$template: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d=''/></svg>");

1. Copy the template to a custom Sass document and rename it as required.
2. Open your SVG in a text editor, copy the path values into the blank path in the template (including multiple paths and/or path attributes if required).
3. Change the viewBox values to match those of your SVG.

$home: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>");

Include the new icon(s) for compiling in the $custom-icon-values:(); utility map as follows:

@use "stylemods/scss" as *;
$home: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>");
$custom-icon-values: ( 
  "home": $home,
);

You can include the variable tokens and utility classes using a single mixin:

@use "stylemods/scss" as *;
@use "icons" as *;
@include custom-icons-css;

Or the variables and classes individually:

@use "stylemods/scss" as *;
@use "icons" as *;
@include custom-icon-variables-css;
@include custom-icon-classes-css;

You can also include the icons within the same document if preferred:

@use "stylemods/scss" as *;
$home: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>");
$custom-icon-values: ( 
  "home": $home,
);
@include custom-icons-css;

You can also use the utility to compile the system icon variables:

@use "stylemods/scss" as *;
$custom-icon-values: ( 
  "house": $house-svg,
  "email": $email-svg,
  "user": $user-svg,
);
@include custom-icons-css;

Token style (anchor)

The variable tokens are include by default using a :where(html) pseudo-class style that can be customized to use :root or another selector if preferred:

@use "stylemods/scss" as *;
$custom-icon-tokens: ':root';
@include custom-icons-css;

You can also include the variables only without the style in your own style:

@use "stylemods/scss" as *;
:root {
  @include custom-icon-variables;
}

Source code (anchor)

// ---------------------------------------------------------- 
// Custom icons
// ----------------------------------------------------------
// $template: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d=''/></svg>");
$custom-icon-tokens:  ':where(html)' !default;
$custom-icon-values:  () !default;

@mixin custom-icon-variables {
  @each $name, $value in $custom-icon-values {
    --#{$name}: #{$value};
  }   
}

@mixin custom-icon-variables-css {
  #{$custom-icon-tokens} {
    @include custom-icon-variables;
  }
}

@mixin custom-icon-classes-css {
  @each $name, $value in $custom-icon-values {
    .#{$name} {
      --svg: var(--#{$name});        
    }
  }
}

// Grouped mixins
@mixin custom-icons-css {
  @include custom-icon-variables-css;
  @include custom-icon-classes-css;
}