Showing flags in dev & production

[dapehe94]

Hello
I am having a strange problem displaying the flags. I have installed the package via npm and imported the css.
When I run npm run dev, the flags are not displayed :-( on the other hand if I run npm run build, some flags are displayed and some are not :-(
Does anyone know where the problem can come from
Thanks

[yongyi520]

i have the same issue, i have the css import but it's just not displaying with 0 width and height

[dapehe94]

Any idea?

[dapehe94]

Hello
I still have this problem, after running npm run build, I notice the difference in the css code between the flags that are visible and those that are not.

For example, the flag of Colombia, is perfectly visible and the ccs code looks like this:

On the other hand, the flag of Spain, is not seen and the css code looks like this:

Here i obtain a 404 not found file.

I still do not understand why this occurs :-(

I would appreciate a solution

Regards

[markvantilburg]

It looks some sort of optimizer/compiler that creates these files and inlines svg in the css file.

The normal css file looks like this:
https://github.com/lipis/flag-icons/blob/main/css/flag-icons.css

Your css does not match that at all.

[BruneXX]

Hi Guys, maybe this is not the correct topic but I'm using this library with Angular and I want to avoid (at compilation time) that angular build generates all the svg files in the root folder, do you know if there's any way to move all those *.svg files to a folder? in order to be used like:

/flags/*.svg files

My idea is to have this structure:
./project/assets/flags/*.svg
./project/project_file1.js
./project/project_file2.js
./project/project_fileN.js

Please let me know if the library allows that, thanks!

[BruneXX]

Hi @markvantilburg regarding @dapehe94 comment, it will be possible to add a way to set an absolute path for the flags svg files instead as an alternative to those relative paths? maybe a new lib feature to achieve that?

I think that will probably solve the problem that I've with the angular build setting all the flag images in the root folder of the build...

I'll appreciate to hear from you an this, thanks!

[BruneXX]

@lipis just FYI on above comments:

• Showing flags in dev & production #1265 (comment)
• Showing flags in dev & production #1265 (comment)

[dapehe94]

@BruneXX I would appreciate if you could open a specific thread for your problem, I think it has nothing to do with the one I have. Thank you.

[dapehe94]

@markvantilburg My css file looks exactly like that. Thxs!

[dapehe94]

Important, I'm using Vite:
import 'flag-icons'; in my main.js.

[BruneXX]

@markvantilburg @dapehe94 @lipis I've reported a new task/issue/feature for the compilation assets issue that I'm facing, maybe you know an easy way to tackle this: #1276

[BruneXX]

Important, I'm using Vite: import 'flag-icons'; in my main.js.

Got it, from my side in angular I'm adding that in the configuration file like the following:

"styles": [
  "src/styles.scss",
  "./node_modules/flag-icons/css/flag-icons.min.css"
],

so easy piece, but the problem is that I've no way (since I think this need to be changed from this package) to set all svg files in a specific folder to avoid have loooot of files in the root of the compiled project.

[NotTsunami]

This is an interesting one, it's definitely an issue on the side of the asset generation or some sort of compiler. You mention using Vite, what other tooling and corresponding versions are you using? Is this an Angular project? Vue? React? Would you be able to provide your Vite config as well?