Vue2引入svg

目录

1、安装依赖

2、assets文件夹创建icons文件夹，用于svg的存放和逻辑引入

3、icons文件夹创建svg文件夹和index.js文件

4、index.js填写索引逻辑

5、components中创建svg引用组件

5、vue.config.js配置相关，可以根据自己的情况调整

6、验证

---

1、安装依赖

• npm install svgo -D
• npm install svg-sprite-loader -S

npm install svgo -D
npm install svg-sprite-loader -S

2、assets文件夹创建icons文件夹，用于svg的存放和逻辑引入

3、icons文件夹创建svg文件夹和index.js文件

• svg文件夹存放相关svg文件
• index.js存放索引逻辑

  

4、index.js填写索引逻辑

const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
    requireContext.keys().map(requireContext)
} 
requireAll(req)

  同时我们需要在main.js中引入该index.js文件

import  '@/src/assets/icons/index'

5、components中创建svg引用组件

• 可手动注册，这里我采用的自动注册全局（使用量大可采用此方法，自动注册方法在上一篇文章中）

<template>
  <i v-if="icon.indexOf('el-icon-') === 0" :class="icon" />
  <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="`#icon-${icon}`" />
  </svg>
</template>
<script>
export default {
  name: "svgC",
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
};
</script>
<style scoped>
.svg-icon {
  width: 20px;
  height: 20px;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
  cursor: pointer;
}
</style>

5、vue.config.js配置相关，可以根据自己的情况调整

chainWebpack: config => {
    config.plugins.delete("prefetch")
    config.plugins.delete("preload")
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()


    config.module
      .rule('icons')// 定义一个名叫 icons 的规则
      .test(/\.svg$/)// 设置 icons 的匹配正则
      .include.add(path.join(__dirname, 'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
      .end()
      .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
      .options({// 该 svg-sprite-loader 的配置
        symbolId: 'icon-[name]'
      })
      .end()
  },

6、验证