TS 中 SVG 的使用

首先，在 shims-vue.d.ts 文件中输入

declare module "*.svg" {
	const content: string
    export default content
}

可以解决引入的路径问题

在终端输入 yarn add svg-sprite-loader -D,安装 svg-loader 后进入 vue.config.js文件进行配置

const path = require(id:'patg')

module.export={
	lintOnSave: false.
    chainWebpack: config=>{
    	const dir = path.resolve(_dirname,'src/assets/icons') //文件目录
        
        config.module
        	.rule('svg-sprite') //规则
            .test(/\.svg$/) // 匹配以 .svg 结尾
            .include.add(dir).end  //包含 icons 目录
            .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end() // 使用 svg-loader
        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite: true}]) // 添加插件
        cofig.module.rule('svg').exclude.add(dir) //其他 svg loader 排除 icons 目录
    }
}

在页面中使用

import home from @/assets/icons/home.svg

...
<svg>
	<use xlink:href="#home"></use>
</svg>
...

这样就可以在页面中展示 SVG 了

一个 SVG 我们要 import xxx from ... 引入一次，如果有一百个，难道我们要引入一百次吗？

let importAll = (requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext)
try { 
	importAll(require.context('../assets/icons',true,/\.svg$/))
}catch(error){
	console.log(error)
}

上面的两句代码就可以引入一整个文件夹的 SVG

在网上下载的 SVG 中，带有默认颜色，这样怎么办？总不能一个一个去删除默认颜色吧

config.module
.use('svgo-loader').loader('svgo-loader').tap(options=>({...options,plugin:[{removeAttrs:{attrs: 'fill'}}]})).end()

在 vue.config.js文件中加入上面一句代码，则可以删除 svg 的默认颜色