search

phosphor-icons / react

A flexible icon family for React
https://phosphoricons.com
MIT License
1.13k stars 60 forks source link

Add `@preview` tag to enable icon previews in jsdoc #100

Closed ajmnz closed 4 months ago

ajmnz commented 4 months ago

👋

The @preview tag can contain a base64 encoded SVG and would allow previewing icons when importing or hovering the components.

Happy to open a PR for it.

// GlobeSimple.d.ts
import type { Icon } from "../lib/types";

/**
 * @preview ![img](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsMjRoMEExMDQsMTA0LDAsMSwwLDIzMiwxMjgsMTA0LjEyLDEwNC4xMiwwLDAsMCwxMjgsMjRabTg3LjYyLDk2SDE3NS43OUMxNzQsODMuNDksMTU5Ljk0LDU3LjY3LDE0OC40MSw0Mi40QTg4LjE5LDg4LjE5LDAsMCwxLDIxNS42MywxMjBaTTk2LjIzLDEzNmg2My41NGMtMi4zMSw0MS42MS0yMi4yMyw2Ny4xMS0zMS43Nyw3N0MxMTguNDUsMjAzLjEsOTguNTQsMTc3LjYsOTYuMjMsMTM2Wm0wLTE2Qzk4LjU0LDc4LjM5LDExOC40Niw1Mi44OSwxMjgsNDNjOS41NSw5LjkzLDI5LjQ2LDM1LjQzLDMxLjc3LDc3Wm0xMS4zNi03Ny42Qzk2LjA2LDU3LjY3LDgyLDgzLjQ5LDgwLjIxLDEyMEg0MC4zN0E4OC4xOSw4OC4xOSwwLDAsMSwxMDcuNTksNDIuNFpNNDAuMzcsMTM2SDgwLjIxYzEuODIsMzYuNTEsMTUuODUsNjIuMzMsMjcuMzgsNzcuNkE4OC4xOSw4OC4xOSwwLDAsMSw0MC4zNywxMzZabTEwOCw3Ny42YzExLjUzLTE1LjI3LDI1LjU2LTQxLjA5LDI3LjM4LTc3LjZoMzkuODRBODguMTksODguMTksMCwwLDEsMTQ4LjQxLDIxMy42WiI+PC9wYXRoPjwvc3ZnPg==)
 */
declare const I: Icon;
export { I as GlobeSimple };
Screenshot 2024-06-11 at 16 40 06
rektdeckard commented 4 months ago

I love this idea. Probably no big deal because comments are stripped during bundling, but what is the impact on the overall size of the source code?

If you're up for making the change, be sure to do it in the assembly script rather than doing a one-time codemod in the typedefs:

https://github.com/phosphor-icons/react/blob/master/scripts/assemble.ts#L101

rektdeckard commented 4 months ago

Question though, can more than one preview be included? Will probably want to show all 6 weights, as they are all grouped together at the component level.

ajmnz commented 4 months ago

Yes, multiple previews seem to be supported:

Screenshot 2024-06-11 at 22 32 05

I guess we should also add them with a background in order to support both light and dark themes. Black on white would work, although kind of ugly. Whatever you prefer.

As per the size, probably a few MB. At most 1kb per icon, times 6 previews, times the total number of icons. The following snippet is 934 bytes

/**
 * @preview ![img](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsMjRoMEExMDQsMTA0LDAsMSwwLDIzMiwxMjgsMTA0LjEyLDEwNC4xMiwwLDAsMCwxMjgsMjRabTg3LjYyLDk2SDE3NS43OUMxNzQsODMuNDksMTU5Ljk0LDU3LjY3LDE0OC40MSw0Mi40QTg4LjE5LDg4LjE5LDAsMCwxLDIxNS42MywxMjBaTTk2LjIzLDEzNmg2My41NGMtMi4zMSw0MS42MS0yMi4yMyw2Ny4xMS0zMS43Nyw3N0MxMTguNDUsMjAzLjEsOTguNTQsMTc3LjYsOTYuMjMsMTM2Wm0wLTE2Qzk4LjU0LDc4LjM5LDExOC40Niw1Mi44OSwxMjgsNDNjOS41NSw5LjkzLDI5LjQ2LDM1LjQzLDMxLjc3LDc3Wm0xMS4zNi03Ny42Qzk2LjA2LDU3LjY3LDgyLDgzLjQ5LDgwLjIxLDEyMEg0MC4zN0E4OC4xOSw4OC4xOSwwLDAsMSwxMDcuNTksNDIuNFpNNDAuMzcsMTM2SDgwLjIxYzEuODIsMzYuNTEsMTUuODUsNjIuMzMsMjcuMzgsNzcuNkE4OC4xOSw4OC4xOSwwLDAsMSw0MC4zNywxMzZabTEwOCw3Ny42YzExLjUzLTE1LjI3LDI1LjU2LTQxLjA5LDI3LjM4LTc3LjZoMzkuODRBODguMTksODguMTksMCwwLDEsMTQ4LjQxLDIxMy42WiI+PC9wYXRoPjwvc3ZnPg==)
 */
ajmnz commented 4 months ago

^ I'll detail the total size increase in the PR.