[QUESTION] How to change flags size in newer version

[Bartek20]

Plugin version

latest code from github (v25.2.1)

Question

What files do I have to modify to build flag images with changed sizes? Documentation on website looks outdated (https://intl-tel-input.com/examples/large-flags.html). Files described in it doesn't exist in latest source code.

• grunt/responsive_images.js - missing (is it grunt/generate-sprite.js now?)
• update the width/height for the retina task - which file is it
• src/css/intlTelInput.scss - it takes width, height from _metadata.scss - which one do I modify?

[Bartek20]

Also side note: npm run build fails on typescript declaration generation with following error:

Running "shell:genTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" build/js/intlTelInput.d.ts
sed: can't read : No such file or directory
Use --force to continue.

Aborted due to warnings.

And here's what happens with npm run build -- --force (finishes build with errors):

Running "shell:genTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" build/js/intlTelInput.d.ts
sed: can't read : No such file or directory
 Used --force, continuing.

Running "shell:genReactTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p react/tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" react/build/IntlTelInput.d.ts
sed: can't read : No such file or directory
 Used --force, continuing.

[Bartek20]

Ok after some searching in code commits I found that I have to change flag height in grunt/generate-sprite.js and that generates new scss file.

Now the problem is that error:

Running "generate-sprite" task
1x combined images saved as build/img/flags.webp and build/img/flags.png
Error: Error: Processed image is too large for the WebP format
    at Sharp.toFile (/workspaces/intl-tel-input/node_modules/sharp/lib/output.js:90:19)
    at createSprite (/workspaces/intl-tel-input/grunt/generate-sprite.js:162:28)
    at generateFlagMetadataAndSprite (/workspaces/intl-tel-input/grunt/generate-sprite.js:103:15)

Warning: Processed image is too large for the WebP format Use --force to continue.

Aborted due to warnings.

It appears when flag height is bigger than 24px. (--force ignores error and finishes build without generating new images).

[jackocnr]

Sorry the info on the demo page is out of date. Please see discussion here: https://github.com/jackocnr/intl-tel-input/discussions/1926

As for the error you're seeing, I'm afraid I don't know about that - if you find a solution please share it here, or submit a pull request, thanks.

[Bartek20]

As for the error you're seeing, I'm afraid I don't know about that - if you find a solution please share it here, or submit a pull request, thanks.

I already created pull request with some fixes including fix for that error.

[jackocnr]

I've now updated the demo page instructions 👍🏻

https://intl-tel-input.com/examples/large-flags.html