vue3.0+ts. 引入svg时,index.ts怎么写
发布于 9 天前 作者 norunpig 148 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

image.png 我这样写不管用无法解析出icon组件, 按照以前的写法Vue.component()又会报错, 有没有大佬知道

4 回复

1.在components中新建一个Icon组件。

<template>
    <svg>
        <use :xlink:href="'#'+name"></use>
    </svg>
</template>

<script lang="ts">
    const importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
    try{importAll(require.context('../assets/icons',true,/\.svg$/));}catch(error){console.log(error);}
    export default {
        props:['name'],
        name:'Icon'
    };
</script>

2.让Icon可以全局使用。在main.ts中引入Icon

import Icon from '@/components/Icon.vue';


Vue.component('Icon',Icon)

3.在组件中直接使用Icon 组件即可。

image.png

name 就是你要传过去的svg的id。

这样引入就非常的方便高效了

@ab8512 是不能使用Vue.components()了,可以的话我直接就用起了 image.png

这样尝试成功了 image.png image.png

额,看花了, 你 这是vue3…

回到顶部