@delvicons/icons
Version:
DelvIcons - Comprehensive icon library with static and animated SVG icons for all frameworks
1 lines • 3.9 kB
CSS
.delv-icon { display: inline-block; width: 1em; height: 1em; stroke-width: 2; stroke: currentColor; fill: none; vertical-align: middle; flex-shrink: 0} .delv-icon-xs { width: 0.75rem; height: 0.75rem} .delv-icon-sm { width: 1rem; height: 1rem} .delv-icon-md { width: 1.25rem; height: 1.25rem} .delv-icon-lg { width: 1.5rem; height: 1.5rem} .delv-icon-xl { width: 2rem; height: 2rem} .delv-icon-2xl { width: 2.5rem; height: 2.5rem} .delv-animated { animation-fill-mode: both} .delv-spin { animation: delv-spin 1s linear infinite} .delv-pulse { animation: delv-pulse 2s ease-in-out infinite} .delv-bounce { animation: delv-bounce 1s ease-in-out infinite} .delv-fade { animation: delv-fade 1.5s ease-in-out infinite alternate} .delv-wobble { animation: delv-wobble 1s ease-in-out infinite} .delv-heartbeat { animation: delv-heartbeat 2s ease-in-out infinite} .delv-float { animation: delv-float 3s ease-in-out infinite} .delv-swing { animation: delv-swing 1s ease-in-out infinite} .delv-animation-paused { animation-play-state: paused} .delv-animation-running { animation-play-state: running} .delv-animation-slow { animation-duration: 2s} .delv-animation-fast { animation-duration: 0.5s} .delv-animation-delay-1 { animation-delay: 0.1s} .delv-animation-delay-2 { animation-delay: 0.2s} .delv-animation-delay-3 { animation-delay: 0.3s} @keyframes delv-spin { from { transform: rotate(0deg)} to { transform: rotate(360deg)} } @keyframes delv-pulse { 0%, 100% { opacity: 1; transform: scale(1)} 50% { opacity: 0.7; transform: scale(1.1)} } @keyframes delv-bounce { 0%, 20%, 53%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0, 0, 0)} 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -8px, 0)} 70% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -4px, 0)} 90% { transform: translate3d(0, -2px, 0)} } @keyframes delv-fade { 0% { opacity: 0.3} 100% { opacity: 1} } @keyframes delv-wobble { 0% { transform: translateX(0%)} 15% { transform: translateX(-25%) rotate(-5deg)} 30% { transform: translateX(20%) rotate(3deg)} 45% { transform: translateX(-15%) rotate(-3deg)} 60% { transform: translateX(10%) rotate(2deg)} 75% { transform: translateX(-5%) rotate(-1deg)} 100% { transform: translateX(0%)} } @keyframes delv-heartbeat { 0% { transform: scale(1)} 14% { transform: scale(1.3)} 28% { transform: scale(1)} 42% { transform: scale(1.3)} 70% { transform: scale(1)} } @keyframes delv-float { 0%, 100% { transform: translateY(0px)} 50% { transform: translateY(-10px)} } @keyframes delv-swing { 20% { transform: rotate3d(0, 0, 1, 15deg)} 40% { transform: rotate3d(0, 0, 1, -10deg)} 60% { transform: rotate3d(0, 0, 1, 5deg)} 80% { transform: rotate3d(0, 0, 1, -5deg)} 100% { transform: rotate3d(0, 0, 1, 0deg)} } .delv-icon:hover.delv-hover-spin { animation: delv-spin 0.5s ease-in-out} .delv-icon:hover.delv-hover-bounce { animation: delv-bounce 0.6s ease-in-out} .delv-icon:hover.delv-hover-pulse { animation: delv-pulse 0.4s ease-in-out} .delv-icon-primary { color: #3b82f6} .delv-icon-secondary { color: #64748b} .delv-icon-success { color: #10b981} .delv-icon-warning { color: #f59e0b} .delv-icon-danger { color: #ef4444} .delv-icon-info { color: #06b6d4} @media (prefers-color-scheme: dark) { .delv-icon-auto { color: #f1f5f9} } @media (prefers-color-scheme: light) { .delv-icon-auto { color: #1e293b} } .delv-icon[aria-hidden="true"] { pointer-events: none} .delv-icon:focus { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px} @media (prefers-reduced-motion: reduce) { .delv-icon, .delv-animated { animation-duration: 0.01ms ; animation-iteration-count: 1 ; transition-duration: 0.01ms } } @media print { .delv-icon { color: black } .delv-animated { animation: none } }