imChat/src/TUIKit/TUIComponents/styles/icon.scss

.icon {
  box-sizing: border-box;
  display: inline-block;
  width: 24Px;
  height: 24Px;
}

.icon-more {
  margin: 0;
  background: url('../assets/icon/more.png') no-repeat;
  background-size: contain;
}

.icon-chat-setting {
  background: url('../assets/icon/chat-setting.png') no-repeat;
  background-size: contain;
}

.icon-image {
  margin: 12Px 10Px 0;
  background: url('../assets/icon/image.png') no-repeat;
  background-size: contain;
}

.icon-files {
  margin: 12Px 10Px 0;
  background: url('../assets/icon/files.png') no-repeat;
  background-size: contain;
}

.icon-video {
  margin: 12Px 10Px 0;
  background: url('../assets/icon/video.png') no-repeat;
  background-size: contain;
}

.icon-face {
  margin: 12Px 10Px 1Px;
  background: url('../assets/icon/face.png') no-repeat;
  background-size: contain;
}

.icon-custom {
  margin: 12Px 10Px 0;
  background: url('../assets/icon/custom.png') no-repeat;
  background-size: contain;
}

.icon-call {
  margin: 12Px 2Px 0 10Px;
  background: url('../assets/icon/call.png') no-repeat;
  background-size: contain;
}

.icon-call-voice {
  margin: 5Px;
  width: 20Px;
  height: 10Px;
  background: url('../assets/icon/voice-call.png') no-repeat;
  background-size: contain;
}

.icon-call-video {
  margin: 5Px;
  width: 20Px;
  height: 14Px;
  background: url('../assets/icon/video-call.png') no-repeat;
  background-size: contain;
}

.icon-down-arrow {
  margin: 0;
  width: 7Px;
  height: 7Px;
  background: url('../assets/icon/down.png') no-repeat;
  background-size: contain;
}

.icon-location {
  margin: 12Px 10Px 0;
  background: url('../assets/icon/location.png') no-repeat;
  background-size: contain;
}

.icon-selected {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/selected.svg') no-repeat;
  background-size: contain;
}

.icon-unselected {
  width: 16Px;
  height: 16Px;
  background: #ffffff;
  border: 1Px solid #dddddd;
  border-radius: 8Px;
}

.icon-cancel {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/cancel.svg') no-repeat;
  background-size: contain;
}

