In React, I want to change the social media icons of the Cloudinary upload widget. Currently, it has one color icon but I want to use the same icon just like the real icon of (Facebook, google drive.. etc ) Check Image
Currently, there is no option to set a different color to each icon. However, you can change the color of the icon by setting the inactiveTabIcon
. For example:
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: '<cloud name>',
upload_preset: '<upload preset>',
styles: {
palette: {
window: "#CC7E7E",
windowBorder: "#90A0B3",
tabIcon: "#2C609A",
menuIcons: "#5A616A",
textDark: "#000000",
textLight: "#FFFFFF",
link: "#2C609A",
action: "#FF620C",
inactiveTabIcon: "#BF6958",
error: "#E83019",
inProgress: "#0078FF",
complete: "#299436",
sourceBg: "#BCC1C5"
}}
}, (error, result) => { if (result.event == "success") {
console.log(result.info) // result.info contains data from upload
} })
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>