Usage

Begin by importing the icons and mixins files from the abstracts directory. This file contains all the predefined mixins required for consistent typography styling.

@use '@circutor/ui/abstracts/cds-mixins' as mixins;
@use '@circutor/ui/abstracts/cds-icons' as icons;

Once imported, you can include the mixin in your SCSS files using the @include directive and using the icons namespace as a parameter of the mixin. This allows you to apply predefined icons to your components effortlessly.

.my-class {
  @include mixins.cds-icon(icons.$cds-ph-spinner-s);
}

Additionally, there are other mixins available to define the size of the icon using the icon-size tokens. These size mixins should always be applied within a :before pseudo-class to ensure correct styling and separation from the main icon.

.my-class {
  @include mixins.cds-icon(icons.$cds-ph-spinner-s);
  &:before {
    @include mixins.cds-icon-size(vars.$cds-icon-150);
  }
}

In this case, the cds-icon-size mixin allows you to apply predefined sizes based on the available icon-size tokens.