ui-lit/svgIcons/index.js

UI Elements on LIT

import { svg } from 'lit';
export const dropdown = (opened, size = 9) => svg `
<svg 
    ?opened = "${opened}"
    class = "dropdown icon"
    width = "${size}px"
    height = "${size}px"
    style = "transform-origin:center; transform: rotate(${opened ? '180deg' : '0'});" 
    viewBox="0 0 130 130" 
    xmlns="http://www.w3.org/2000/svg">
<path d="M127.139 35.2215L73.7459 102.339C68.681 108.479 60.8725 108.479 56.0186 102.339L2.62577 35.2215C-2.43916 28.8697 0.093308 24 7.90175 24H121.863C129.882 24 132.204 28.8697 127.139 35.2215Z" />
</svg>`;
export const cancel = (size = 9) => svg `
<svg 
    class = "icon"
    width="${size}" 
    height="${size}" 
    viewBox="0 0 16 16" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M12.5575 0.968001L7.99873 5.52675C6.47873 4.00775 4.95898 2.48775 3.43998 0.968001C0.146481 0.400251 0.398731 0.148001 0.966481 3.442C2.48573 4.9605 4.00623 6.48075 5.52473 8L0.966481 12.5583C0.398731 15.8518 0.146481 15.5995 3.43998 15.032C4.95923 13.5123 6.47898 11.9923 7.99873 10.473C9.51873 11.9928 11.0372 13.5123 12.5575 15.032C15.8507 15.5995 15.5985 15.8518 15.0312 12.559C13.5112 11.0388 11.9912 9.5195 10.4715 8C11.9915 6.48025 13.5115 4.96025 15.0312 3.44125C15.5985 0.148001 15.8507 0.400251 12.5575 0.968001Z" />
</svg>`;
export const search = (size = 16) => svg `

<svg class = "search" width="${size}" height="${size}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8833 9.93267L14.47 13.5193C14.5961 13.6455 14.6668 13.8166 14.6668 13.9949C14.6667 14.1732 14.5958 14.3443 14.4697 14.4703C14.3435 14.5964 14.1724 14.6672 13.9941 14.6671C13.8157 14.6671 13.6447 14.5962 13.5187 14.47L9.93199 10.8833C8.85979 11.7138 7.51151 12.1046 6.1614 11.9762C4.8113 11.8479 3.56081 11.21 2.66431 10.1924C1.76781 9.1748 1.29265 7.85388 1.33549 6.49836C1.37833 5.14285 1.93595 3.85457 2.89492 2.8956C3.85389 1.93663 5.14217 1.37901 6.49768 1.33617C7.8532 1.29333 9.17412 1.76849 10.1917 2.66499C11.2093 3.56149 11.8472 4.81198 11.9756 6.16208C12.1039 7.51219 11.7131 8.86047 10.8827 9.93267H10.8833ZM6.66665 10.6667C7.72752 10.6667 8.74493 10.2452 9.49508 9.49509C10.2452 8.74495 10.6667 7.72753 10.6667 6.66667C10.6667 5.6058 10.2452 4.58839 9.49508 3.83824C8.74493 3.08809 7.72752 2.66667 6.66665 2.66667C5.60579 2.66667 4.58837 3.08809 3.83823 3.83824C3.08808 4.58839 2.66665 5.6058 2.66665 6.66667C2.66665 7.72753 3.08808 8.74495 3.83823 9.49509C4.58837 10.2452 5.60579 10.6667 6.66665 10.6667V10.6667Z" />
</svg>

`;