hologram-web-library
Version:
Hologram Web Library components
105 lines (86 loc) • 6.87 kB
JavaScript
const SVG_DEFAULTS = {
width: '16',
height: '16'
}
const HWIcons = (() => {
return {
right: (width = '16', height = '16', rightIconColor = 'currentColor', styles = '') => {
const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', width || SVG_DEFAULTS.width);
svgElem.setAttribute('height', height || SVG_DEFAULTS.height);
svgElem.setAttribute('viewBox', '0 0 16 16');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgElem.innerHTML = `<path d='M9.33333 3.33331L14 7.99998M14 7.99998L9.33333 12.6666M14 7.99998H2' stroke=${rightIconColor} stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />`;
return svgElem;
},
wallet: (width = '21', height = '20', color = 'currentColor', styles = '') => {
const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', width || SVG_DEFAULTS.width);
svgElem.setAttribute('height', height || SVG_DEFAULTS.height);
svgElem.setAttribute('viewBox', '0 0 21 20');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (styles) {
styles?.split(' ').forEach((cl) => {
svgElem.classList.add(cl);
});
}
svgElem.innerHTML = `<g><path d="M3.25 8.33317H18.25M6.58333 12.4998H7.41667M10.75 12.4998H11.5833M5.75 15.8332H15.75C16.413 15.8332 17.0489 15.5698 17.5178 15.1009C17.9866 14.6321 18.25 13.9962 18.25 13.3332V6.6665C18.25 6.00346 17.9866 5.36758 17.5178 4.89874C17.0489 4.4299 16.413 4.1665 15.75 4.1665H5.75C5.08696 4.1665 4.45107 4.4299 3.98223 4.89874C3.51339 5.36758 3.25 6.00346 3.25 6.6665V13.3332C3.25 13.9962 3.51339 14.6321 3.98223 15.1009C4.45107 15.5698 5.08696 15.8332 5.75 15.8332Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`;
return svgElem;
},
profile: (width = '16', height = '16', color = 'currentColor', styles = '') => {
const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', width || SVG_DEFAULTS.width);
svgElem.setAttribute('height', height || SVG_DEFAULTS.height);
svgElem.setAttribute('viewBox', '0 0 24 24');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (styles) {
styles?.split(' ').forEach((cl) => {
svgElem.classList.add(cl);
});
}
svgElem.innerHTML = `<path d="M5.121 17.804C7.21942 16.6179 9.58958 15.9963 12 16C14.5 16 16.847 16.655 18.879 17.804M15 10C15 10.7956 14.6839 11.5587 14.1213 12.1213C13.5587 12.6839 12.7956 13 12 13C11.2044 13 10.4413 12.6839 9.87868 12.1213C9.31607 11.5587 9 10.7956 9 10C9 9.20435 9.31607 8.44129 9.87868 7.87868C10.4413 7.31607 11.2044 7 12 7C12.7956 7 13.5587 7.31607 14.1213 7.87868C14.6839 8.44129 15 9.20435 15 10ZM21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`;
return svgElem;
},
check: (width = '16', height = '16', color = 'currentColor', styles = '') => {
const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', width || SVG_DEFAULTS.width);
svgElem.setAttribute('height', height || SVG_DEFAULTS.height);
svgElem.setAttribute('viewBox', '0 0 18 18');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (styles) {
styles?.split(' ').forEach((cl) => {
svgElem.classList.add(cl);
});
}
svgElem.innerHTML = `<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.0363 4.76351C15.205 4.93228 15.2998 5.16116 15.2998 5.39981C15.2998 5.63846 15.205 5.86733 15.0363 6.03611L7.8363 13.2361C7.66752 13.4048 7.43865 13.4996 7.2 13.4996C6.96135 13.4996 6.73248 13.4048 6.5637 13.2361L2.9637 9.63611C2.79976 9.46637 2.70904 9.23902 2.71109 9.00305C2.71314 8.76707 2.8078 8.54134 2.97466 8.37447C3.14153 8.2076 3.36726 8.11295 3.60324 8.1109C3.83922 8.10885 4.06656 8.19957 4.2363 8.36351L7.2 11.3272L13.7637 4.76351C13.9325 4.59478 14.1614 4.5 14.4 4.5C14.6386 4.5 14.8675 4.59478 15.0363 4.76351Z"
fill=${color}
/>`;
return svgElem;
},
close: (width = '16', height = '16', color = 'currentColor', styles = '') => {
const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', width || SVG_DEFAULTS.width);
svgElem.setAttribute('height', height || SVG_DEFAULTS.height);
svgElem.setAttribute('viewBox', '0 0 18 18');
svgElem.setAttribute('fill', 'none');
svgElem.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (styles) {
styles?.split(' ').forEach((cl) => {
svgElem.classList.add(cl);
});
}
svgElem.innerHTML = `<g><path fill-rule="evenodd" clip-rule="evenodd" d="M3.86346 3.87474C4.03207 3.70601 4.26072 3.61123 4.49912 3.61123C4.73753 3.61123 4.96618 3.70601 5.13478 3.87474L8.9946 7.73843L12.8544 3.87474C12.9374 3.78878 13.0366 3.72021 13.1463 3.67304C13.256 3.62588 13.3739 3.60105 13.4933 3.60001C13.6127 3.59897 13.7311 3.62174 13.8416 3.667C13.9521 3.71225 14.0525 3.77908 14.1369 3.86358C14.2213 3.94808 14.2881 4.04857 14.3333 4.15918C14.3785 4.26978 14.4012 4.38829 14.4002 4.5078C14.3991 4.6273 14.3743 4.7454 14.3272 4.8552C14.2801 4.965 14.2116 5.06431 14.1257 5.14733L10.2659 9.01103L14.1257 12.8747C14.2895 13.0445 14.3801 13.2718 14.3781 13.5078C14.376 13.7438 14.2815 13.9695 14.1148 14.1364C13.9481 14.3032 13.7226 14.3979 13.4868 14.3999C13.2511 14.402 13.024 14.3113 12.8544 14.1473L8.9946 10.2836L5.13478 14.1473C4.96521 14.3113 4.7381 14.402 4.50236 14.3999C4.26662 14.3979 4.04111 14.3032 3.87441 14.1364C3.70772 13.9695 3.61316 13.7438 3.61111 13.5078C3.60906 13.2718 3.69969 13.0445 3.86346 12.8747L7.72328 9.01103L3.86346 5.14733C3.69491 4.97856 3.60022 4.74968 3.60022 4.51103C3.60022 4.27239 3.69491 4.04351 3.86346 3.87474Z" fill="${color}"/></g></svg>`;
return svgElem;
}
}
})();
export default HWIcons;