vue 懒人_SVG在Vue中如何引入？如何做到懒人引入？

在VUE项目中直接引入SVG

1.首先在Iconfont里下载了svg文件后，放入到本地src/assets/icons下面。

2.我在组件中直接进行导入引用，这时候TS就报错了。TS2307找不到模块。

3.爬墙搜索。

4.按照回答操作一下。在shims-vue.d.ts中粘贴进去。

declare module '*.svg'

{

const content:string;

export default content;

}

5.回去看一下引入，不报错了。

6.但是发现引入的是一个字符串，是svg的路径。我要引入的是SVG的使用方法。

7.去搜索一下大家是怎么引用的，知道目前的最流行的svg引入办法是使用Svg-sprite-loader。

8.安装

yarn add svg-sprite-loader -D

9.在vue.config.js中添加

const path = require('path')

module.exports = {

"lintOnSave": false,

"transpileDependencies": [

"vuetify"

],

config.module

.rule('svg-sprite')

.test(/\.svg$/)

.include.add(dir).end() // 包含 icons 目录

.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()

config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])

config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

// config.module

// .rule('svg-sprite')

// .test(/\.(svg)(\?.*)?$/)

// .include.add(dir).end()

// .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract: false}).end()

// .use('svgo-loader').loader('svgo-loader')

// .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]}))

// .end()

// config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])

// config.module.rule('svg').exclude.add(dir)

}

}

10.这时候就可以在项目中可以使用use标签引入icon。

但是如果我们项目中的Icon很多，这样引入的话就很麻烦。

如何快速引入多个icon?

1.import整个目录

let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);

try{

importAll(require.context(path:'../assets/icons',true,/\.svg$/));

}catch(error){

console.log(error);

}

2.封装一个Icon组件

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

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'

};

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

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

Vue.component('Icon',Icon)

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

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

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