Easy way to replace all icons used in uppy to fit design of website?

[hpvd]

uppy uses some icons/symbols...

=> Is there already an easy way to replace all icons used in uppy to fit design of website? e.g. to use fontaweome icons / a special substyle (solid, light) of it?

for each Icon there may be different variants but not all would fit in a good way to the icon set used on a website... e.g. https://fontawesome.com/icons?d=gallery&q=camera https://fontawesome.com/icons?d=gallery&q=checkmark https://fontawesome.com/icons?d=gallery&q=pencil

or different types of file type groups: https://fontawesome.com/icons?d=gallery&q=file&c=files

[arturi]

Not at the moment, no. I feel like we could allow changing the drag and drop arrow icon, or adding a custom logo to the Dashboard, but to allow changing all of the icons in the Dashboard would be a slightly complicated task, and not many users have asked for it so far.

Maybe we could place all icons is one object in an external file, and then you could override that via options, and pass you custom object with icons, like you do with locale strings 🤔

[arturi]

@nqst what do you think?

[nqst]

I think allowing custom icons would be rather a sophistication.

In the next design updates, we're going to use icons which should be versatile, and we have not so many options to change style: icons of the uploading options must have the same style as the glyphs of the services from which we can import files (e.g. Dropbox, Google Drive, Instagram). Some icons are going to be replaced with the text labels, to make Uppy more accessible, understandable and lightweight. So we'll have almost no icons to modify.

I'd prefer not to create a new option for this since it'll make Uppy more complicated. But if we could allow users to manually override an original icon file(s) without adding a new option, it might be nice.

[arturi]

Closing for now, we are not going to address this until 1.0, but we’ll keep the idea in mind. Thanks!

[danielsarin]

Kind of related, would you consider allowing custom elements as labels to make this possible? For example, in my case I'm using the react DragDrop component, and it would be neat if I could use another react component as a custom label. Then I could add a custom icon and hide the original arrow with css. Right now I can only add a custom string via the locale option.

I can actually kind of do this already, but the custom icon ends up outside the label. If I want it inside the label, I need to position it absolutely, but then then clicking the icon won't trigger the file selection action.

[abannach]

I found a "work around" for replacing the icons via CSS and using SVG. I'm using React and import my styles from .js files, but the concept is there for another implementation.

import myDeviceIcon from './images/my-device.svg'

.uppy-DashboardTab .uppy-DashboardTab-btn:not([aria-controls]) svg {
    display:none;
}
.uppy-DashboardTab .uppy-DashboardTab-btn:not([aria-controls])::before {
    content: url(${myDeviceIcon});
}

obviously replace your selector for the DashboardTab for whatever one you are trying to replace. Was able to do the same for the down arrow icon on the Dashboard.

[rubimayank]

Late to the party, but was this addressed?

[dominiceden]

Similarly to @abannach I found a way to do it in CSS and font icons. If you use visibility: hidden; on the original SVG icon then it retains its height and width in the document, leaving you a nice gap to put your own icon in. In my case, I wanted to replace the camera icon for a microphone icon as I only want to record audio:

button[aria-controls='uppy-DashboardContent-panel--Webcam'] > svg {
  visibility: hidden !important;
}

button[aria-controls='uppy-DashboardContent-panel--Webcam']:after {
  font-family: FontAwesome;
  content: '\f130';
  position: absolute;
  font-size: 26px;
  top: 13px;
}

[tarek-madani]

Similarly to @abannach I found a way to do it in CSS and font icons. If you use visibility: hidden; on the original SVG icon then it retains its height and width in the document, leaving you a nice gap to put your own icon in. In my case, I wanted to replace the camera icon for a microphone icon as I only want to record audio:

button[aria-controls='uppy-DashboardContent-panel--Webcam'] > svg {
  visibility: hidden !important;
}

button[aria-controls='uppy-DashboardContent-panel--Webcam']:after {
  font-family: FontAwesome;
  content: '\f130';
  position: absolute;
  font-size: 26px;
  top: 13px;
}

This worked perfectly for me. Thank you so much

[kvz]

I think this warrants a look by Artur when he's back from vacation, re-opening.

[josh7weaver]

Personally I only needed to change the color of the icon. If the icon were an inline

[Vercadium]

For what it's worth I just landed here after looking to customise the placeholder icons for file types in the dashboard component. In this case the SVG elements are hardcoded within getFileTypeIcon.js so even just exposing those to allow passing in our own would be pretty handy! 😍

[thehypergraph]

I'm new to using Uppy, so is there no way to set your own icons for the dashboard?

[joaobarcia]

We would love to use a custom icon on our project as well. We'll try one of the mentioned hacks, but having it natively supported would definitely be better.

[isBatak]

@joaobarcia you can also override it because DragDrop.renderArrowSvg is a static method. https://codesandbox.io/s/uppy-drag-and-drop-icon-6t9ct?file=/src/App.tsx But this is only for DragDrop component

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SharanReddi]

is there any workaround for this ?

[hpvd]

would vote for reopening this issue, since several users are interested in it :-)

btw: from: https://github.com/transloadit/uppy/issues/752#issuecomment-674835887

I think this warrants a look by Artur when he's back from vacation, re-opening. (@arturi)

did this happen?

[hpvd]

thanks for looking in it again!

to keep it in mind till solved/decided: maybe the labels should be changed to feature and triage ? (the improvement label seem to be nearly out of use)

[crnamatt]

I would like to love to have a way to have a component or call for each of the services, so that I could add the applicable services in my own dashboard attached to my own buttons, etc.

[abroojalil]

I would like to know if i can change background color of uppy inline dashboard by any means?

[Murderlon]

I would like to know if i can change background color of uppy inline dashboard by any means?

You can change the theme: https://uppy.io/docs/dashboard/#theme

[abroojalil]

@Murderlon thanks, but can I customise more? maybe change the text and bg color of my choice?

[Murderlon]

You could do that by targeting the elements and overriding the CSS. We don't expose a theme config.

[abroojalil]

@Murderlon could you share a sample, maybe?

[Murderlon]

You can inspect elements in the browser, copy the class name, and start overriding.

.uppy-Dashboard-inner {
  background: red !important;
}

[abroojalil]

@Murderlon thanks, it worked.