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

image.png 我这样写不管用无法解析出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 组件即可。

image.png

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

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

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

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

额,看花了, 你 这是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

回到顶部