[bug] SVG encoding in wallet connector icons is incorrect in distributed package

[CruzMolina]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.7

wagmi Version

2.12.17

Current Behavior

Description

The SVG data URLs in the distributed wallet connector icons are not properly URL-encoded, causing issues with coolMode.

Current Behavior

In the distributed package (straight from npm), SVG data URLs are not encoded:

// note <g clip-path="url(%23a)"> & <g filter="url(%23b)">
var krakenWallet_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(%23a)"><rect width="512" height="512" fill="%237132F5" rx="114.5"/><g filter="url(%23b)">...';

Expected Behavior

Expected Behavior

The SVGs should either be URL-encoded:

// note <g clip-path="url(#a)"> & <g filter="url(#b)">
var krakenWallet_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(#a)"><rect width="512" height="512" fill="%237132F5" rx="114.5"/><g filter="url(#b)">...';

Or preferably base64 encoded:

var krakenWallet_default = 'data:image/svg+xml;base64,' + btoa(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(#a)"><rect width="512" height="512" fill="#7132F5" rx="114.5"/><g filter="url(#b)">...`)';

Steps To Reproduce

Reproduction

1. Install @rainbow-me/rainbowkit.
2. Examine node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/krakenWallet-DAOXUKWO.js.
3. Observe that SVG special characters are not encoded.

Environment

• @rainbow-me/rainbowkit version: 2.1.7
• Reproduction confirmed with fresh install, before any build process

Let me know if you need any additional information or would like me to test potential solutions.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

It seems likely that esbuild's dataurl loader is converting the SVGs to data URLs but not properly handling the encoding. https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/build.js#L35

If that's the case, could be fixable using a custom esbuild loader for SVGs to properly handle the encoding, or possibly by modifying the dataurl loader config.

krakenWallet is not the only wallet connector affected, walletConnectWallet is as well and possibly others.