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

<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。

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