Skip to content

Conversation

@chanpory
Copy link
Contributor

@chanpory chanpory commented Aug 22, 2025

Merge multiple SVG paths into single paths for outline icons

Fixes issue reported here: #1392

Summary

  • Merged multiple SVG paths into single paths for all icons in icons/outline/ directory
  • Optimized ~3,000+ multi-path SVG files by concatenating their d attributes
  • Preserved all metadata, comments, and SVG structure - only path elements were modified
  • Updated the build pipeline (optimize.mjs) to automatically merge paths for all future icons

Changes

1. Batch Processing of Existing Icons

Merged paths for all existing multi-path SVG files using a custom script. For example:

Before:

<path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" />
<path d="M12 6l0 12" />
<path d="M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" />

After:

<path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5M12 6l0 12M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" />

2. Build Pipeline Enhancement

Modified .build/optimize.mjs to automatically merge paths during the optimization process, ensuring:

  • All future icons will have merged paths
  • Consistency across the entire icon library
  • Integration with the existing build workflow

Benefits

  • Reduced file size: Fewer elements and less markup
  • Improved rendering performance: Single path rendering is more efficient than multiple paths
  • Cleaner SVG structure: Simplified DOM tree for each icon
  • Future-proof: All new icons automatically get optimized
  • No visual changes: Icons render identically to their original versions

Testing

  • Verified all icons render correctly after path merging
  • Confirmed metadata and comments are preserved
  • Validated SVG syntax remains valid
  • Tested the modified build script (optimize.mjs)
  • Verified path merging works for new icons added to the project
  • Tested in multiple browsers for compatibility

Files Changed

  • 4,803 SVG files in icons with merged paths
  • .build/optimize.mjs - Added path merging logic to the build pipeline

@vercel
Copy link

vercel bot commented Aug 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
tabler-icons Error Error Aug 22, 2025 3:01am

@chanpory
Copy link
Contributor Author

@codecalm please review when you get a chance.

@chanpory
Copy link
Contributor Author

@codecalm please review, and merge when you get a chance.

@chanpory chanpory changed the title Merge icon paths Merge and optimize icon paths Aug 22, 2025
@chanplexity
Copy link

@codecalm hello, please let me know what i can do to get this merged. happy to make changed to the PR if needed.

@github-actions
Copy link

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the stale Lack of activity label Oct 21, 2025
@chanplexity
Copy link

@codecalm would appreciate any kind of update or response on how I can unblock this. Thank you.

@github-actions github-actions bot removed the stale Lack of activity label Oct 22, 2025
@github-actions
Copy link

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the stale Lack of activity label Nov 22, 2025
@github-actions
Copy link

github-actions bot commented Dec 6, 2025

This pr was closed because it has been inactive for 14 days since being marked as stale.

@github-actions github-actions bot closed this Dec 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎨 icons stale Lack of activity

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants