Custom icons

Convert custom or existing library SVG icons to StyleMods variable tokens for compiling.

Overview (anchor)

The custom-icon-values map can be used to include custom icons for compiling created by replicating the method used for the StyleMods icons, a blank template is even provided specifically for this purpose that can be used as follows:

Change the template viewBox values to match those of your SVG.
Add the SVG path values to the empty <path d=''/> provided.
Add more paths as needed for your SVG.
Include any path attributes if required.

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

Include any new icons using the custom-icon-values maps as follows:

custom.scss

@use "stylemods/scss" as *;
$logo: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='--add-path-here--'/></svg>");
$custom-icon-values: ( 
  "logo": $logo,
);
@include custom-icons-css;

If preferred you can include the variables and maps in external document:

custom.scss

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

You can also use the custom-icons-values map to include any of the default or brand icons included with the SVG icons allowing you to include individual system icons without having to override the default maps.

Pseudo-class 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:

custom.scss

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

The variables themselves can also be included as variable tokens only so you can include them in your preferred wrapper style with any other CSS variable tokens included with your styles.

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include custom-icon-variables;
}

Source code (anchor)

custom-icons.scss

// ---------------------------------------------------------- 
// 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;
}