feat(core): export gosling svg logo

[sehilyi]

Can we include the SVG element of the Gosling logo image in the gosling.js library? This would make it easier for people to add a Gosling logo to their applications (e.g., "Powered by" labels). Helpful for some of our applications in the lab as well since we do not need to copy and paste the SVG code.

import react from 'React';
import * gosling from 'gosling.js';

return (
   ...
   {gosling.getGoslingLogoSVG(20, 20)}
)

Change List

Checklist

• Ensure the PR works with all demos on the online editor
• Unit tests added or updated
• Examples added or updated
• Documentation updated (e.g., added API functions)
• Screenshots for visual changes (e.g., new encoding support or UI change on Editor)

[manzt]

Some minor comments. I'd export this function (and use it) as a React Component.

[manzt]

This function returns JSX, so it requires React to use it (i.e., it is a React component). Rather than getGoslingLogoSvg why not export GoslingLogo component:

type GoslingLogoProps = {
  width: number;
  height: number;
}

export function GoslingLogo({ width = 20, height = 20 }: GoslingLogoProps) {
  return <svg>...</svg>
}

I'd also include some JSDoc comments for GoslingLogoProps to explain what width and height are (pixels, fractional units, etc).

[manzt]

If width and height should always be then same, then I'd go for just size.

[manzt]

import react from 'React';
import { GoslingLogo } from 'gosling.js';

function App() {
  return <GoslingLogo size={20} />
}

[manzt]

Another option would be to have a button in the Gosling editor /website to copy the icon in different ways (svg "raw", or JSX):

https://lucide.dev/icons/align-horizontal-distribute-end

I personally like this option because you can copy the SVG directly into your project and style it however you like (with or without react). With the React component, you define how styling needs to happen.

[sehilyi]

Ah, I like the idea of adding a button to copy the logo! I am now leaning toward adding that to the editor or probably our website.