fix(icons): fixed the various icon viewbox issues

[ArtBlue]

• Fixes bug: incorrect icon viewports #564

Description

Fixed 9 icons with incorrect viewBox attributes in their source SVG files. All changes have been verified with the automated validation script.

Files Fixed

Group 1: Swapped ViewBoxes (4 files)

Arrows Expand Icons:

• ✅ icon-arrows-expand-16.svg - Changed from 24x24 to 16x16
• ✅ icon-arrows-expand-24.svg - Changed from 16x16 to 24x24

Feedback Error Icons:

• ✅ icon-feedback-error-16.svg - Changed from 24x24 to 16x16
• ✅ icon-feedback-error-24.svg - Changed from 16x16 to 24x24

Group 2: Off-by-One Errors (4 files) - ⚠️ NEED TO VERIFY WITH DESIGN

• ✅ icon-close-12.svg - Changed from 13x12 to 12x12
• ✅ icon-fingerprint-64.svg - Changed from 65x64 to 64x64
• ✅ icon-trend-down-16-fit.svg - Changed from 13x16 to 16x16
• ✅ icon-trend-up-16-fit.svg - Changed from 13x16 to 16x16

Group 3: Wrong Size Used (1 file) - ⚠️ NEED TO VERIFY WITH DESIGN

• ✅ icon-spinner-20.svg - Changed from 16x16 to 20x20

Validation Script Updates

Added automated viewBox validation to packages/skin/scripts/generate-images.ts:

What it does:

• Extracts expected size from icon filename (e.g., -16, -24)
• Compares against actual viewBox dimensions
• Warns when mismatches are detected
• Runs automatically during npm run build:icons

Exclusions (intentional non-square icons):

• Icons with -colored suffix (payment methods with specific aspect ratios)
• Icons with -logo in filename (brand marks)
• Icons starting with icon-psa (PSA brand-specific dimensions)

Example output:

npm run build:icons
# ✅ No viewBox mismatches detected!

Impact

These fixes ensure:

• Icons render at correct scale
• No cropping or distortion
• Proper alignment with UI elements
• Responsive sizing works as expected

Testing

Run the build script to verify:

cd packages/skin
npm run build:icons

The script will flag any new viewBox mismatches going forward.

Checklist

• I verify all changes are within scope of the linked issue
• I added/updated/removed testing (Storybook in Skin) coverage as appropriate

• I tested the UI in all supported browsers
• I tested the UI in dark mode and RTL mode

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9cd400b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull request overview

Fixes 9 icons with incorrect viewBox attributes where viewBoxes were swapped, off-by-one, or wrong size. Also adds a viewBox validation check to the icon build script to prevent future regressions.

Changes:

• Fixed swapped viewBox/path data for arrows-expand and feedback-error icon pairs (16↔24)
• Corrected off-by-one and wrong-size viewBox values for close-12, fingerprint-64, trend-down-16-fit, trend-up-16-fit, and spinner-20
• Added viewBox mismatch detection in generate-images.ts build script

Reviewed changes

Copilot reviewed 3 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/skin/src/svg/icon/*.svg (9 files)	Fixed viewBox attributes in source SVG files
packages/skin/src/svg/icons.svg	Updated combined icons SVG with corrected viewBoxes and paths
packages/skin/dist/svg/icons.svg	Regenerated dist combined icons SVG
packages/skin/dist/svg/icon/*.svg (9 files)	Regenerated dist individual icon SVGs
src/tags/master-icons.marko	Updated Marko template with corrected viewBoxes and paths
src/data/icons.json	Updated icon metadata (width/height) to match corrected viewBoxes
packages/skin/scripts/generate-images.ts	Added viewBox validation during icon build