-
-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to have a dynamic import SVG component #66
Comments
Hi, does it work when you use a relative path? await import(`../../icons/${this.name}.svg`) |
No, I got the following error message :
I think It's because the "name", is not a name, but sometime a path + name (yeah, bad naming, we're doing a lot of refactorings 😅) |
It seems that the file can't be found. Are you sure |
Any idea? :( |
Can you try to use import { defineAsyncComponent } from 'vue'
export default {
mounted () {
const svgObject = defineAsyncComponent(() => import(`/icons/${this.name}.svg?raw`))
}
} |
I'm using this code to render icons from a subfolder dynamically <template>
<IconComponent :viewBox="viewBox" />
</template>
<script setup lang="ts">
import type { Component } from 'vue'
import { IconName } from '@/types/IconName'
export interface IconProps {
name: IconName
fill?: Color
viewBox?: string | null
}
const props = withDefaults(defineProps<IconProps>(), {
fill: 'default',
viewBox: null,
})
const { loader } = createIconMap().get(props.name) ?? {}
const IconComponent = loader ? defineAsyncComponent(loader) : null
function getIconNameFromPath(path: string) {
const pathSplit = path.split('/')
const filename = pathSplit[pathSplit.length - 1] || ''
const iconName = filename.replace('.svg', '')
return iconName
}
function createIconMap() {
const importGlob = import.meta.glob('@/assets/icons/**/*.svg')
const iconMap = new Map<string, { loader: () => Promise<Component> }>([])
for (const path in importGlob) {
const iconName = getIconNameFromPath(path)
iconMap.set(iconName, { loader: importGlob[path] })
}
return iconMap
}
</script>
Sorry I haven't worked much with Vue 2 but I'm sure something for Vue 2 could be adapted from the code above. |
Hello,
I have an issue when building the Vue (2.7) app:
We're using this component everywhere in our application.
SwIcon.vue :
Like you can see, we have this import
await import(`/icons/${this.name}.svg?raw`);
which is working good in development.I guess the problem comes from the fact that during the build phase, since it is dynamic, it is not able to bundle the svg since it does not know them.
But then, how can I keep a similar component and make it work? Even if it has to bundle the whole icon's folder, it's not a big deal if it's lazy loaded.
Thanks in advance, I appreciate it ❤️
PS: I have already check #24, but I don't understand well for my case :/
The text was updated successfully, but these errors were encountered: