Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat Request] Use different svg sources #36

Open
KingDarBoja opened this issue Sep 2, 2020 · 2 comments
Open

[Feat Request] Use different svg sources #36

KingDarBoja opened this issue Sep 2, 2020 · 2 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed PR Welcome

Comments

@KingDarBoja
Copy link
Contributor

KingDarBoja commented Sep 2, 2020

Is your feature request related to a problem? Please describe.
The library uses svg-country-flags package to load the svg flags into the dropdown selector but not all the flags have the same ratio, which can be desired on some projects.

Describe the solution you'd like
Would be great to customise the package used for loading and/or rendering svgs on the selector. Some options are listed below:

  • flag-icon-css which brings squared flags (1x1) and rectangle ones (4x3) while keeping the same size for all.
  • twemoji which brings lightweight svg icons in exchange of details, which can be seen here.

Maybe as an alternative library but published with a suffix like @angular-material-extensions/select-country-twemoji?

@AnthonyNahas AnthonyNahas self-assigned this Sep 3, 2020
@AnthonyNahas AnthonyNahas added enhancement New feature or request help wanted Extra attention is needed PR Welcome labels Sep 3, 2020
@KingDarBoja
Copy link
Contributor Author

For anyone willing to do this, the twemoji library has the flags starting from 1f1e6-1f1e8.svg to 1f1ff-1f1fc.svg, with a total size of 664 KB.

@KingDarBoja
Copy link
Contributor Author

Hey @AnthonyNahas

I have been working on a custom component that can be customized with different icon sources for country flags based on this feature, it is a work in progress but it supports already Twemoji icons and tree-shakable on lazy-loaded modules: NgxCountryFlagIcons

The main idea would be shipping only the icon set you want to use (so far, only Twemoji supported) and register those at the module to use.

I will be including the flag-icon-css pack this week and probably the official flags from svg-country-flags.

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed PR Welcome
Projects
None yet
Development

No branches or pull requests

2 participants