Adding base64 encoded icons to a SPFx ListView CommandSet Extension

Question

I'm trying to add an icon to the ListView CommandSet Extension I created using Waldek's tutorial Configure extension icon.

The issue I have is: Getting a gulp warning *appears to be a relative web URL. This means that when the is rendered, this URL will be relative to the CDN url for the rest of the package assets. If a relative filesystem path was intended, prepend the path with "./".* and not showing an icon in the commandset.

It's trying to open https://localhost:4321/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0...

I'm working on the newest SPFx version 1.4.0 using a React framework.

This is the extension manifest.

"items": {
"COMMAND_1": {
  "title": {
    "default": "<command title>"
  },
  "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGLDJGlHAAAACBjSFJNAACHCwAAjA8AAP1SAACBQgAAfXUAAOmPAAA85gAAGc0Hn9XQAAAg1GlDQ1BJQ0MgUHJvZmlsZQAAaN6VkWVUlklFTkSuQmCC..<removed chunk>",
  "type": "command"
}

}

Please give some advise or pointers to fix this.

score 0 · Accepted Answer · answered Jan 02 '18 at 08:27

0

This looks to be a known issue from Microsoft's end.

Would suggest that you wait a couple of days for it to be resolved. If its a blocking issue, would suggest that you use an image(with file url) and that which is accessible to all users.

Github issue - Web part Base 64 icons do not render anymore

answered Jan 02 '18 at 08:27

Gautam Sheth

2,442
1
17
16

I though I searched thoroughly, but I still missed the issue. Thank you for the link. – Erik de Rooij Jan 08 '18 at 12:33
happy to help, cheers :) , could you please accept it as answer by checking the checkmark. You can view how to do it [here](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – Gautam Sheth Jan 08 '18 at 12:35

score -1 · Answer 2 · answered Sep 12 '19 at 01:19

Erik,

I also had the same issue so I dug into it and found a way to use SVG with custom icons.

I posted a blog about it (https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/), but the solution is to not use base64-encoding, just use the html-encoded SVG in the data url.

I hope this helps?

Adding base64 encoded icons to a SPFx ListView CommandSet Extension

2 Answers2