Support loading all svgs in a folder

[mesqueeb]

Hey, first of all:
I love this plugin!!

It makes working with SVGs so much better.

Now I have a custom icon set with about 500 icons.

I'd love if I was able to get an array of all the filenames and be able to display the svgs based on the filename directly in the HTML as SVG.

Do you think something like this would be possible?

With Webpack I'd use require.context but with Vite I'm at a loss.

Any advice much appreciated.

[richardtallent]

This sounds useful. It would require returning multiple components from the same import statement, and since generating a valid unique name for each SVG file might be tricky, I agree it would probably need to return a filename map. I.e.:

import GreenIcons from "src/assets/icons/green/**/*.svg"

returns

export default {
    "tractor.svg": [green tractor component here],
    "house.svg": [green house component here],
    "cars/toyota.svg": [component for the toyota.svg under the cars subdirectory here]
}

You would have to name the component when you register it in your components object, since you wouldn't be able to rely on JavaScript's property shorthand notation.

export default {
  components: { GreenTractor: GreenIcons["tractor.svg"] }
}

This should allow for the option of tree-shaking by importing only specific SVG components, while also allowing you to bundle everything so you can dynamically use them (e.g., <component :is="GreenIcons[currentIconName]">).

[sibbng]

I believe this usage is can be done easily with glob and dynamic import() but if you are looking for simpler solution check out that: https://github.com/luxueyan/vite-transform-globby-import

But looks like it not very active and have some issues:

• Doesn't work in Windows for now.
• Relative path handling doesn't work properly.
• Partially works with <script setup>
• Don't have an option to use filename.
• It is not very flexible (imports statements have to be on top cant rely other variables).
• Unused components still be registered and no dynamic imports.

I made it work on my local by modifying some parts for using it like that.

<template>
  <SvgComponent />
  <component :is="components['SvgComponent']" />
</template>

<script>
import { VueComponent as components } from 'globby!./components/*.svg'

export default {
  components,
  setup() {
    return { components }
  },
}
</script>

But it is little bit dirty for now. For proper solution I created an issue luxueyan/vite-transform-globby-import#5