command-pal icon indicating copy to clipboard operation
command-pal copied to clipboard

Add support for adding icons to the CommandList.

Open rouilj opened this issue 2 years ago • 2 comments

This adds support for placing icons to the left of the commands.

5 cases are supported:

  1. if icon is not defined, it inserts an empty svg that holds 24px of space on the left of the label

  2. if icon is null, the space is not held and the label smooshes to the left

  3. if icon is a character (in span class="icon"), the character is used. If the string is longer than 24 px, it's cut off.

  4. the icon can be an image, css sized to 24x24px.

  5. the icon can be an svg, css sized to 24x24px fill set to currentColor.

in each case the icon is a string "<img ...>" "<svg ...>..." etc see:

https://github.com/benwinding/command-pal/issues/22

for details and examples

rouilj avatar Feb 03 '23 07:02 rouilj

Don't merge this. I am having a wierd issue where the output html is being shifted.

e.g. rather than

<p><svg><svg><span "command"><span><span "kyb"></span></p>

I see:

<p><span "command"><span><span "kyb"></span><svg><svg></p>

I have no idea what happens here. Sometimes the html is messed up on initial display, sometimes after a search and sometime continuing to search corrects the layout.

I'll reopen it if I can figure out what's happening here.

rouilj avatar Feb 07 '23 15:02 rouilj

Upgrading to [email protected] has fixed the issue for me. Change:

https://github.com/benwinding/command-pal/pull/23/commits/35062ad1fc0aad123282b3ec27cce3677fbfaa31

updates package.json.

rouilj avatar Feb 07 '23 23:02 rouilj