new command to combine all the svgs into a single svg file

[un33k]

Angular menu loads each icon individually and if service worker is not enabled, that is one call per country to the backend. It is so slow.

I am wondering if it is possible to do something like mdi, where they allow a single svg file for all the icons.

This way, there would be a single call to the backend to fetch all the flags.

Something like:

npm install -g svgexport imagemin-cli
npm run build-pngs -- 200 --combined=true:

[hampusborgos]

It is probably possible yes, you're thinking that each flag will be identified by an ID tag in a single SVG then?

[un33k]

@hjnilsson that is correct.

// usage: if we had a single flags.svg
<mat-icon svgIcon="ca"></mat-icon>
<mat-icon svgIcon="us"></mat-icon>

Here you see how Angular material is used to register multiple flags svg(s) vs. a single icon svg (mdi.svg).

Sadly, one trip to the backend is required for each svg.

[wyattoday]

There are lots of tools that take separate images and combines them to create a single sprite. Rather than re-create that work here, just use google to find one of the tools.

Here's one example: https://github.com/svg-sprite/svg-sprite

[wyattoday]

OK, there are tools to handle this. I linked to one. Google for others.

[OzBob]

duplicate of #13

[OzBob]

partially completed in this PR - Anyone want to fix it? #122

Fork: https://github.com/Ryszard-Trojnacki/country-flags/

[wyattoday]

@OzBob

The code was broken (on Windows at the very least). Also, there's limited applicability for this code.

Rather than creating specialized scripts that will likely break (I'm not going to maintain it), just use generalized open source projects that already accomplish what you're looking for (see above)