.svg-icon {
  svg {
    width: 2.222vh;
    height: 2.222vh;
    use {
      fill: #fff;
    }
  }

  &.svg-icon-sm {
    line-height: 0;
    width: 1.481vh;
    height: 1.481vh;
    svg {
      width: 1.481vh;
      height: 1.481vh;
    }
  }

  &.svg-icon-md {
    line-height: 0;
    width: 2.222vh;
    height: 2.222vh;
    svg {
      width: 2.222vh;
      height: 2.222vh;
    }
  }

  &.svg-icon-lg {
    line-height: 0;
    width: 3.333vh;
    height: 3.333vh;
    svg {
      width: 3.333vh;
      height: 3.333vh;
    }
  }

  &.svg-icon-llg {
    line-height: 0;
    width: 4.444vh;
    height: 4.444vh;
    svg {
      width: 4.444vh;
      height: 4.444vh;
    }
  }

  &.svg-icon-gray {
    svg {
      use {
        fill: @gray;
      }
    }
  }
  &.svg-icon-gray-l {
    svg {
      use {
        fill: @gray-l;
      }
    }
  }
  &.svg-icon-green {
    svg {
      use {
        fill: @green;
      }
    }
  }
  &.svg-icon-red {
    svg {
      use {
        fill: @red;
      }
    }
  }
  &.svg-icon-blue {
    svg {
      use {
        fill: @darkBlue;
      }
    }
  }
  &.svg-icon-darkblue {
    svg {
      use {
        fill: @darkBlue2;
      }
    }
  }

  &.svg-icon-yellow {
    svg {
      use {
        fill: @yellow;
      }
    }
  }

  &.svg-icon-orange {
    svg {
      use {
        fill: @orange;
      }
    }
  }

  &.svg-icon-purple {
    svg {
      use {
        fill: @purple;
      }
    }
  }

  &.svg-icon-write {
    svg {
      use {
        fill: @write;
      }
    }
  }

  &.svg-icon-black {
    svg {
      use {
        fill: @black;
      }
    }
  }
  &.svg-icon-pink {
    svg {
      use {
        fill: @pink;
      }
    }
  }

  &.svg-icon-red {
    svg {
      use {
        fill: @red;
      }
    }
  }
}