Search Icon
CODE
×
HTML
<svg class='search-icon' version='1.1' id='search' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'><rect y="0" fill="none" width="640" height="640"></rect> <path fill="currentColor" d="M614.7,591.1L467.5,443.9C495.8,410.4,513,367.2,513,320c0-105.9-86.1-192-192-192s-192,86.1-192,192s86.1,192,192,192 c47.2,0,90.4-17.2,123.9-45.5l147.2,147.2L614.7,591.1z M321,480c-88.2,0-160-71.8-160-160s71.8-160,160-160s160,71.8,160,160 S409.2,480,321,480z"></path></svg>
CSS
svg.search-icon { display:block; } .search-icon { --ind-p: 6px; position: absolute; width: 32px; height: 32px; cursor: pointer; transform: rotate(0deg); transition: 400ms ease-in-out; transition-property: all; top: 63px; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); } @media (hover: hover) { .search-icon:hover { transform: rotate(90deg); } } @media (max-width: 1199.98px) { svg.search-icon { display: none !important; } } div.styleguide.atoms svg.search-icon { display: block !important; position: static; }
JS
Search Icon
Last Edit: Oct 26, 2023, 11:37am
×