Request : Custom icon instead of default globe + arrow

[gorlanova]

Hi,

First of all, I love that library it's fantastic, thank you for all the work you put into it!

I'm building a component library for my company and I use your lib to create a custom phone input. I styled it so it matches our design system, but I still miss a very small thing to make it perfect : the ability to inject custom icons for the globe and the arrow next to it, in the country select button.

Since I work with Vue, adding one slot for the globe and another slot for the icon seems doable, but I don't know about the other implementations (React and pure JS) so I hope it's feasible...

Being able to inject my own icons would be very useful:

• visual consistency (i use a certain set of icon across my library)
• ability to style them with several themes (specific colors, dark and light modes, etc), dynamically with global app state

Thank you again Have a nice day!

PS: It's not an issue, but more of a request, I didn't put any step to reproduce, if anything is missing please tell me I will try and provide what is needed

[gorlanova]

I understand another issue very similar to this one exists, but since I asked for another slot on top of the arrow I thought I should create a new issue. If redundant, sorry about that

[jackocnr]

Hi there, did you see my response here: https://github.com/jackocnr/intl-tel-input/issues/1854

That you can use the class(es) to add your own background image with CSS? The same is true for the globe icon.

[gorlanova]

Hello @jackocnr thank you for getting back to me!

I saw your response, and unfortunately that would not fit my needs, as what I would like to be able to do is use a custom icon from an icon font (like for example, font awesome)

They're svgs and I have my own Icon component using an icon font, that would allow me to:

• style the icon with the theme (change its color depending on the accent color on the app, which can be a custom color chosen by the component library user, light and dark mode, etc.)
• make sure the icon design is consistent with the other icons in my components
• allow for RTL icons when the app is RTL
• allow for a very easy change if the library user wants to chose another icon instead of the default one I would provide

For those reasons, slots would better suit my needs instead of providing n images for every possible situation

I understand it's a very specific request and it might not be a priority, I just wanted to bring it up in case you think about providing slots in the future (they would be much appreciated!)

[jackocnr]

I take your point about the SVG, but unfortunately the Vue component is just a thin wrapper around the pure JavaScript plugin, and so it has no way to impact how the markup is generated. So I think your options are: either convert your SVG to PNG and use it as a background image with CSS, or I suppose you could inject the SVG into the DOM yourself, after initialisation.