$icon-size-xs: 14px !default;
$icon-size-sm: 18px !default;
$icon-size-md: 24px !default;
$icon-size-lg: 32px !default;
$icon-size-xl: 42px !default;

@mixin icon-size($name, $size) {
  &--#{$name} & {
    &__svg {
      width: $size;
      height: $size;
    }
  }
}

.jds-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;

  @include icon-size(xs, $icon-size-xs);
  @include icon-size(sm, $icon-size-sm);
  @include icon-size(md, $icon-size-md);
  @include icon-size(lg, $icon-size-lg);
  @include icon-size(xl, $icon-size-xl);

  &__svg {
    transform-origin: center;
  }
}