@arco-design/web-vue/es/style/icon.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './theme/index.less';

.@{prefix}-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  font-style: normal;
  vertical-align: -2px;
  outline: none;
  stroke: currentColor;
}

.@{prefix}-icon-loading,
.@{prefix}-icon-spin {
  animation: ~'@{prefix}-loading-circle' @transition-duration-loading infinite @transition-timing-function-linear;
}

@keyframes ~'@{prefix}-loading-circle' {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.@{prefix}-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;

  .@{prefix}-icon {
    position: relative;
  }

  &::before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    background-color: @color-transparent;
    border-radius: @icon-hover-border-radius;
    transition: background-color @transition-duration-1
      @transition-timing-function-linear;
    content: '';
  }

  &:hover::before {
    background-color: @icon-hover-color-bg;
  }

  &.@{prefix}-icon-hover-disabled::before {
    opacity: 0;
  }

  .size(@icon-size, @icon-bg-height) {
    line-height: @icon-size;

    &::before {
      top: 50%;
      left: 50%;
      width: @icon-bg-height;
      height: @icon-bg-height;
      transform: translate(-50%, -50%);
    }
  }

  .size(@icon-hover-size-default-icon, @icon-hover-size-default-height);

  &-size-mini {
    .size(@icon-hover-size-mini-icon, @icon-hover-size-mini-height);
  }

  &-size-small {
    .size(@icon-hover-size-small-icon, @icon-hover-size-small-height);
  }

  &-size-large {
    .size(@icon-hover-size-large-icon, @icon-hover-size-large-height);
  }

  &-size-huge {
    .size(@icon-hover-size-huge-icon, @icon-hover-size-huge-height);
  }
}