DIVA Web Icons Customization
The property customIcons inside DIVA Configuration is an object containing the mapping of custom icons.
Icons are identified by id and they can be used in order to customize icons in data panels menu.
id should map sync data panels/videoList id or it can be 'menu' to match the menu (hamburger) icon.
Important Note: actually commentary icon is not customizable.
Custom icons can be used for external plugins as well by mapping the id of the plugin when registering it in diva plugin manager,
but they could be overwritten by plugin's provided icons.
The icons are specified as html strings.
DIVA manages 4 states: default, interacting (hover / focus), active and active-interacting.
Example of custom icons object:
{
watchTogether: ``,
watchTogether_interacting: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.0769 19.5924C23.5874 19.5924 24 19.1788 24 18.6693C24 16.1244 21.9295 14.0539 19.3846 14.0539C18.35 14.0539 17.3624 14.399 16.5603 15.0192C15.6754 14.1368 14.5368 13.5087 13.2649 13.2552C12.8558 13.1736 12.4328 13.1308 12 13.1308C10.2221 13.1308 8.60926 13.8529 7.43964 15.0192C6.63755 14.3991 5.65 14.0539 4.61539 14.0539C2.07047 14.0539 0 16.1244 0 18.6693C0 19.1789 0.412616 19.5924 0.923079 19.5924C1.43354 19.5924 1.84616 19.1789 1.84616 18.6693C1.84616 17.1426 3.08862 15.9001 4.61539 15.9001C5.24571 15.9001 5.84466 16.116 6.3283 16.4989C5.82487 17.4182 5.53842 18.4724 5.53842 19.5924C5.53842 19.7834 5.59645 19.961 5.6959 20.1084C5.76843 20.2158 5.86301 20.3072 5.97318 20.376C6.11476 20.4644 6.28211 20.5155 6.46155 20.5155C6.97201 20.5155 7.38463 20.1019 7.38463 19.5924C7.38463 17.0475 9.4551 14.977 12 14.977C13.2725 14.977 14.4263 15.4946 15.262 16.3303C15.482 16.5503 15.6799 16.7922 15.8521 17.0526C16.3343 17.7816 16.6154 18.6548 16.6154 19.5924C16.6154 19.8471 16.7185 20.0779 16.8855 20.245C16.9359 20.2954 16.9922 20.3401 17.0531 20.3778C17.1941 20.4651 17.3603 20.5155 17.5385 20.5155C18.049 20.5155 18.4616 20.1019 18.4616 19.5924C18.4616 18.4725 18.1751 17.4182 17.6717 16.4989C18.1553 16.116 18.7543 15.9 19.3846 15.9C20.9114 15.9 22.1538 17.1425 22.1538 18.6693C22.1538 19.1788 22.5665 19.5924 23.0769 19.5924Z"
fill="var(--primary-colour)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.1538 10.3616C22.1538 11.8883 20.9114 13.1308 19.3846 13.1308C17.8578 13.1308 16.6154 11.8883 16.6154 10.3616C16.6154 8.8348 17.8578 7.59234 19.3846 7.59234C20.9114 7.59234 22.1538 8.8348 22.1538 10.3616ZM20.3077 10.3616C20.3077 9.85296 19.8941 9.4385 19.3846 9.4385C18.8751 9.4385 18.4615 9.85296 18.4615 10.3616C18.4615 10.8702 18.8751 11.2847 19.3846 11.2847C19.8941 11.2847 20.3077 10.8702 20.3077 10.3616Z"
fill="var(--primary-colour)"
/><svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.0769 19.5924C23.5874 19.5924 24 19.1788 24 18.6693C24 16.1244 21.9295 14.0539 19.3846 14.0539C18.35 14.0539 17.3624 14.399 16.5603 15.0192C15.6754 14.1368 14.5368 13.5087 13.2649 13.2552C12.8558 13.1736 12.4328 13.1308 12 13.1308C10.2221 13.1308 8.60926 13.8529 7.43964 15.0192C6.63755 14.3991 5.65 14.0539 4.61539 14.0539C2.07047 14.0539 0 16.1244 0 18.6693C0 19.1789 0.412616 19.5924 0.923079 19.5924C1.43354 19.5924 1.84616 19.1789 1.84616 18.6693C1.84616 17.1426 3.08862 15.9001 4.61539 15.9001C5.24571 15.9001 5.84466 16.116 6.3283 16.4989C5.82487 17.4182 5.53842 18.4724 5.53842 19.5924C5.53842 19.7834 5.59645 19.961 5.6959 20.1084C5.76843 20.2158 5.86301 20.3072 5.97318 20.376C6.11476 20.4644 6.28211 20.5155 6.46155 20.5155C6.97201 20.5155 7.38463 20.1019 7.38463 19.5924C7.38463 17.0475 9.4551 14.977 12 14.977C13.2725 14.977 14.4263 15.4946 15.262 16.3303C15.482 16.5503 15.6799 16.7922 15.8521 17.0526C16.3343 17.7816 16.6154 18.6548 16.6154 19.5924C16.6154 19.8471 16.7185 20.0779 16.8855 20.245C16.9359 20.2954 16.9922 20.3401 17.0531 20.3778C17.1941 20.4651 17.3603 20.5155 17.5385 20.5155C18.049 20.5155 18.4616 20.1019 18.4616 19.5924C18.4616 18.4725 18.1751 17.4182 17.6717 16.4989C18.1553 16.116 18.7543 15.9 19.3846 15.9C20.9114 15.9 22.1538 17.1425 22.1538 18.6693C22.1538 19.1788 22.5665 19.5924 23.0769 19.5924Z"
fill="var(--primary-colour)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.1538 10.3616C22.1538 11.8883 20.9114 13.1308 19.3846 13.1308C17.8578 13.1308 16.6154 11.8883 16.6154 10.3616C16.6154 8.8348 17.8578 7.59234 19.3846 7.59234C20.9114 7.59234 22.1538 8.8348 22.1538 10.3616ZM20.3077 10.3616C20.3077 9.85296 19.8941 9.4385 19.3846 9.4385C18.8751 9.4385 18.4615 9.85296 18.4615 10.3616C18.4615 10.8702 18.8751 11.2847 19.3846 11.2847C19.8941 11.2847 20.3077 10.8702 20.3077 10.3616Z"
fill="var(--primary-colour)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.6923 7.59234C15.6923 9.62865 14.0363 11.2847 12 11.2847C9.96366 11.2847 8.30766 9.62865 8.30766 7.59234C8.30766 5.55603 9.96366 3.90002 12 3.90002C14.0363 3.90002 15.6923 5.55603 15.6923 7.59234ZM13.8461 7.59234C13.8461 6.57418 13.0181 5.74618 12 5.74618C10.9818 5.74618 10.1538 6.57418 10.1538 7.59234C10.1538 8.6105 10.9818 9.4385 12 9.4385C13.0181 9.4385 13.8461 8.6105 13.8461 7.59234Z"
fill="var(--primary-colour)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.84616 10.3616C1.84616 11.8884 3.08862 13.1309 4.61539 13.1309C6.14217 13.1309 7.38463 11.8884 7.38463 10.3616C7.38463 8.83485 6.14217 7.59239 4.61539 7.59239C3.08862 7.59239 1.84616 8.83485 1.84616 10.3616ZM3.69231 10.3616C3.69231 9.85301 4.10585 9.43854 4.61539 9.43854C5.12493 9.43854 5.53847 9.85301 5.53847 10.3616C5.53847 10.8702 5.12493 11.2847 4.61539 11.2847C4.10585 11.2847 3.69231 10.8702 3.69231 10.3616Z"
fill="var(--primary-colour)"
/>
</svg>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.6923 7.59234C15.6923 9.62865 14.0363 11.2847 12 11.2847C9.96366 11.2847 8.30766 9.62865 8.30766 7.59234C8.30766 5.55603 9.96366 3.90002 12 3.90002C14.0363 3.90002 15.6923 5.55603 15.6923 7.59234ZM13.8461 7.59234C13.8461 6.57418 13.0181 5.74618 12 5.74618C10.9818 5.74618 10.1538 6.57418 10.1538 7.59234C10.1538 8.6105 10.9818 9.4385 12 9.4385C13.0181 9.4385 13.8461 8.6105 13.8461 7.59234Z"
fill="var(--primary-colour)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.84616 10.3616C1.84616 11.8884 3.08862 13.1309 4.61539 13.1309C6.14217 13.1309 7.38463 11.8884 7.38463 10.3616C7.38463 8.83485 6.14217 7.59239 4.61539 7.59239C3.08862 7.59239 1.84616 8.83485 1.84616 10.3616ZM3.69231 10.3616C3.69231 9.85301 4.10585 9.43854 4.61539 9.43854C5.12493 9.43854 5.53847 9.85301 5.53847 10.3616C5.53847 10.8702 5.12493 11.2847 4.61539 11.2847C4.10585 11.2847 3.69231 10.8702 3.69231 10.3616Z"
fill="var(--primary-colour)"
/>
</svg>`,
watchTogether_active: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 10.5556C14.0363 10.5556 15.6923 8.86122 15.6923 6.77778C15.6923 4.69433 14.0363 3 12 3C9.96369 3 8.30769 4.69433 8.30769 6.77778C8.30769 8.86122 9.96369 10.5556 12 10.5556ZM19.3846 12.4445C20.9114 12.4445 22.1538 11.1732 22.1538 9.61112C22.1538 8.04901 20.9114 6.77779 19.3846 6.77779C17.8578 6.77779 16.6154 8.04901 16.6154 9.61112C16.6154 11.1732 17.8578 12.4445 19.3846 12.4445ZM7.38461 9.61112C7.38461 11.1732 6.14215 12.4445 4.61538 12.4445C3.08861 12.4445 1.84615 11.1732 1.84615 9.61112C1.84615 8.04901 3.08861 6.77779 4.61538 6.77779C6.14215 6.77779 7.38461 8.04901 7.38461 9.61112ZM23.0769 19.0556C23.5874 19.0556 24 18.6324 24 18.1111C24 15.5073 21.9295 13.3889 19.3846 13.3889C18.35 13.3889 17.3624 13.742 16.5603 14.3765C15.537 13.3324 14.1743 12.6363 12.6587 12.4786C12.4421 12.456 12.2223 12.4444 12 12.4444C11.7774 12.4444 11.5573 12.456 11.3404 12.4786C9.82514 12.6366 8.46284 13.3326 7.43968 14.3765C6.63758 13.742 5.65002 13.3889 4.61539 13.3889C2.07046 13.3889 1.90735e-06 15.5073 1.90735e-06 18.1111C1.90735e-06 18.6324 0.412617 19.0556 0.923079 19.0556H5.53846C5.53846 19.5769 5.95108 20 6.46154 20H17.5385C17.6023 20 17.6645 19.9934 17.7247 19.9808C18.1456 19.8927 18.4615 19.5117 18.4615 19.0556H23.0769Z"
fill="green"
/>
</svg>`,
watchTogether_active_interacting: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 10.5556C14.0363 10.5556 15.6923 8.86122 15.6923 6.77778C15.6923 4.69433 14.0363 3 12 3C9.96369 3 8.30769 4.69433 8.30769 6.77778C8.30769 8.86122 9.96369 10.5556 12 10.5556ZM19.3846 12.4445C20.9114 12.4445 22.1538 11.1732 22.1538 9.61112C22.1538 8.04901 20.9114 6.77779 19.3846 6.77779C17.8578 6.77779 16.6154 8.04901 16.6154 9.61112C16.6154 11.1732 17.8578 12.4445 19.3846 12.4445ZM7.38461 9.61112C7.38461 11.1732 6.14215 12.4445 4.61538 12.4445C3.08861 12.4445 1.84615 11.1732 1.84615 9.61112C1.84615 8.04901 3.08861 6.77779 4.61538 6.77779C6.14215 6.77779 7.38461 8.04901 7.38461 9.61112ZM23.0769 19.0556C23.5874 19.0556 24 18.6324 24 18.1111C24 15.5073 21.9295 13.3889 19.3846 13.3889C18.35 13.3889 17.3624 13.742 16.5603 14.3765C15.537 13.3324 14.1743 12.6363 12.6587 12.4786C12.4421 12.456 12.2223 12.4444 12 12.4444C11.7774 12.4444 11.5573 12.456 11.3404 12.4786C9.82514 12.6366 8.46284 13.3326 7.43968 14.3765C6.63758 13.742 5.65002 13.3889 4.61539 13.3889C2.07046 13.3889 1.90735e-06 15.5073 1.90735e-06 18.1111C1.90735e-06 18.6324 0.412617 19.0556 0.923079 19.0556H5.53846C5.53846 19.5769 5.95108 20 6.46154 20H17.5385C17.6023 20 17.6645 19.9934 17.7247 19.9808C18.1456 19.8927 18.4615 19.5117 18.4615 19.0556H23.0769Z"
fill="var(--primary-colour)"
/>
</svg>`,
livelike: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7 11C7 10.448 7.448 10 8 10C8.552 10 9 10.448 9 11C9 11.552 8.552 12 8 12C7.448 12 7 11.552 7 11ZM12 10C11.448 10 11 10.448 11 11C11 11.552 11.448 12 12 12C12.552 12 13 11.552 13 11C13 10.448 12.552 10 12 10ZM16 10C15.448 10 15 10.448 15 11C15 11.552 15.448 12 16 12C16.552 12 17 11.552 17 11C17 10.448 16.552 10 16 10ZM20 16C20 16.551 19.551 17 19 17H8.554C8.011 17 7.477 17.148 7.01 17.428L4 19.234V6C4 5.449 4.449 5 5 5H19C19.551 5 20 5.449 20 6V16ZM19 3H5C3.346 3 2 4.346 2 6V21C2 21.36 2.194 21.693 2.507 21.87C2.66 21.957 2.83 22 3 22C3.178 22 3.356 21.953 3.515 21.857L8.039 19.143C8.195 19.049 8.373 19 8.554 19H19C20.654 19 22 17.654 22 16V6C22 4.346 20.654 3 19 3Z"
fill="white"
/>
</svg>`,
livelike_interacting: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7 11C7 10.448 7.448 10 8 10C8.552 10 9 10.448 9 11C9 11.552 8.552 12 8 12C7.448 12 7 11.552 7 11ZM12 10C11.448 10 11 10.448 11 11C11 11.552 11.448 12 12 12C12.552 12 13 11.552 13 11C13 10.448 12.552 10 12 10ZM16 10C15.448 10 15 10.448 15 11C15 11.552 15.448 12 16 12C16.552 12 17 11.552 17 11C17 10.448 16.552 10 16 10ZM20 16C20 16.551 19.551 17 19 17H8.554C8.011 17 7.477 17.148 7.01 17.428L4 19.234V6C4 5.449 4.449 5 5 5H19C19.551 5 20 5.449 20 6V16ZM19 3H5C3.346 3 2 4.346 2 6V21C2 21.36 2.194 21.693 2.507 21.87C2.66 21.957 2.83 22 3 22C3.178 22 3.356 21.953 3.515 21.857L8.039 19.143C8.195 19.049 8.373 19 8.554 19H19C20.654 19 22 17.654 22 16V6C22 4.346 20.654 3 19 3Z"
fill="var(--primary-colour)"
/>
</svg>`,
livelike_active: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 12C15.448 12 15 11.552 15 11C15 10.448 15.448 10 16 10C16.552 10 17 10.448 17 11C17 11.552 16.552 12 16 12ZM12 12C11.448 12 11 11.552 11 11C11 10.448 11.448 10 12 10C12.552 10 13 10.448 13 11C13 11.552 12.552 12 12 12ZM8 12C7.448 12 7 11.552 7 11C7 10.448 7.448 10 8 10C8.552 10 9 10.448 9 11C9 11.552 8.552 12 8 12ZM19 3H5C3.346 3 2 4.346 2 6V21C2 21.36 2.194 21.693 2.507 21.87C2.66 21.957 2.83 22 3 22C3.178 22 3.356 21.953 3.515 21.857L8.039 19.143C8.195 19.049 8.373 19 8.554 19H19C20.654 19 22 17.654 22 16V6C22 4.346 20.654 3 19 3Z"
fill="green"
/>
</svg>`,
livelike_active_interacting: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 12C15.448 12 15 11.552 15 11C15 10.448 15.448 10 16 10C16.552 10 17 10.448 17 11C17 11.552 16.552 12 16 12ZM12 12C11.448 12 11 11.552 11 11C11 10.448 11.448 10 12 10C12.552 10 13 10.448 13 11C13 11.552 12.552 12 12 12ZM8 12C7.448 12 7 11.552 7 11C7 10.448 7.448 10 8 10C8.552 10 9 10.448 9 11C9 11.552 8.552 12 8 12ZM19 3H5C3.346 3 2 4.346 2 6V21C2 21.36 2.194 21.693 2.507 21.87C2.66 21.957 2.83 22 3 22C3.178 22 3.356 21.953 3.515 21.857L8.039 19.143C8.195 19.049 8.373 19 8.554 19H19C20.654 19 22 17.654 22 16V6C22 4.346 20.654 3 19 3Z"
fill="var(--primary-colour)"
/>
</svg>`
}