wxt-dev / wxt-dev/wxt

WXT Auto Icons - linearGradient support

Open
#2,191 0 comments 1 reaction 2 assignees View on GitHub

@Timeraa is already working on this.

Since Apr 2, 2026.

  • #2228 by @copilot-swe-agent — open
pending-triage
Dominant language
TypeScript
Stars
10.5k
Forks
564
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

My icon rendered as black & white so I asked Gemini 3.1 Pro & it gave me this:

The issue is that @wxt-dev/auto-icons uses a basic SVG-to-PNG rasterizer under the hood that likely doesn't support linearGradient elements properly — it strips them out and renders everything as black/white fallback fills.

Reproduction
  1. Use the SVG below
  2. And run @wxt/auto-icons to see black & white colors
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="bgGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#E2FF00"/>
      <stop offset="100%" stop-color="#FFB800"/>
    </linearGradient>
    <linearGradient id="arrowGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2A0845"/>
      <stop offset="100%" stop-color="#6441A5"/>
    </linearGradient>
  </defs>

  <rect width="100" height="100" rx="22" fill="url(#bgGrad1)" />

  <path d="M 15 70 A 35 12 0 0 1 85 70" stroke="#FF0055" stroke-width="3" fill="none" opacity="0.4" />

  <path d="M 42 15 L 58 15 L 58 50 L 72 50 L 50 85 L 28 50 L 42 50 Z" fill="url(#arrowGrad1)" />
  
  <path d="M 50 20 L 50 45" stroke="#E2FF00" stroke-width="2" stroke-linecap="round" opacity="0.4" />
  <polygon points="50,58 54,52 46,52" fill="#E2FF00" opacity="0.6" />

  <line x1="25" y1="20" x2="25" y2="35" stroke="#FF0055" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
  <line x1="75" y1="25" x2="75" y2="40" stroke="#6441A5" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
  <line x1="50" y1="5" x2="50" y2="10" stroke="#FF0055" stroke-width="2" stroke-linecap="round" opacity="0.8"/>

  <path d="M 15 70 A 35 12 0 0 0 85 70" stroke="#FF0055" stroke-width="10" fill="none" stroke-linecap="round" opacity="0.3" />
  <path d="M 15 70 A 35 12 0 0 0 85 70" stroke="#FF0055" stroke-width="3" fill="none" stroke-linecap="round" />
</svg>
Steps to reproduce

No response

System Info
-
Used Package Manager

pnpm

Validations

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.