index.js
function setup(config, options) {
  const rule = config.module.rule("svg"); // Find the svg rule

  /*
   * Let's use the file loader option defaults for the svg loader again. Otherwise
   * we'll have to set our own and it's no longer consistent with the changing
   * vue-cli.
   */
  const fileLoaderOptions = rule.use("file-loader").get("options"); // Get the file loader options
  options.external = _.merge(fileLoaderOptions, options.external); // Make sure we save the file loader options

  // Use file loader options for sprite name
  options.sprite = _.merge(
    { spriteFilename: fileLoaderOptions.name },
    options.sprite
  );

  rule.uses.clear(); // Clear out existing uses of the svg rule
  const query = parseResourceQuery(options); // Get the resource queries

  rule
    .oneOf("inline")
    .resourceQuery(query.inline)
    .use("vue-svg-loader")
    .loader("vue-svg-loader")
    .options(options.inline);

  rule
    .oneOf("sprite")
    .resourceQuery(query.sprite)
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options(options.sprite);

  rule
    .oneOf("data")
    .resourceQuery(query.data)
    .use("url-loader")
    .loader("url-loader")
    .options(options.data);

  rule
    .oneOf("external")
    .use("file-loader")
    .loader("file-loader")
    .options(options.external);
}
function setup(config, options) {
  const rule = config.module.rule("svg"); // Find the svg rule

  /*
   * Let's use the file loader option defaults for the svg loader again. Otherwise
   * we'll have to set our own and it's no longer consistent with the changing
   * vue-cli.
   */
  const fileLoaderOptions = rule.use("file-loader").get("options"); // Get the file loader options
  options.external = _.merge(fileLoaderOptions, options.external); // Make sure we save the file loader options

  // Use file loader options for sprite name
  options.sprite = _.merge(
    { spriteFilename: fileLoaderOptions.name },
    options.sprite
  );

  rule.uses.clear(); // Clear out existing uses of the svg rule
  const query = parseResourceQuery(options); // Get the resource queries

  rule
    .oneOf("inline")
    .resourceQuery(query.inline)
    .use("vue-svg-loader")
    .loader("vue-svg-loader")
    .options(options.inline);

  rule
    .oneOf("sprite")
    .resourceQuery(query.sprite)
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options(options.sprite);

  rule
    .oneOf("data")
    .resourceQuery(query.data)
    .use("url-loader")
    .loader("url-loader")
    .options(options.data);

  rule
    .oneOf("external")
    .use("file-loader")
    .loader("file-loader")
    .options(options.external);
}
function setup ( config , options ) { const rule = config . module . rule ( "svg" ) ; // Find the svg rule /*
   * Let's use the file loader option defaults for the svg loader again. Otherwise
   * we'll have to set our own and it's no longer consistent with the changing
   * vue-cli.
   */ const fileLoaderOptions = rule . use ( "file-loader" ) . get ( "options" ) ; // Get the file loader options options . external = _ . merge ( fileLoaderOptions , options . external ) ; // Make sure we save the file loader options // Use file loader options for sprite name options . sprite = _ . merge ( { spriteFilename : fileLoaderOptions . name } , options . sprite ) ; rule . uses . clear ( ) ; // Clear out existing uses of the svg rule const query = parseResourceQuery ( options ) ; // Get the resource queries rule . oneOf ( "inline" ) . resourceQuery ( query . inline ) . use ( "vue-svg-loader" ) . loader ( "vue-svg-loader" ) . options ( options . inline ) ; rule . oneOf ( "sprite" ) . resourceQuery ( query . sprite ) . use ( "svg-sprite-loader" ) . loader ( "svg-sprite-loader" ) . options ( options . sprite ) ; rule . oneOf ( "data" ) . resourceQuery ( query . data ) . use ( "url-loader" ) . loader ( "url-loader" ) . options ( options . data ) ; rule . oneOf ( "external" ) . use ( "file-loader" ) . loader ( "file-loader" ) . options ( options . external ) ; }
Perform the main setup of the svg rule parsing and rewriting. This uses the
chainWebpack API modify the required rules.
@param  {ChainWebpack} config  An instance of ChainWebpack
@param  {Object}       options The svg options from the vue.config.js
Perform the main setup of the svg rule parsing and rewriting . This uses the chainWebpack API modify the required rules .