Closed RasmusO95 closed 3 years ago
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
@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 :/
@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
There is a example to get all icons: https://github.com/MMF-FE/svgicon/blob/master/demo/vue-demo/src/icons.ts
@Allenice require is not supported in vite:
icons.ts:5 Uncaught ReferenceError: require is not defined
at icons.ts:5
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:
` <vue-svgicon role="img" class="c-icon-icon c-icon-fill" :data="arrowData"/>
`
But this just renders an empty svg in the dom:
Anyone know what im doing wrong?