mirror of
https://github.com/lipis/flag-icons.git
synced 2026-04-26 01:15:55 +03:00
[GH-ISSUE #1265] Showing flags in dev & production #583
Labels
No labels
3rd-party
3rd-party
bug
code
documentation
enhancement
fixed-in-master
flag-request
help needed
missing-flag
missing-flag
pull-request
wrong-flag
wrong-flag
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/flag-icons#583
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @dapehe94 on GitHub (Jun 14, 2024).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1265
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 commented on GitHub (Jun 19, 2024):
i have the same issue, i have the css import but it's just not displaying with 0 width and height
@dapehe94 commented on GitHub (Jun 25, 2024):
Any idea?
@dapehe94 commented on GitHub (Jul 3, 2024):
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 commented on GitHub (Jul 4, 2024):
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 commented on GitHub (Jul 4, 2024):
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:
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 commented on GitHub (Jul 4, 2024):
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 commented on GitHub (Jul 4, 2024):
@lipis just FYI on above comments:
@dapehe94 commented on GitHub (Jul 4, 2024):
@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 commented on GitHub (Jul 4, 2024):
@markvantilburg My css file looks exactly like that. Thxs!
@dapehe94 commented on GitHub (Jul 4, 2024):
Important, I'm using Vite:
import 'flag-icons'; in my main.js.
@BruneXX commented on GitHub (Jul 5, 2024):
@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: https://github.com/lipis/flag-icons/issues/1276
@BruneXX commented on GitHub (Jul 5, 2024):
Got it, from my side in angular I'm adding that in the configuration file like the following:
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 commented on GitHub (Oct 3, 2024):
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?
@lipis commented on GitHub (Jan 16, 2025):
Not sure what else we can do about it..
@fsmeier commented on GitHub (Jul 3, 2025):
i am having the same problem with using the flag-icons together with astro :/ can we please reopen the thread?