search

ekwonye-richard / react-flags-select

Customizable svg flags select components for React Js
197 stars 121 forks source link

None of the flag icons are not displaying in the select dropdown #35

Closed spitchaiah closed 3 years ago

spitchaiah commented 5 years ago

Hello Team,

Thanks for creating this library to display countries list along with their flag icons. I'm trying to get this 'react-flags-select' library working in our app but for some reason, in the select dropdown it only displays countries list and not the flag icons. I'm guessing I'm missing something basic here. Here's what i did so far:

  1. npm install react-flags-select --save
  2. In one of our components, imported this: import ReactFlagsSelect from 'react-flags-select';
  3. Have attached the screenshot of the select dropdown below.

image

Chrome Dev Tools:

  1. On the chrome Dev tools under 'Source' tab (Page > webpack:// ), I could see the all svgs loaded but still the flag icons wont display. Also, I tried installing new svg loader from here https://www.npmjs.com/package/svg-inline-loader but still its not working.

image

  1. Upon clicking the dropdown in the UI, on the network tab in Dev Tools, I see many URLs(i guess corresponding to countries) like this:

http://localhost:3000/payments/%3Csvg%20viewBox=%220%200%20512%20336%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill=%22none%22%3E%3Cpath%20d=%22M503.172%20335.724H8.828A8.829%208.829%200%200%201%200%20326.896V9.104A8.829%208.829%200%200%201%208.828.276h494.345a8.829%208.829%200%200%201%208.828%208.828v317.792a8.83%208.83%200%200%201-8.829%208.828z%22%20fill=%22

Configs: Reactjs: 16.5.x Webpack: 3.5.5 OS: Mac-Mojave

spitchaiah commented 5 years ago

Any inputs or suggestions please for this issue ? thanks!

ekwonye-richard commented 5 years ago

Hi @spitchaiah I'm working on a new version of this Library that resolves most of this issues. 🙏🏾

spitchaiah commented 5 years ago

Thanks much Richard for the update! Appreciate it.

spitchaiah commented 5 years ago

@ekwonye-richard : Any idea on when we can expect the fix for this issue? thank you!

cipick commented 4 years ago

@spitchaiah it seems to work with this loader https://github.com/bhovhannes/svg-url-loader

dayoolacodes commented 3 years ago

Hello Richard, Pls has this been fixed?

ekwonye-richard commented 3 years ago

This issue has been resolved in v2 which now renders the flags as SVGs