List the names of the files as a typescript type

[mehdi-valette]

Hello,

Thank you for this wrapper, we're using it to reduce the overhead of using SVG icons in our code.

We'd love to have the name of the symbols inside the sprite.svg as a typescript type. We can then use it to accept a name property in an Icon component (with React, Vue, ...).

import sprite from './sprite.svg';

export function Icon({name}) => (
  <svg>
    <use href={`${sprite}#${name}`} />
  </svg>
)

I can create a pull request, I just want to make sure this isn't yet possible before writing code :)

[vshepel]

Hi 👋

This feature is not available in the current version. However, I would appreciate your pr!

[vshepel]

I found the same question svg-sprite/svg-sprite#731

[mehdi-valette]

Hi!

Thanks for the link to the discussion on svg-sprite 👍️

I think I will add an option to vite-svg-sprite-wrapper to ouptut a typescript file types: {path: string; typeName: string}. Something quite simple should work: type SymbolId = 'one' | 'two' | 'three';

Based on a quick look at svg-sprite and vite-svg-sprite-wrapper, I see three ways to do it (I'm not sure yet which ones are possible):

The ideal way
svg-sprite gives access to the ID of the generated shapes through getShapes. We can use it in vite-svg-sprite-wrapper and generate that "type" file.

The risky way
In vite-svg-sprite-wrapper we recreate the generateId function of svg-sprite to "guess" the generated ID (using the config object when available). Then we hope they don't change their mind ever 😅️

The inefficient way
We parse the Symbol again to extract its ID.

I'll have a look on Monday and try to implement it in the ideal way 🤓️
Of course I'm open to do it another way if you think there's a better approach.

[mehdi-valette]

A pull request was created: #8