SVG在小火箭中的应用问题解决

[hanyuxinting]

svg-sprite-loader在小火箭中的应用

小火箭默认是没有对SVG 进行sprite设置的。所以需要手动写plugin，进行配置。 以下代码是小火箭主刀写的：

const merge = require("babel-merge");
module.exports = api => {
  api.chainWebpack(webpackChain => {
    webpackChain.module
      .rule("svg")
      .test(/\.svg$/)
      .use('file')
      .loader(require.resolve("svg-sprite-loader"))
      .options({}).end()
      .use('file')
      .loader(require.resolve('svgo-loader')).end()
      .before('image')
  });
};

测试用例：(react 下使用的)

import NewFile from '../../image/new-file.svg';

<svg viewBox={NewFile.viewBox}>
   <use xlinkHref={`#${NewFile.id}`} />
</svg>

一般用例：(svg-sprite-loader官方测试)

import twitterLogo from './logos/twitter.svg';
// twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string>
// Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function>

const rendered = `
<svg viewBox="${twitterLogo.viewBox}">
  <use xlink:href="#${twitterLogo.id}" />
</svg>`;

写完demo后，我遇到了问题1：

Error in parsing SVG: Non-whitespace before first tag.

解决思路：https://github.com/kisenka/svg-sprite-loader/issues/236

然后遇到了问题2：

npm run dev 时报InvalidSvg: svg-sprite-loader错误

解决思路：https://github.com/chenkunlia/djsl/issues/2

然后问题解决了~~~ 但具体为什么，我需要进一步研究一下 svg-sprite-loader 与 svgo-loader 的关系，及webpack module 里的执行顺序。

另因为批量导入文件使用的require.context，也还不是很清楚，稍后补齐~

额，先补上可用的小火箭配置：

const merge = require("babel-merge");
module.exports = api => {
  api.chainWebpack(webpackChain => {
    webpackChain.module
      .rule("svg")
      .test(/\.svg$/)

    .use('file')
      .loader(require.resolve('svgo-loader')).end()

    .use('file')
      .loader(require.resolve("svg-sprite-loader"))
      .options({}).end()
      .before('image')
  });
};