vue3.0+ts. 引入svg时，index.ts怎么写

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

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

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 组件即可。

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

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

norunpig 2楼•4 个月前作者

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

norunpig 3楼•4 个月前作者

这样尝试成功了

ab8512 4楼•4 个月前

额，看花了，你这是vue3…

meikang123 5楼•6 天前

import { App } from ‘vue’ import SvgIcon from ‘@/lib/components/SvgIcon’

interface Plugin { install: any }

const addSvg: Plugin = { install(app: App, needSvg: string[]) { app.component(‘SvgIcon’, SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext: any) => requireContext.keys().filter((key: string) => {
  const name = key.split('.svg')[0].substring(2)
  return needSvg.includes(name)
}).map(requireContext)
requireAll(req)

} }

export default addSvg