.icon {
  width: 29px;
  height: 29px;
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  font-style: normal;
  position: relative;
  display: inline-block;
  &.icon-back {
    width: 12px;
    height: 20px;
    background-image: data-uri("../icon/back.svg");
  }
  &.icon-forward {
    width: 12px;
    height: 20px;
    background-image: data-uri("../icon/forward.svg");
  }
  &.icon-bars {
    width: 25px;
    height: 20px;
    background-image: data-uri("../icon/bars.svg");
    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2ddpx) {
      height: 13px;
      background-image: data-uri("../icon/bars@2x.svg");
    }
  }
  &.icon-next {
    width: 15px;
    height: 15px;
    background-image: data-uri("../icon/next.svg");
  }
  &.icon-prev {
    width: 15px;
    height: 15px;
    background-image: data-uri("../icon/prev.svg");
  }
  &.icon-plus {
    width: 20px;
    height: 20px;
    font-size: 0;
    background-image: data-uri("../icon/plus.svg");
  }
}