profile
viewpoint

Ask questionsBuild and publish raw data

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,
}
tailwindlabs/heroicons

Answer questions 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.

useful!

Related questions

No questions were found.
source:https://uonfu.com/
Github User Rank List