Vue3 - Vite - Does it work?

[RasmusO95]

Hi there,

Ive litereally followed the step-by-step in docs, but the icons refuse to show up.

So i have an svg in my /assets/icons/login.svg (which is the login svg from materialicons)

Used the invoke tool which added the changes to main.ts:

`import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon';

const app = createApp(App).use(VueSvgIconPlugin, { tagName: 'vue-svgicon' });`

And the config:

`const path = require('path') const svgFilePaths = ["src/assets/icons"].map((v) => path.resolve(v)) const tagName = 'vue-svgicon'

module.exports = { tagName, svgFilePath: svgFilePaths, svgoConfig: {}, pathAlias: {}, transformAssetUrls: {}, } `

Component:

`

`

But this just renders an empty svg in the dom:

Anyone know what im doing wrong?

[Allenice]

vite plugin: https://github.com/MMF-FE/svgicon/tree/master/packages/vite-plugin-svgicon vite demo: https://github.com/Allenice/svgicon-vite-demo

ref: #135

[RasmusO95]

@Allenice Nice this works, but do you have an example on how to import it dynamically? I would hate to have to create 50+ components, one for each svg.

Like if you could pass the name of the icon as a prop, then import it dynamically? I was thinking something like:

setup(props) {
        const data = import.meta.globEager(`./assets/icons/${props.name}.svg`);
        return { data };
    },

but no luck :/

[RasmusO95]

@Allenice Alright i managed to get it working.

<template>
    <vue-svgicon role="img"
                 class="c-icon-icon c-icon-fill"
                 :data="svg"
                 original
                 v-bind="$attrs"/>
</template>

<script lang="ts">
import { computed, defineComponent, toRef, ref, onMounted } from 'vue';

export default defineComponent({
    name: 'CIcon',
    props: {
        name: {
            type: String,
            required: true,
        },
    },
    setup(props) {
        const nameProp = toRef(props, 'name');
        const screenReaderFriendlyTitle = computed(() => {
            return nameProp.value.replace(/-/g, ' ');
        });

        const svg = ref({});

        onMounted(async() => {
            // see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
            svg.value = (await import(`../../assets/icons/${props.name}.svg`)).default;
        });

        return { screenReaderFriendlyTitle, svg };
    },
});
</script>

Seems like a bit of an ugly solution tho

[Allenice]

There is a example to get all icons: https://github.com/MMF-FE/svgicon/blob/master/demo/vue-demo/src/icons.ts

[RasmusO95]

@Allenice require is not supported in vite:

icons.ts:5 Uncaught ReferenceError: require is not defined
    at icons.ts:5