Custom tab icons for narrow screen


#1

Hi,

I have register 2 custom tabs with SVG icons this way:

function youtubeTab(container, button, dialogApi, settings) {
button[ 0 ].innerHTML = '<svg class=“uploadcare–icon uploadcare–menu__icon uploadcare–menu__icon–custom uploadcare–menu__icon–youtube” … ';



}

My icons work perfectly for a dialog on a wide screen, but when screen is narrower than 760px and design has changed for mobile version, I see empty grey squares under or choose from label.

Please see attached screenshots.
Do I need to register mu custom buttons in one more place for the responsive layout?

Can you help me with the issue?

Andrew


#2

this is how it works of wide screen


#3

Hi @Andrii-A,

Can you share your code snippet via CodePen or JsFiddle so that I can look into it and try to figure out what’t going wrong?


#4

Please see: Crop image to circle.

Icon is visible when there is Desctop Desigh


#5

No icon when here:


#6

@Andrii-A In your code, button[0] represents only the button in the side menu of the widget. I suggest adding an SVG in your HTML with a symbol tab like described in the custom tab manual. See the live demo here: Custom SVG Icon


#7

Hi Alex,

Yes, we have tried this approach and found it is not ideal for our needs.
We have a large app with a lot of components, about 450 svg icons in the library and 2 custom tabs in Uploadcare widget,

In our case, the best way would be to assign the icons (from our lib) in the same function where we create tabs, otherwise it won’t be clear, what is the relationship between the tabs and the icons.

Can you please suggest another way to solve the issue?


#8

@Andrii-A Using SVG with the symbol tag is the correct way to set a custom icon for a custom tab. You can try to extract the path element from your SVG, then create a new SVG element that contains the symbol tag with the proper ID and the path from the original SVG. Then you attach this SVG to the container[0] element. This should work.

@ag1 Alex, do you have any thoughts on this?