怎么在 vue-cli3.0 中使用 svg-icon 组件？

[fakaka]

我自己目前是用 vue-svg-loader 勉强使用 svg，很难受。搞不定 svg-sprite-loader 在vue-cli3.0 里面的配置

[fakaka]

这样配置了，但是还是会解析其他的svg文件

chainWebpack: config => {
    config.module
        .rule('url-loader')
        .exclude.add('./src/icons')
        .end()

    config.module
        .rule('svg')
        .test(/\.svg$/)
        .include.add('src/icons').end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .loader('babel-loader')
        .options({
            symbolId: 'icon-[name]'
        })   
}

[fakaka]

@GitHdu 不行啊，还想加载的旧的svg格式

[PanJiaChen]

chainWebpack: config => {
    config.module
        .rule('svg')
        .exclude.add('./src/icons')
        .end()

    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add('.src/icons')
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })   
}

[fakaka]

@PanJiaChen 可以了，谢谢！！！

[Fun005]

你好，方便看下你的vue.config.js配置吗，我的图标还是出不来，无法解析

[fakaka]

@Fun005 我这样就行了，你把你的发出来看看

module.exports = {
    devServer: {
        port: 3001
    },
    chainWebpack: config => {
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}

var path = require('path')

function resolve(dir) {
    return path.join(__dirname, './', dir)
}

[Fun005]

可以了，谢谢~ 我没有加resolve，所以解析不到。再次感谢~

[musnow]

chainWebpack: config => {
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
    .use('file-loader')
    .loader('svg-sprite-loader')
    .options({ symbolId: 'icon-[name]' })
}

[TianTang-TT]

请问我按照这样的配置为什么会出错呢 我的配置

    // 配置svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add('./src/icons')
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add('./src/icons')
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

报错信息是这样的 ERROR WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.rules[14].include should be one of these: RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }] -> One or multiple rule conditions Details:
  • configuration.module.rules[2].exclude should be an instance of RegExp
  • configuration.module.rules[2].exclude should be a string.
  • configuration.module.rules[2].exclude should be an instance of function
  • configuration.module.rules[2].exclude[0] should be an instance of RegExp
  • configuration.module.rules[2].exclude[0]: The provided value "./src/icons" is not an absolute path!
  • configuration.module.rules[2].exclude[0] should be an instance of function
  • configuration.module.rules[2].exclude[0] should be an array: [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
  • configuration.module.rules[2].exclude[0] should be an object.
  • configuration.module.rules[2].exclude should be an object.
  • configuration.module.rules[2].exclude[0] should be an instance of RegExp
  • configuration.module.rules[2].exclude[0]: The provided value "./src/icons" is not an absolute path!
  • configuration.module.rules[2].exclude[0] should be an instance of function
  • configuration.module.rules[2].exclude[0] should be an array: [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
  • configuration.module.rules[2].exclude[0] should be an object.
  • configuration.module.rules[14].include should be an instance of RegExp
  • configuration.module.rules[14].include should be a string.
  • configuration.module.rules[14].include should be an instance of function
  • configuration.module.rules[14].include[0] should be an instance of RegExp
  • configuration.module.rules[14].include[0]: The provided value "./src/icons" is not an absolute path!
  • configuration.module.rules[14].include[0] should be an instance of function
  • configuration.module.rules[14].include[0] should be an array: [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
  • configuration.module.rules[14].include[0] should be an object.
  • configuration.module.rules[14].include should be an object.
  • configuration.module.rules[14].include[0] should be an instance of RegExp
  • configuration.module.rules[14].include[0]: The provided value "./src/icons" is not an absolute path!
  • configuration.module.rules[14].include[0] should be an instance of function
  • configuration.module.rules[14].include[0] should be an array: [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
  • configuration.module.rules[14].include[0] should be an object.

[huatten]

const resolve = dir => path.join(__dirname, dir); 加上它试试 @TianTang-TT eg：.include.add(resolve("./src/icons"))

[TianTang-TT]

@MrTenger 多谢，就是这么解决的

config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/icons'))
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, 'src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

[libp]

补充一下，icons下的index.js 这段代码比不可少：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

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

-------下面的语句没理解怎么起作用的，但是绝对不能少的
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

[xcf007]

@Fun005 我这样就行了，你把你的发出来看看

module.exports = {
    devServer: {
        port: 3001
    },
    chainWebpack: config => {
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}

var path = require('path')

function resolve(dir) {
    return path.join(__dirname, './', dir)
}

解决了我的问题，thks

[bladeandmaster88]

Vue.component('svg-icon', SvgIcon)

vue3这句会报错，如何改造？