[GH-ISSUE #519] Angular 6/7 build #312

New issue

Closed

opened 2026-03-03 14:37:26 +03:00 by kerem · 2 comments

kerem commented

2026-03-03 14:37:26 +03:00

Owner

Originally created by @P3tronius on GitHub (Jan 8, 2019).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/519

While building with angular (ng build --prod), the svg are written directly in public/dist.
This is a different behaviour than the other libraries (I mean, these svg are the only one written directly in public/dist, all the other resources from other libs are directly bundled in the js/css files).
Is there a way to change this?
I've tried to add the library in my project through different ways, with the same result :

In my component scss file using @import
In my component ts file with styleUrls
In angular.json styles array

Thanks,

Originally created by @P3tronius on GitHub (Jan 8, 2019). Original GitHub issue: https://github.com/lipis/flag-icons/issues/519 While building with angular (ng build --prod), the svg are written directly in public/dist. This is a different behaviour than the other libraries (I mean, these svg are the only one written directly in public/dist, all the other resources from other libs are directly bundled in the js/css files). Is there a way to change this? I've tried to add the library in my project through different ways, with the same result : - In my component scss file using @import - In my component ts file with styleUrls - In angular.json styles array Thanks,

kerem closed this issue

2026-03-03 14:37:26 +03:00

kerem commented

2026-03-03 14:37:27 +03:00

Author

Owner

@P3tronius commented on GitHub (Jan 8, 2019):

Well, I've found an (ugly) workaround:
In angular.json, add

{
	"glob": "*.svg",
	"input": "node_modules/flag-icon-css/flags/4x3/",
	"output": "images/flags"
}

And in your component's scss,

$flag-icon-css-path: '/images/flags' !default;
$flag-icon-rect-path: '' !default;
@import "~flag-icon-css/sass/flag-icon";

I'm only using 4x3 icons so I didn't included 1x1.

@P3tronius commented on GitHub (Jan 8, 2019): Well, I've found an (ugly) workaround: In angular.json, add ``` { "glob": "*.svg", "input": "node_modules/flag-icon-css/flags/4x3/", "output": "images/flags" } ``` And in your component's scss, ``` $flag-icon-css-path: '/images/flags' !default; $flag-icon-rect-path: '' !default; @import "~flag-icon-css/sass/flag-icon"; ``` I'm only using 4x3 icons so I didn't included 1x1.

kerem commented

2026-03-03 14:37:27 +03:00

Author

Owner

@MiguelRozalen commented on GitHub (Jan 16, 2019):

Hi @Petronious i don't know in which part of angular.json put your solution... Can u help me?

--EDIT:

I finally fixed it. Your solution works like black magic! I got it put your info inside assets object:

"assets": [
     "src/assets",
     "src/favicon.ico",
     {
         "glob": "*.svg",
         "input": "node_modules/flag-icon-css/flags/4x3/",
          "output": "assets/flags/4x3/"
    },
    {
         "glob": "*.svg",
         "input": "node_modules/flag-icon-css/flags/1x1/",
          "output": "assets/flags/1x1/"
   }
],

Then in my app style .scss:

$flag-icon-css-path: '/assets/flags' !default;
$flag-icon-rect-path: '/4x3' !default;
$flag-icon-square-path: '/1x1' !default;

And got it YEAH!

@MiguelRozalen commented on GitHub (Jan 16, 2019): Hi @Petronious i don't know in which part of angular.json put your solution... Can u help me? --EDIT: I finally fixed it. Your solution works like black magic! I got it put your info inside assets object: ``` "assets": [ "src/assets", "src/favicon.ico", { "glob": "*.svg", "input": "node_modules/flag-icon-css/flags/4x3/", "output": "assets/flags/4x3/" }, { "glob": "*.svg", "input": "node_modules/flag-icon-css/flags/1x1/", "output": "assets/flags/1x1/" } ], ``` Then in my app style .scss: ``` $flag-icon-css-path: '/assets/flags' !default; $flag-icon-rect-path: '/4x3' !default; $flag-icon-square-path: '/1x1' !default; ``` And got it YEAH!

kerem referenced this issue

2026-03-03 14:40:34 +03:00

[PR #312] [CLOSED] Feature/singapore #749