starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-27 01:46:02 +03:00

[GH-ISSUE #1082] all svgs are in the dist folder #510

New issue

Closed

opened 2026-03-03 14:38:54 +03:00 by kerem · 8 comments

kerem commented

2026-03-03 14:38:54 +03:00

Owner

Originally created by @bogdanIuga on GitHub (Jan 29, 2023).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1082

Can i set a default folder for all the flags *.svg?

Now they are all in the dist folder upon production build, which is kinda annoying. Would like to place them in the assets/flags or something

Originally created by @bogdanIuga on GitHub (Jan 29, 2023). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1082 Can i set a default folder for all the flags *.svg? Now they are all in the dist folder upon production build, which is kinda annoying. Would like to place them in the assets/flags or something

kerem closed this issue

2026-03-03 14:38:54 +03:00

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@lrljoe commented on GitHub (Feb 28, 2023):

All configurable depending on your packaging / webpack / deployment tool. Would need more detail to advise!

@lrljoe commented on GitHub (Feb 28, 2023): All configurable depending on your packaging / webpack / deployment tool. Would need more detail to advise!

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@kzimny commented on GitHub (Mar 22, 2023):

Thank you for the great package! I have the same question, in my project only 3 flags are needed. After ng build production all flags are saved as svg files in dist folder. Is there an option to define flags that are needed? Would be great.

@kzimny commented on GitHub (Mar 22, 2023): Thank you for the great package! I have the same question, in my project only 3 flags are needed. After `ng build production` all flags are saved as svg files in dist folder. Is there an option to define flags that are needed? Would be great.

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@lrljoe commented on GitHub (Mar 24, 2023):

Yes, edit flag-icons-list.less and build again.

@lrljoe commented on GitHub (Mar 24, 2023): Yes, edit flag-icons-list.less and build again.

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@kzimny commented on GitHub (Mar 28, 2023):

This is how custom flag icons list works in my project. Import variables and flag-icons-base from flag-icons package to styles.scss and define your own flag-icons-list.
my own styles.scss

// Import flags with custom flag-icons-list
@import "../../node_modules/flag-icons/sass/variables";
@import "../../node_modules/flag-icons/sass/flag-icons-base";
@import "../../src/styles/flags/flag-icons-list"

src/styles/flags/flag-icons-list

@if variable-exists(flag-icons-included-countries) {
    @each $country in $flag-icons-included-countries {
      @include flag-icon($country);
    }
  } @else {
    @include flag-icon(fr);
    @include flag-icon(de);
    @include flag-icon(gb);
  }

@kzimny commented on GitHub (Mar 28, 2023): This is how custom flag icons list works in my project. Import variables and flag-icons-base from flag-icons package to styles.scss and define your own flag-icons-list. **my own styles.scss** ``` // Import flags with custom flag-icons-list @import "../../node_modules/flag-icons/sass/variables"; @import "../../node_modules/flag-icons/sass/flag-icons-base"; @import "../../src/styles/flags/flag-icons-list" ``` **src/styles/flags/flag-icons-list** ``` @if variable-exists(flag-icons-included-countries) { @each $country in $flag-icons-included-countries { @include flag-icon($country); } } @else { @include flag-icon(fr); @include flag-icon(de); @include flag-icon(gb); } ```

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@Palocay commented on GitHub (Jun 5, 2023):

This is how custom flag icons list works in my project. Import variables and flag-icons-base from flag-icons package to styles.scss and define your own flag-icons-list. my own styles.scss
// Import flags with custom flag-icons-list
@import "../../node_modules/flag-icons/sass/variables";
@import "../../node_modules/flag-icons/sass/flag-icons-base";
@import "../../src/styles/flags/flag-icons-list"
src/styles/flags/flag-icons-list
@if variable-exists(flag-icons-included-countries) {
    @each $country in $flag-icons-included-countries {
      @include flag-icon($country);
    }
  } @else {
    @include flag-icon(fr);
    @include flag-icon(de);
    @include flag-icon(gb);
  } 

Unfortunately this does not work for me, any idea how I could solve this? I do exactly what you do. I import "variables" and "flag-icons-base" and then my custom flag-icons-list.

@Palocay commented on GitHub (Jun 5, 2023): > This is how custom flag icons list works in my project. Import variables and flag-icons-base from flag-icons package to styles.scss and define your own flag-icons-list. **my own styles.scss** > > ``` > // Import flags with custom flag-icons-list > @import "../../node_modules/flag-icons/sass/variables"; > @import "../../node_modules/flag-icons/sass/flag-icons-base"; > @import "../../src/styles/flags/flag-icons-list" > ``` > > **src/styles/flags/flag-icons-list** > > ``` > @if variable-exists(flag-icons-included-countries) { > @each $country in $flag-icons-included-countries { > @include flag-icon($country); > } > } @else { > @include flag-icon(fr); > @include flag-icon(de); > @include flag-icon(gb); > } > ``` Unfortunately this does not work for me, any idea how I could solve this? I do exactly what you do. I import "variables" and "flag-icons-base" and then my custom flag-icons-list.

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@kzimny commented on GitHub (Jun 5, 2023):

That how it works in my project

@kzimny commented on GitHub (Jun 5, 2023): ![image](https://github.com/lipis/flag-icons/assets/12007674/e299a246-67ed-4e75-869f-fb1e589c0fbf) That how it works in my project

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@Palocay commented on GitHub (Jun 5, 2023):

Okay, I guess the custom flag-icon-list seems to work, because when I check the result, the style.css only contains the flags I need. But the problem seems to be, that the actual flag SVG-Files can't be found, since they are located in the node_modules folder. Any idea on how to fix this?

@Palocay commented on GitHub (Jun 5, 2023): Okay, I guess the custom flag-icon-list seems to work, because when I check the result, the style.css only contains the flags I need. But the problem seems to be, that the actual flag SVG-Files can't be found, since they are located in the node_modules folder. Any idea on how to fix this?

kerem commented

2026-03-03 14:38:55 +03:00

Author

Owner

@kzimny commented on GitHub (Jun 5, 2023):

At development time with ng serve they are coming from node_modules but when you compile for production icons are rendered as svg and saved with all other client app files

@kzimny commented on GitHub (Jun 5, 2023): At development time with ng serve they are coming from node_modules but when you compile for production icons are rendered as svg and saved with all other client app files