Typescript type for all id's in the generated sprite

[Alexis Walravens]

Hi 👋,

I recently started using this project, wich is great to build sprite with no hassle!

I don't have any issue, it's more of an idea.

In my project I use React and Typescript.

I created a Icon component which takes a name prop which should be the id of the svg in the sprite I want to use.

interface IconProps {
  name: string
}

const Icon = ({ name }: IconProps) => {
  return (
    <svg>
      <use href={`icons.svg#${name}`} />
    </svg>
  )
}

And it works great, but miss one thing. Using typescript it would be amazing to be able to generate a type declaration that would contain all of the id of the svg in the sprite so I would get autocompletion for my name prop and I would be able to create my interface like this:

interface IconProps {
  name: IconIdInSprite
}

What do you think ?

[Andrew]

Hello. The thing is that all icons and icons names are generated in runtime. On the other hand, TS is an superset of JS, the type checking takes place on compilation time.
You can store somewhere set of all svg names, get enum from that (IconIdInSprite), then manually add them to sprite
https://github.com/svg-sprite/svg-sprite/blob/main/docs/api.md#svgspriteraddfile--name-svg-
https://github.com/svg-sprite/svg-sprite/blob/main/docs/api.md#svgspritercompile-config--callback-

[chimok]

@Kreeg But I think what he wants is generating the interface at runtime, so he will have autocomplete inside the ide. That should be quite easy. @AlexisWalravens This package does it but doesn't have all the features of svg-sprite https://github.com/kreuzerk/svg-to-ts