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。

這樣引入就很是的方便高效了。