vue3.0+ts. 引入svg时,index.ts怎么写
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
我这样写不管用无法解析出icon组件,
按照以前的写法Vue.component()又会报错,
有没有大佬知道
5 回复
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。
这样引入就非常的方便高效了
@ab8512 是不能使用Vue.components()了,可以的话我直接就用起了
这样尝试成功了
额,看花了, 你 这是vue3…
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