@include c(icon) {
  display: inline-block;
  background: {
    size: 100% 100%;
    repeat: no-repeat;
    position: center center;
  }

  @each $item in map-get($c-icon, items) {
    $width: map-get($item, width);
    $height: map-get($item, height);
    $padding: map-get($item, padding);
    $icon: map-get($item, icon);
    $widths: map-get($item, widths);
    $heights: map-get($item, heights);

    @include m(#{$icon}) {
      @if ($padding) {
        @include size(
          px2rpx($width + $padding * 2),
          px2rpx($height + $padding * 2)
        );

        background: {
          size: px2rpx($width) px2rpx($height);
        }
      } @else {
        @include size(px2rpx($width), px2rpx($height));
      }

      background-image: url("#{$image-url}/components/icon/#{$icon}.png");

      @if ($widths) {
        @each $width-item in $widths {
          &.w#{calc($width-item / 1px)} {
            width: px2rpx($width-item);
          }
        }
      }

      @if ($heights) {
        @each $height-item in $heights {
          &.h#{calc($height-item / 1px)} {
            height: px2rpx($height-item);
          }
        }
      }
    }
  }
}