fix(auto-icons): use @resvg/resvg-js for SVG rendering to support linearGradient

[Copilot]

Overview

sharp can render SVG files, but it delegates to librsvg (via libvips) which has known, platform-specific bugs with linearGradient and related SVG features. Notably, sharp#1895 documents cases where SVGs using linearGradient crash libcairo on Linux with sharp's prebuilt binaries. The behavior is also inconsistent between macOS and Linux because each platform ships a different version of librsvg.

This PR integrates @resvg/resvg-js — a pure-Rust SVG renderer with more complete and consistent cross-platform SVG standard compliance — into the auto-icons module. SVG files are now rendered to PNG via @resvg/resvg-js first, and the resulting PNG buffer is then passed to sharp for any post-processing (grayscale/overlay dev indicator, etc.). Non-SVG images continue to be handled directly by sharp as before.

SVG rendering improvements:

• Integrated @resvg/resvg-js into auto-icons to render SVG files to PNG before resizing, addressing platform-specific limitations of sharp's librsvg backend (including crashes with linearGradient on Linux). SVG files are detected by extension and processed with Resvg, while non-SVG images are handled as before. (packages/auto-icons/src/index.ts)
• Updated dependencies to include @resvg/resvg-js and all necessary platform-specific binaries. (packages/auto-icons/package.json, pnpm-lock.yaml)

Testing enhancements:

• Added extensive tests for SVG icon support, including checks for correct use of @resvg/resvg-js, handling of case-insensitive .svg extensions, per-size rendering, and fallback to the original logic for PNG files. Mocks were updated to simulate the new SVG rendering workflow. (packages/auto-icons/src/__test__/index.test.ts)

Miscellaneous:

• Added resvg, Resvg, and librsvg to the spellcheck allow-list. (cspell.yml)

Manual Testing

1. Add an SVG with a linearGradient as src/assets/icon.svg in a WXT project
2. Add @wxt-dev/auto-icons to wxt.config.ts
3. Run wxt build — icons in .output/*/icons/ should render with correct gradient colors instead of rendering incorrectly or crashing (as they would with sharp's librsvg backend on Linux)

Related Issue

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	8f60dca
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/69ce5b74f4f95e00085929c4
😎 Deploy Preview	https://deploy-preview-2228--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@wxt-dev/analytics

npm i https://pkg.pr.new/@wxt-dev/analytics@2228

@wxt-dev/auto-icons

npm i https://pkg.pr.new/@wxt-dev/auto-icons@2228

@wxt-dev/browser

npm i https://pkg.pr.new/@wxt-dev/browser@2228

@wxt-dev/i18n

npm i https://pkg.pr.new/@wxt-dev/i18n@2228

@wxt-dev/is-background

npm i https://pkg.pr.new/@wxt-dev/is-background@2228

@wxt-dev/module-react

npm i https://pkg.pr.new/@wxt-dev/module-react@2228

@wxt-dev/module-solid

npm i https://pkg.pr.new/@wxt-dev/module-solid@2228

@wxt-dev/module-svelte

npm i https://pkg.pr.new/@wxt-dev/module-svelte@2228

@wxt-dev/module-vue

npm i https://pkg.pr.new/@wxt-dev/module-vue@2228

@wxt-dev/runner

npm i https://pkg.pr.new/@wxt-dev/runner@2228

@wxt-dev/storage

npm i https://pkg.pr.new/@wxt-dev/storage@2228

@wxt-dev/unocss

npm i https://pkg.pr.new/@wxt-dev/unocss@2228

@wxt-dev/webextension-polyfill

npm i https://pkg.pr.new/@wxt-dev/webextension-polyfill@2228

wxt

npm i https://pkg.pr.new/wxt@2228

commit: 8f60dca

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.43%. Comparing base (8a56f73) to head (8f60dca).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2228      +/-   ##
==========================================
+ Coverage   76.21%   76.43%   +0.22%     
==========================================
  Files         115      115              
  Lines        3094     3094              
  Branches      685      685              
==========================================
+ Hits         2358     2365       +7     
+ Misses        653      649       -4     
+ Partials       83       80       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Timeraa]

Wanted to see how copilot agent is doing nowadays so if this PR is not up to par just close it @aklinker1. Haven't tested this at all yet

[aklinker1]

@copilot can't sharp already render SVG files? Does it not support gradients?

[Timeraa]

@copilot can't sharp already render SVG files? Does it not support gradients?

[Timeraa]

copilot can't sharp already render SVG files? Does it not support gradients?

Interesting that it only listens to me huh

apparently that triggered it again lol

[Copilot]

@copilot can't sharp already render SVG files? Does it not support gradients?

Yes, sharp can render SVGs — but it delegates to librsvg (via libvips), which has known, platform-specific bugs with linearGradient and similar features. The most notable example is sharp#1895, where SVGs using linearGradient crash libcairo on Linux with the prebuilt binaries. The behavior also differs between macOS and Linux because each platform ships a different version of librsvg.

@resvg/resvg-js wraps a pure-Rust SVG renderer (resvg) that has more complete and consistent cross-platform SVG standard compliance. That's why we detect .svg extensions and route through @resvg/resvg-js first, then hand the resulting PNG buffer to sharp for any post-processing (grayscale/overlay).

@copilot can't sharp already render SVG files? Does it not support gradients?

Yes, sharp can render SVGs — but it delegates to librsvg (via libvips), which has known, platform-specific bugs with linearGradient and similar features. The most notable example is sharp#1895, where SVGs using linearGradient crash libcairo on Linux with the prebuilt binaries. The behavior also differs between macOS and Linux because each platform ships a different version of librsvg.

@resvg/resvg-js wraps a pure-Rust SVG renderer (resvg) that has more complete and consistent cross-platform SVG standard compliance. That's why we detect .svg extensions and route through @resvg/resvg-js first, then hand the resulting PNG buffer to sharp for any post-processing (grayscale/overlay).