svg图在vue项目中使用

一、安装

npm i -D svg-sprite-loader

二、配置

1.webpack中webpack.base.cong.js配置

{
    
    
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svgIcons')],
        options: {
    
    
          symbolId: 'icon-[name]'
        }
      },
      {
    
    
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/svgIcons')],
        options: {
    
    
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

2. vue-cli中vue.config.js配置

 // file-loader排除svg图标目录，避免file-loader处理svg图标引发webpack报错
        config.module
              .rule('svg')
              .exclude.add(resolve('assets/icons/svg'))  //assets文件夹下icons文件夹下svg文件夹里面放的svg图
              .end()

        // 生成 svg 雪碧图
        config.module
              .rule('svgSpriteLoader')
              .test(/\.svg$/)
              .include.add(resolve('assets/icons/svg'))
              .end()
              .use('svg-sprite-loader')
              .loader('svg-sprite-loader')
              .options({
    
    
                  symbolId: 'icon-[name]'
              })
              .end()

三、main.js

import './svgIcons/svg.js'

四、svgIcon文件

svg.js

import Vue from 'vue'
import SvgIcon from '@/components/svg/svgIcon.vue'

// register globally
Vue.component('svg-icon', SvgIcon)

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

五、使用

<svg-icon iconClass="svg图名"></svg-icon>