在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.console.log()但是发现引入的是一个字符串，是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,
chainWebpack:config=>{
const dir = path.resolve(_dirname,'src/assets/icons')

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 目录
}

}

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

如何快速引入多个icon

封装一个icon组件

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

<template>
  <svg class="icon">
    <use :xlink:href="'#'+name"/>
  </svg>
</template>

<script lang="ts">
  let 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>

<style lang="scss" scoped>
  .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

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

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

Vue.component('Icon',Icon);

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