search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

Add Vue.js slot for custom arrow icon #1854

Closed slivos closed 2 weeks ago

slivos commented 3 weeks ago

Plugin version

v24.6.0

Steps to reproduce

  1. Add possibility to use custom arrow icons with vue slots

Expected behaviour

Use slot for rendering custom arrow icon

Actual behaviour

Any slots available

Initialisation options

utilsScript

jackocnr commented 2 weeks ago

Could you not just use the existing div with class .iti__arrow and use CSS to style it how you want e.g. style your own CSS triangle, or use CSS to add your custom background image? Note that the class iti__arrow--up is added when the dropdown is open, so you can also handle that situation if you like.

jackocnr commented 2 weeks ago

As I just commented in a similar issue (linked above), 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 your options are: use a background image with CSS, or if you want to change the markup in some way (e.g. to use an SVG), you would have to inject the SVG into the DOM yourself, after initialisation.