vuepress-theme-system/styles/system/icons.css

a vuepress theme

.icon {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
}

.icon-8 {
  width: calc(var(--base-font-size) / 2);
  height: calc(var(--base-font-size) / 2);
  display: block;
}

.icon-24 {
  width: var(--unit);
  height: var(--unit);
  display: block;
  background-repeat: no-repeat;
}

.icon-32 {
  width: var(--unit-l);
  height: var(--unit-l);
  display: block;
  background-repeat: no-repeat;
}

.icon-48 {
  width: var(--unit-xl);
  height: var(--unit-xl);
  display: block;
  background-repeat: no-repeat;
}

.icon-128 {
  width: calc(var(--unit) * 5);
  height: calc(var(--unit) * 5);
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
}

.icon-close {
  background-image: svg-load(
    './icons/24-close.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-close {
  background-image: svg-load(
    './icons/24-close.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-plus {
  background-image: svg-load(
    './icons/24-plus.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt .icon-plus,
.btn-alt:hover .icon-plus,
.btn-border:hover .icon-plus {
  background-image: svg-load(
    './icons/24-plus.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-minus {
  background-image: svg-load(
    './icons/24-minus.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-minus,
.btn-border:hover .icon-minus {
  background-image: svg-load(
    './icons/24-minus.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-chevron-b {
  background-image: svg-load(
    './icons/24-chevron-b.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-border:hover .icon-chevron-b,
.btn:hover .icon-chevron-b,
.btn-alt:hover .icon-chevron-b {
  background-image: svg-load(
    './icons/24-chevron-b.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-chevron-t {
  background-image: svg-load(
    './icons/24-chevron-t.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-border:hover .icon-chevron-t,
.btn:hover .icon-chevron-t,
.btn-alt:hover .icon-chevron-t {
  background-image: svg-load(
    './icons/24-chevron-t.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-download {
  background-image: svg-load(
    './icons/24-download.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-download {
  background-image: svg-load(
    './icons/24-download.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-view {
  background-image: svg-load(
    './icons/24-view.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-link {
  background-image: svg-load(
    './icons/24-link.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-link {
  background-image: svg-load(
    './icons/24-link.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-login {
  background-image: svg-load(
    './icons/24-login.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-login {
  background-image: svg-load(
    './icons/24-login.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-user {
  background-image: svg-load(
    './icons/24-user.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-user,
.btn-alt.active .icon-user {
  background-image: svg-load(
    './icons/24-user.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-menu {
  background-image: svg-load(
    './icons/24-menu.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-menu:hover .icon-menu,
.btn-menu.active .icon-menu {
  background-image: svg-load(
    './icons/24-menu.svg',
    fill=none,
    stroke=rgb(255, 0, 98),
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-pencil {
  background-image: svg-load(
    './icons/24-pencil.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.btn-alt:hover .icon-pencil,
.btn-border:hover .icon-pencil {
  background-image: svg-load(
    './icons/24-pencil.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-24-dot.blink {
  animation: blinker 0.2s ease infinite;
}

@keyframes blinker {
  50% {
    background-image: svg-load('./icons/24-dot.svg', fill= 'white');
  }
}

.icon-globe {
  background-image: svg-load(
    './icons/globe-3.svg',
    fill=none,
    stroke= '#666',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.active .icon-globe,
.btn-border:hover .icon-globe {
  background-image: svg-load(
    './icons/globe-3.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1.25px
  );
}

.icon-map {
  background-image: svg-load(
    './icons/map-pin-2.svg',
    fill=none,
    stroke= '#76b6bd',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}

.icon-dashboard {
  background-image: svg-load(
    './icons/window-speedtest.svg',
    fill=none,
    stroke= '#76b6bd',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}

.icon-api {
  background-image: svg-load(
    './icons/cloud-setting.svg',
    fill=none,
    stroke= '#76b6bd',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}

.icon-user-check {
  background-image: svg-load(
    './icons/business-check.svg',
    fill=none,
    stroke= '#76b6bd',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}

.icon-ngo {
  background-image: svg-load(
    './icons/group-global.svg',
    fill=none,
    stroke= '#76b6bd',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}

.icon-business {
  background-image: svg-load(
    './icons/building-2.svg',
    fill=none,
    stroke= 'white',
    stroke-linecap=round,
    stroke-linejoin=round,
    stroke-width=1px
  );
}