.icon-left {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

.icon-right {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
}

.icon-right-transparent {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/back.svg') no-repeat;
  transform: rotate(180deg);
  background-size: contain;
}

.icon-down {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}

.icon-edit {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/edit.png') no-repeat;
  background-size: contain;
}

.icon-voice {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/voice.png') no-repeat;
  background-size: contain;
}

.icon-voice-active {
  width: 16Px;
  height: 16Px;
  animation: voiceChange 1s ease-out infinite;
}

@keyframes voiceChange {
  0% {
    background: url('../assets/icon/voice-1.png') no-repeat;
    background-size: contain;
  }

  50% {
    background: url('../assets/icon/voice-2.png') no-repeat;
    background-size: contain;
  }

  100% {
    background: url('../assets/icon/voice-3.png') no-repeat;
    background-size: contain;
  }
}

.icon-reserve {
  transform: rotate(180deg);
}

.icon-del {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/del.png') no-repeat;
  background-size: contain;
}

.icon-remove {
  width: 16Px;
  height: 16Px;
  background: url('../assets/icon/icon-remove.png') no-repeat;
  background-size: contain;
}

.icon-work {
  width: 36Px;
  height: 36Px;
  background: url('../assets/icon/work.png') no-repeat;
  background-size: contain;
}

.icon-public {
  width: 36Px;
  height: 36Px;
  background: url('../assets/icon/public.png') no-repeat;
  background-size: contain;
}

.icon-meeting {
  width: 36Px;
  height: 36Px;
  background: url('../assets/icon/meeting.png') no-repeat;
  background-size: contain;
}

.icon-room {
  width: 36Px;
  height: 36Px;
  background: url('../assets/icon/room.png') no-repeat;
  background-size: contain;
}

.icon-system {
  width: 36Px;
  height: 36Px;
  background: url('../assets/icon/system.png') no-repeat;
  background-size: contain;
}

.icon-words {
  background: url('../assets/icon/words.png') no-repeat;
  background-size: contain;
}

.icon-evaluate {
  background: url('../assets/icon/evaluate.png') no-repeat;
  background-size: contain;
}

.icon-star {
  width: 17Px !important;
  height: 24Px;
  background: url('../assets/icon/star.svg') no-repeat;
  background-size: contain;
  margin-top: 2Px !important;
}

.icon-star-light {
  width: 24Px !important;
  height: 24Px !important;
  background: url('../assets/icon/star-light.svg') no-repeat;
  background-size: contain;
}

.icon-back {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/back.svg') no-repeat;
  background-size: contain;
}

.icon-back2 {
  width: 24Px;
  height: 24Px;
  background: url('../assets/icon/icon-close.png') no-repeat;
  background-size: contain;
}

.icon-left-arrow {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/arrow-left-center.svg') no-repeat;
  background-size: contain;
}

.icon-right-arrow {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/arrow-left-center.svg') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

.icon-zoom-out {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/zoom-out.svg') no-repeat;
  background-size: contain;
}

.icon-zoom-in {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/zoom-in.svg') no-repeat;
  background-size: contain;
}

.icon-refresh-left {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/rotate-left.svg') no-repeat;
  background-size: contain;
}

.icon-refresh-right {
  width: 27Px;
  height: 27Px;
  background: url('../assets/icon/rotate-right.svg') no-repeat;
  background-size: contain;
}

.icon-bottom-double {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/double-arrow.svg') no-repeat;
  background-size: contain;
}

.icon-c2c {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/c2c.svg') no-repeat;
  background-size: contain;
}

.icon-group {
  margin-left: 40Px;
  width: 14Px;
  height: 14Px;
  background: url('../assets/icon/startGroup.svg') no-repeat;
  background-size: contain;
}

.icon-msg-del {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-del.svg') no-repeat;
  background-size: contain;
}

.icon-msg-forward {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-forward.svg') no-repeat;
  background-size: contain;
}

.icon-msg-copy {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-copy.svg') no-repeat;
  background-size: contain;
}

.icon-msg-play {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-play.svg') no-repeat;
  background-size: contain;
}

.icon-msg-reply {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-reply.svg') no-repeat;
  background-size: contain;
}

.icon-msg-replies {
  width: 12Px;
  height: 12Px;
  background: url('../assets/icon/replies.svg') no-repeat;
  background-size: contain;
}

.icon-msg-revoke {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-revoke.svg') no-repeat;
  background-size: contain;
}

.icon-msg-resend {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-revoke.svg') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

.icon-msg-quote {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/msg-qnote.svg') no-repeat;
  background-size: contain;
}

.icon-close-h5 {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/icon-close-h5.svg') no-repeat;
  background-size: contain;
}

.icon-download-h5 {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/icon-download-h5.svg') no-repeat;
  background-size: contain;
}

.icon-download {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/icon-download.svg') no-repeat;
  background-size: contain;
}

.icon-error {
  width: 12Px;
  height: 12Px;
  border-radius: 100%;
  background: #ff584c;
  font-style: normal;
  font-size: 12Px;
  color: #ffffff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.icon-expand {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/expand.svg') no-repeat;
  background-size: contain;
}

.icon-collapse {
  width: 20Px;
  height: 20Px;
  background: url('../assets/icon/collapse.svg') no-repeat;
  background-size: contain;
}

.icon-close {
  display: inline-block;
  width: 24Px;
  height: 24Px;
  position: relative;
  border-radius: 50%;
}

.icon-close::before,
.icon-close::after {
  content: '';
  position: absolute;
  /*方便进行定位*/
  background-color: #8f959e;
  height: 16Px;
  width: 2Px;
  top: 50%;
  left: 50%;
  margin-top: -8Px;
  margin-left: -1Px;
}

.icon-close::before {
  transform: rotate(45deg);
}

.icon-close::after {
  transform: rotate(-45deg);
}

.plus {
  display: inline-block;
  width: 30Px;
  height: 30Px;
  position: relative;
}

.plus::before,
.plus::after {
  content: '';
  position: absolute;
  background-color: #232832;
  border-radius: 0.5Px;
  width: 1Px;
  height: 14Px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.plus::after {
  transform: rotate(90deg);
  width: 0.5Px;
}