$icon-size-base: 16px;
$icon-size-sm: 16px;
$icon-size-md: 32px;
$icon-size-lg: 64px;
$icon-size-xl: 128px;
$icon-size-xx: 256px;
.icon {
  display: block;
  vertical-align: middle;
  background-color: transparent;
  width: $icon-size-base;
  height: $icon-size-base;
  color: inherit;
  fill: currentColor;

  svg {
    width: 100%;
    height: 100%;
    fill: inherit;

    symbol path {
      all: inherit;
    }
  }

  &.icon-sm {
    width: $icon-size-sm;
    height: $icon-size-sm;
  }

  &.icon-md {
    width: $icon-size-md;
    height: $icon-size-md;
  }

  &.icon-lg {
    width: $icon-size-lg;
    height: $icon-size-lg;
  }

  &.icon-xl {
    width: $icon-size-xl;
    height: $icon-size-xl;
  }

  &.icon-xx {
    width: $icon-size-xx;
    height: $icon-size-xx;
  }
}