ayovue/themes/base/icons.css

A progressive vue components library designed to simplify and accelerate your web development process.

[class*='a-icon-'] {
  -webkit-mask: var(--un-icon) no-repeat;
          mask: var(--un-icon) no-repeat;
  mask-size: 100% 100%;
  -webkit-mask: var(--un-icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  background-color: currentColor;
  width: 1em;
  height: 1em;
}

.a-icon-spinner {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M10,3.5 C6.41015,3.5 3.5,6.41015 3.5,10 C3.5,10.4142 3.16421,10.75 2.75,10.75 C2.33579,10.75 2,10.4142 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.58579,18 9.25,17.6642 9.25,17.25 C9.25,16.8358 9.58579,16.5 10,16.5 C13.5899,16.5 16.5,13.5899 16.5,10 C16.5,6.41015 13.5899,3.5 10,3.5 Z'/%3E%3C/svg%3E");
  animation: rotate-spin 1.5s linear infinite;
}
.a-icon-chevron-down {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.2929 12.0619L1.21968 5.98867C0.926773 5.69577 0.926773 5.22089 1.21968 4.92802L1.92802 4.21967C2.22043 3.92727 2.69434 3.9267 2.98743 4.21842L7.82324 9.03158L12.659 4.21842C12.9521 3.9267 13.426 3.92727 13.7184 4.21967L14.4268 4.92802C14.7197 5.22092 14.7197 5.6958 14.4268 5.98867L8.35359 12.0619C8.06068 12.3548 7.5858 12.3548 7.2929 12.0619Z'/%3E%3C/svg%3E");
}
.a-icon-close {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M5.05765 13.6602L3.49829 12.0842L7.2308 8.33513L3.49829 4.58603L5.05765 2.9935L8.80674 6.74259L12.5558 2.9935L14.1152 4.58603L10.3827 8.33513L14.1152 12.0842L12.5558 13.6602L8.80674 9.91107L5.05765 13.6602Z'/%3E%3C/svg%3E");
}

.a-icon-search {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.57633 7.54717H8.03431L7.8422 7.36192C8.51458 6.57976 8.91938 5.56432 8.91938 4.45969C8.91938 1.99657 6.92281 0 4.45969 0C1.99657 0 0 1.99657 0 4.45969C0 6.92281 1.99657 8.91938 4.45969 8.91938C5.56432 8.91938 6.57976 8.51458 7.36192 7.8422L7.54717 8.03431V8.57633L10.9777 12L12 10.9777L8.57633 7.54717ZM4.45969 7.54717C2.75129 7.54717 1.37221 6.1681 1.37221 4.45969C1.37221 2.75129 2.75129 1.37221 4.45969 1.37221C6.1681 1.37221 7.54717 2.75129 7.54717 4.45969C7.54717 6.1681 6.1681 7.54717 4.45969 7.54717Z'/%3E%3C/svg%3E");
}

.a-icon-close-circle-outline {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E");
}

.a-icon-check {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M9.45 18.45L3.25 12.25L4.95 10.55L9.45 15.05L19.025 5.47498L20.725 7.17498L9.45 18.45Z'/%3E%3C/svg%3E");
}

.a-icon-warning {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M0.274902 21.425L11.9999 1.15002L23.7249 21.425H0.274902ZM5.0749 18.65H18.9249L11.9999 6.70002L5.0749 18.65ZM11.9999 17.925C12.2999 17.925 12.5626 17.8124 12.7879 17.587C13.0126 17.3624 13.1249 17.1 13.1249 16.8C13.1249 16.5 13.0126 16.2417 12.7879 16.025C12.5626 15.8084 12.2999 15.7 11.9999 15.7C11.6999 15.7 11.4376 15.8084 11.2129 16.025C10.9876 16.2417 10.8749 16.5 10.8749 16.8C10.8749 17.1 10.9876 17.3624 11.2129 17.587C11.4376 17.8124 11.6999 17.925 11.9999 17.925ZM10.9999 15H12.9999V10.275H10.9999V15Z'/%3E%3C/svg%3E");
}

.a-icon-info {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M10.6249 17.375H13.3749V11H10.6249V17.375ZM11.9999 9.50002C12.4332 9.50002 12.7916 9.35402 13.0749 9.06202C13.3582 8.77069 13.4999 8.41669 13.4999 8.00002C13.4999 7.56669 13.3582 7.20836 13.0749 6.92502C12.7916 6.64169 12.4332 6.50002 11.9999 6.50002C11.5832 6.50002 11.2292 6.64169 10.9379 6.92502C10.6459 7.20836 10.4999 7.56669 10.4999 8.00002C10.4999 8.41669 10.6459 8.77069 10.9379 9.06202C11.2292 9.35402 11.5832 9.50002 11.9999 9.50002ZM11.9999 22.85C10.4832 22.85 9.06657 22.5667 7.7499 22C6.43324 21.4334 5.28724 20.6627 4.3119 19.688C3.33724 18.7127 2.56657 17.5667 1.9999 16.25C1.43324 14.9334 1.1499 13.5167 1.1499 12C1.1499 10.4834 1.43324 9.06669 1.9999 7.75002C2.56657 6.43336 3.33724 5.28736 4.3119 4.31202C5.28724 3.33736 6.43324 2.56669 7.7499 2.00002C9.06657 1.43336 10.4832 1.15002 11.9999 1.15002C13.5166 1.15002 14.9332 1.43336 16.2499 2.00002C17.5666 2.56669 18.7126 3.33736 19.6879 4.31202C20.6626 5.28736 21.4332 6.43336 21.9999 7.75002C22.5666 9.06669 22.8499 10.4834 22.8499 12C22.8499 13.5167 22.5666 14.9334 21.9999 16.25C21.4332 17.5667 20.6626 18.7127 19.6879 19.688C18.7126 20.6627 17.5666 21.4334 16.2499 22C14.9332 22.5667 13.5166 22.85 11.9999 22.85ZM11.9999 19.7C14.1666 19.7 15.9916 18.9584 17.4749 17.475C18.9582 15.9917 19.6999 14.1667 19.6999 12C19.6999 9.83336 18.9582 8.00836 17.4749 6.52502C15.9916 5.04169 14.1666 4.30002 11.9999 4.30002C9.83324 4.30002 8.00824 5.04169 6.5249 6.52502C5.04157 8.00836 4.2999 9.83336 4.2999 12C4.2999 14.1667 5.04157 15.9917 6.5249 17.475C8.00824 18.9584 9.83324 19.7 11.9999 19.7Z'/%3E%3C/svg%3E");
}

.a-icon-danger {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11.9999 17.85C12.4832 17.85 12.8916 17.6834 13.2249 17.35C13.5582 17.0167 13.7249 16.6084 13.7249 16.125C13.7249 15.6417 13.5582 15.229 13.2249 14.887C12.8916 14.5457 12.4832 14.375 11.9999 14.375C11.5166 14.375 11.1082 14.5457 10.7749 14.887C10.4416 15.229 10.2749 15.6417 10.2749 16.125C10.2749 16.6084 10.4416 17.0167 10.7749 17.35C11.1082 17.6834 11.5166 17.85 11.9999 17.85ZM10.4249 13.05H13.5749V6.47502H10.4249V13.05ZM11.9999 22.85C10.4832 22.85 9.06657 22.5667 7.7499 22C6.43324 21.4334 5.28724 20.6627 4.3119 19.688C3.33724 18.7127 2.56657 17.5667 1.9999 16.25C1.43324 14.9334 1.1499 13.5167 1.1499 12C1.1499 10.4834 1.43324 9.06669 1.9999 7.75002C2.56657 6.43336 3.33724 5.28736 4.3119 4.31202C5.28724 3.33736 6.43324 2.56669 7.7499 2.00002C9.06657 1.43336 10.4832 1.15002 11.9999 1.15002C13.5166 1.15002 14.9332 1.43336 16.2499 2.00002C17.5666 2.56669 18.7126 3.33736 19.6879 4.31202C20.6626 5.28736 21.4332 6.43336 21.9999 7.75002C22.5666 9.06669 22.8499 10.4834 22.8499 12C22.8499 13.5167 22.5666 14.9334 21.9999 16.25C21.4332 17.5667 20.6626 18.7127 19.6879 19.688C18.7126 20.6627 17.5666 21.4334 16.2499 22C14.9332 22.5667 13.5166 22.85 11.9999 22.85ZM11.9999 19.7C14.1666 19.7 15.9916 18.9584 17.4749 17.475C18.9582 15.9917 19.6999 14.1667 19.6999 12C19.6999 9.83336 18.9582 8.00836 17.4749 6.52502C15.9916 5.04169 14.1666 4.30002 11.9999 4.30002C9.83324 4.30002 8.00824 5.04169 6.5249 6.52502C5.04157 8.00836 4.2999 9.83336 4.2999 12C4.2999 14.1667 5.04157 15.9917 6.5249 17.475C8.00824 18.9584 9.83324 19.7 11.9999 19.7Z'/%3E%3C/svg%3E");
}

.a-icon-upload {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6.57498 20.8499C4.82391 20.8499 3.32781 20.2499 2.08668 19.0499C0.845542 17.8499 0.224976 16.3832 0.224976 14.6499C0.224976 13.1832 0.629142 11.8624 1.43748 10.6874C2.24581 9.5124 3.34164 8.76657 4.72498 8.4499C5.24164 6.8499 6.16664 5.56657 7.49998 4.5999C8.83331 3.63324 10.3333 3.1499 12 3.1499C14.0333 3.1499 15.7833 3.8374 17.25 5.2124C18.7166 6.5874 19.5416 8.28324 19.725 10.2999C20.925 10.6166 21.9 11.2624 22.65 12.2374C23.4 13.2124 23.775 14.3249 23.775 15.5749C23.775 17.0402 23.25 18.2857 22.2 19.3114C21.15 20.3371 19.8916 20.8499 18.425 20.8499H13.95C13.0837 20.8499 12.3422 20.5415 11.7253 19.9246C11.1084 19.3077 10.8 18.5662 10.8 17.6999V14.0749L9.02498 15.8499L7.34998 14.1999L12 9.5249L16.65 14.1999L14.975 15.8499L13.2 14.0749V17.6999H18.425C19.025 17.6999 19.5416 17.4832 19.975 17.0499C20.4083 16.6166 20.625 16.0999 20.625 15.4999C20.625 14.8999 20.4083 14.3832 19.975 13.9499C19.5416 13.5166 19.025 13.2999 18.425 13.2999H16.625V10.9249C16.625 9.64532 16.174 8.55459 15.2722 7.6527C14.3703 6.75084 13.2796 6.2999 12 6.2999C10.6833 6.2999 9.58331 6.79574 8.69998 7.7874C7.81664 8.77907 7.37498 9.9499 7.37498 11.2999H6.57498C5.69116 11.2999 4.93688 11.6122 4.31213 12.2369C3.68736 12.8616 3.37498 13.6157 3.37498 14.4994C3.37498 15.3831 3.68736 16.1374 4.31213 16.7624C4.93688 17.3874 5.69116 17.6999 6.57498 17.6999H8.79998V20.8499H6.57498Z'/%3E%3C/svg%3E");
}

.a-icon-pencil {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M5.22501 19.525H6.22501L14.6 11.125L13.6 10.125L5.22501 18.525V19.525ZM19.4 9.70001L15.025 5.35001L15.725 4.625C16.3417 3.99167 17.0792 3.67084 17.9375 3.6625C18.7958 3.65417 19.5417 3.95834 20.175 4.575L20.7 5.10001C21.2167 5.58334 21.4583 6.14167 21.425 6.77501C21.3917 7.40834 21.15 7.95 20.7 8.4L19.4 9.70001ZM17.975 11.15L7.22501 21.9H2.82501V17.525L13.575 6.77501L17.975 11.15ZM14.125 10.625L13.6 10.125L14.6 11.125L14.125 10.625Z'/%3E%3C/svg%3E");
}

.a-icon-close {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6.33904 20.45L4 18.0861L9.59876 12.4624L4 6.8388L6.33904 4.45L11.9627 10.0736L17.5863 4.45L19.9254 6.8388L14.3266 12.4624L19.9254 18.0861L17.5863 20.45L11.9627 14.8264L6.33904 20.45Z'/%3E%3C/svg%3E");
}

.a-icon-file {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M5.91664 23.2C5.1883 23.2 4.57011 22.946 4.06206 22.4379C3.55401 21.9299 3.29999 21.3117 3.29999 20.5834V4.41665C3.29999 3.68373 3.55401 3.06162 4.06206 2.5503C4.57011 2.03898 5.1883 1.78333 5.91664 1.78333H14.65L20.7167 7.85V20.5834C20.7167 21.3117 20.461 21.9299 19.9497 22.4379C19.4384 22.946 18.8163 23.2 18.0833 23.2H5.91664ZM13.2667 9.18333V4.41665H5.91664V20.5834H18.0833V9.18333H13.2667Z'/%3E%3C/svg%3E");
}

.a-icon-circle-with-cross {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 0.5C8.8174 0.5 5.76516 1.76428 3.51472 4.01472C1.26428 6.26516 0 9.3174 0 12.5C0 15.6826 1.26428 18.7348 3.51472 20.9853C5.76516 23.2357 8.8174 24.5 12 24.5C15.1826 24.5 18.2348 23.2357 20.4853 20.9853C22.7357 18.7348 24 15.6826 24 12.5C24 9.3174 22.7357 6.26516 20.4853 4.01472C18.2348 1.76428 15.1826 0.5 12 0.5ZM18.8414 16.8729L16.3714 19.3429L12 14.97L7.62714 19.3414L5.15714 16.8714L9.53143 12.5L5.15857 8.12714L7.62857 5.65857L12 10.03L16.3729 5.65714L18.8429 8.12714L14.4686 12.5L18.8414 16.8729Z'/%3E%3C/svg%3E");
}
/* .a-icon-x {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d=''/%3E%3C/svg%3E");
} */

@keyframes rotate-spin {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(450deg);
  }
}