.svg-icon {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
background-color: currentColor;
vertical-align: -0.3em;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* Definiamo l'animazione keyframe (la stessa che usa Font Awesome) */
@keyframes svg-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Creiamo una classe utility per far spinnare qualsiasi icona SVG */
.svg-spin {
animation: svg-spin 2s linear infinite; /* Ruota all'infinito, linearmente, in 2 secondi */
}
/* Creiamo una classe utility per raddoppiare la dimensione (l'equivalente di fa-2x) */
.svg-2x {
width: 2.4rem; /* 1.2rem base x 2 */
height: 2.4rem;
}
/* Icons SVG*/
.icon-gear {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-house {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-alert {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-info {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-lock {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-clock {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-infinite {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-logs {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-excel {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-down {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-star {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-cookie {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-concierge {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-eye {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-eye-slash {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-sun {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-moon {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-map-pin {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-door-open {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-link {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-time-left {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-slider-vert {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-trash {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-microchip {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-sync {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-spinner {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-check {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-pause {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-play {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-share {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-copy {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-eatingeurope {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-calendar {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-rocket {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-x {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.icon-check-stripe {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}