Loading SVGs on the fly with Vue3 and Vite

Question

Loading SVGs on the fly with Vue3 and Vite

Currently, I am in the process of transitioning my Vue2/Webpack application to Vue3/Vite.

Here's an example of what works in Vue2/Webpack:

<div v-html="require('!!html-loader!../../assets/icons/' + this.icon + '.svg')"></div>

To include html-loader, I have added the following configuration:

"html-loader": "1.3.2",

However, when attempting the same approach in Vue3/Vite, I encounter the error:

ReferenceError: require is not defined

I've searched for a solution that allows dynamic file loading without knowing the filename during compilation. Is there a way to achieve this?

javascript vue.js vuejs3 vite

Answer 1

Answer №1

Another option is to implement the Lazy Load Components technique using the defineAsyncComponent feature in Vue3. You can find more information about this approach in this link.

Alternatively, you can also use import() as demonstrated by @tony19 in their answer on Stack Overflow:

<script>
const loadImage = async imgName => {
  const module = await import(/* @vite-ignore */ `../assets/images/${imgName}.jpg`)
  return module.default.replace(/^\/@fs/, '')
}

export default {
  data() {
    return {
      image: null,
      imageName: 'image1', // image1.jpg
    }
  },
  watch: {
    imageName: {
      async handler(imgName) {
        this.image = await loadImage(imgName)
      }, 
      immediate: true,
    },
  },
}
</script>

<template>
  <button @click="imageName = 'image2'">Load Another Image</button>
  <img :src="image" alt="Loaded Image" />
</template>

Answer 2

Another option is to implement the Lazy Load Components technique using the defineAsyncComponent feature in Vue3. You can find more information about this approach in this link.

Alternatively, you can also use import() as demonstrated by @tony19 in their answer on Stack Overflow:

<script>
const loadImage = async imgName => {
  const module = await import(/* @vite-ignore */ `../assets/images/${imgName}.jpg`)
  return module.default.replace(/^\/@fs/, '')
}

export default {
  data() {
    return {
      image: null,
      imageName: 'image1', // image1.jpg
    }
  },
  watch: {
    imageName: {
      async handler(imgName) {
        this.image = await loadImage(imgName)
      }, 
      immediate: true,
    },
  },
}
</script>

<template>
  <button @click="imageName = 'image2'">Load Another Image</button>
  <img :src="image" alt="Loaded Image" />
</template>

Answer 3

Answer №2

If you're interested in integrating SVG files into your Vue components, I suggest checking out the vite-svg-loader plugin for Vite.

Answer 4

If you're interested in integrating SVG files into your Vue components, I suggest checking out the vite-svg-loader plugin for Vite.

Answer 5

Answer №3

One way to incorporate icons into your project is by creating a component that handles loading the icons, utilizing the composition API in Vue.

<template>
    <i v-html="svg" />
</template>

<script lang="ts" setup>
    import { computed } from 'vue';

    const props = defineProps(['icon', 'src']);
    const path = props.src ? props.src : '';
    const file = `${path}icon-${props.icon}`;
    const modules = import.meta.glob('../../assets/icons/**/*.svg', { as: 'raw' });

    const svg = computed(() => {
        return modules['../../assets/icons/' + file + '.svg'];
    });
</script>

<style lang="scss" scoped></style>

This approach also allows for custom styling of the SVG elements using CSS frameworks like TailwindCSS.

To use this component:

<UiIcon icon="NAME" class="w-8 fill-current text-red-500"/>

And you're good to go!

Answer 6

One way to incorporate icons into your project is by creating a component that handles loading the icons, utilizing the composition API in Vue.

<template>
    <i v-html="svg" />
</template>

<script lang="ts" setup>
    import { computed } from 'vue';

    const props = defineProps(['icon', 'src']);
    const path = props.src ? props.src : '';
    const file = `${path}icon-${props.icon}`;
    const modules = import.meta.glob('../../assets/icons/**/*.svg', { as: 'raw' });

    const svg = computed(() => {
        return modules['../../assets/icons/' + file + '.svg'];
    });
</script>

<style lang="scss" scoped></style>

This approach also allows for custom styling of the SVG elements using CSS frameworks like TailwindCSS.

To use this component:

<UiIcon icon="NAME" class="w-8 fill-current text-red-500"/>

And you're good to go!

Loading SVGs on the fly with Vue3 and Vite

Answer №1

Answer №2

Answer №3

Similar questions

There was an issue encountered while trying to install Electron using the command 'npm install electron'

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView

Launching a Node.js Express application on Heroku

Receive a positive or negative data message through Ajax Response

Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

Leveraging the power of Auth0 and Prisma in aggregating user data

Adding an element to a blank array using Angular

This error occurs when attempting to access the property 'options' of a variable that has not been defined

Display a div element on the page after 10 seconds of loading

I used npm to install a package, but for some reason, it's not appearing in

Turn off Appbar padding at the top and bottom

Select a Button to randomly choose another Button

How can you integrate jquery ajax in WordPress?

struggling to develop a sophisticated 'shopping cart organization' program

Display only the relevant search results using ng-show in AngularJS

What is the correct method for accessing an array within an object that is nested inside an array within a JSON file in Angular?

Learning how to implement server side rendering in React JS through tutorials

Is it possible to conditionally call the Apollo Client in my Vue template script?

Using v-model with the input type files in Vue.js allows for easy two

Challenges with compiling Next.js with Tailwindcss and Sass