Build and publish raw data

[cbenz]

I'd like to use heroicons with, for example, Svelte.

Currently only React or Vue are supported.

While it would be possible to add a build script to this repo to support Svelte, I think that it would be more interesting to have a build script that would output raw data.

I already use this method in a project by copy-pasting SVG path d attributes in heroicons.js, that I pass to my SvgIcon Svelte component.

Example:

import { trash } from "./heroicons.js"
import SvgIcon from "./SvgIcon.svelte"

<SvgIcon {...trash} />
// equivalent to
<SvgIcon d={trash.d} viewBox={trash.viewBox} />

It would be nice to replace the import from ./heroicons.js by npm install heroicons then importing from heroicons/data/solid for example.

This would remove the need to add a new build script to support any new JS frontend library (and there are plenty!).

What do you think about this? Should I start writing a new build script in order to produce such data?

Excerpt from heroicons.js:

// From https://heroicons.dev/

const heroiconsViewbox = "0 0 24 24"

export const externalLink = {
  d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14",
  viewBox: heroiconsViewbox,
}

[cbenz]

While working with this approach I updated sightly my data structure to define the variant, like this:

export const trash = {
  d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16",
  viewBox: heroiconsViewbox,
  variant: "solid",
}

SvgIcon Svelte component was updated in consequence.

[cbenz]

Now it's possible to import the SVG directly by installing the heroicons package.

Additionally the heroicons-svelte community package was published (cf this comment).

So I'm closing that issue which is no more relevant.