Sp-dev-docs: Web part base 64 icons still do not render

[hbgeorgian]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Web part icons defined in base 64 as described in the SPFx documentation page Configure web part icon (section Using a base64 encoded image) are displayed properly.

Observed Behavior

Web part icons defined in base 64 as defined in the mentioned article are not displayed at all in the web part picker. Unlike bug #1124, icons are not displayed properly in the local workbench.

Looking at the URL generated for the icon, the img src attribute appears to be prefixed with https://localhost:4321/ before the base64 encoded image. In fact, removing the https://localhost:4321/ from the src attribute renders the icon as expected.

For example, if source is:
src="https://localhost:4321/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwM..."

Replacing it for:
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwM..."

will solve the issue.

The same behaviour can be observed on the local workbench and the hosted workbench.

Steps to Reproduce

1. Create an SPFx web part

2. Following the instructions found on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/configure-web-part-icon, set the iconImageUrl to a base64 image. For example:
   "iconImageUrl": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDEwLjU4IDcuNDEiPjxwYXRoIGQ9Ik0yLjQ4LS4wMVYuNUgxLjJ2Ni4xNWg1LjcyVjYuM0gxLjU0VjIuMmg2LjR2Mi44OGguMjVWLjVINi45MVYwaC0uMzZWLjVIMi44MlYwaC0uMTN6bS0uOTQuODVoLjk0di40M2guMzRWLjg0aDMuNzN2LjQzaC4zNlYuODRoMS4wM3YuOTRoLTYuNHYtLjQ3eiIvPjxwYXRoIGQ9Ik03LjIyIDUuNjh2LS40M2EyLjE2IDIuMTYgMCAwIDEgMi4xNyAyLjE3bC0uNDUtLjAxYy4wMi0uNy0uNDktMS43LTEuNzItMS43M3ptMCAuNzJ2LS40M2MuOTIuMDUgMS40My43IDEuNDQgMS40NWgtLjQzYy0uMDEtLjY2LS40NS0xLTEuMDEtMS4wMnptLjYuN2EuMy4zIDAgMCAxLS4zLjMuMy4zIDAgMCAxLS4zMS0uMy4zLjMgMCAwIDEgLjMtLjI5LjMuMyAwIDAgMSAuMy4zeiIvPjxwYXRoIGQ9Ik0yLjQ4LS4wMVYuNUgxLjJsLjAzIDIuMjMtLjAzIDMuOTJoNS43MlY2LjNIMS41NFYyLjJoNi40djIuODhoLjI1Vi41SDYuOTFWMGgtLjM2Vi41SDIuODJWMGgtLjEzem0tLjk0Ljg1aC45NHYuNDNoLjM0Vi44NGgzLjczdi40M2guMzZWLjg0aDEuMDN2Ljk0aC02LjR2LS40N3oiLz48cGF0aCBkPSJNMi41IDIuNzNoMS42OHYuMzZIMi41em00LjA3LjM2aC4zNHYyLjI4aC0uMzR6bS0xLjM3IDBoLjM1djIuMjhINS4yem0wIDIuMjhoMS43MXYuMzZoLTEuN3ptMC0yLjY0aDEuNzF2LjM2aC0xLjd6Ii8+PHBhdGggZD0iTTMuODYgMy4xaC4zNHYyLjI3aC0uMzR6bS0xLjM2IDBoLjM0djIuMjdIMi41em0wIDIuMjdoMS43di4zNkgyLjV6bTAtMi42NGgxLjd2LjM2SDIuNXoiLz48L3N2Zz4=",

3. Run gulp serve

4. From your local or hosted workbench, open the Add New Web Part dialog.
5. Find your custom web part. The icon will be blank.
6. Using the developer tools, inspect the icon for your web part.
7. Find the
8. The src attribute will be prefixed with https://localhost:4321
9. Remove the https://localhost:4321 (leaving everything after, and including, the "data:image"
10. The icon will show

[Zhephyr54]

Still bugged 05/23/18.
It should be relatively easy to fix and it's quite important since I don't know if there is any workaround !

[wobba]

Agree, supporting something beside image/png would be very useful.

[jasonds]

@VesaJuvonen - I believe this issue is closely related to issue 1124, which was closed in April. I'm still seeing this behavior in deployed environments as well. Are you able to confirm if this is still a known issue?

[expiscornovus]

Any news on this issue? I can still reproduce this issue. When I use a base64 encoded image it doesn't render.

But I am getting an sites/spappcatalog/ClientSideAssets/ea3aee20-489e-45d3-a637-c5071ede6dd7/data:image/svg+xml;base64 url when I used a base64 encoded image in my package.

[estruyf]

@expiscornovus if you encode a PNG, it should work fine. At the moment, encoded SVGs are not supported.

[expiscornovus]

@estruyf thanks for you quick reply! :) I will use a PNG for now.

[GrahamMcMynn]

The fix for svg will roll out in the start of June.

[hugoabernier]

I can confirm that this issue is solved for base64 raster images. However, the issue still seems to occur with base64-encoded SVGs.

If you need to use an embedded SVG for your icons, you need to convert them to data URIs, not base64-encoded.

There is a web-based utility to generate data URI SVGs at https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/

I hope it helps?