svg-sprite-webpack-plugin v 1.0.4

Webpack 插件/加载器，使基于<use>的SVG图标系统在webpack中更容易使用。从导入的SVG文件中创建一个带有<symbol>标记的SVG雪碧图，并返回一个要传递给SVG <use>标记的URL。使用了kisenka的svg-sprite-loader进行内部转换(从独立的SVG文件到<symbol>标签)。

安装

npm install --save-dev svg-sprite-webpack-plugin

使用

webpack配置

const IconPlugin = require('svg-sprite-webpack-plugin').plugin;

// 注意:
// 使用包含的 webpack-isomorph-tools 解析器时，需要提取的文件名匹配此格式。
const iconPlugin = new IconPlugin('icons-[hash].svg');

// ... 在配置对象内部
{
  module: {
    loaders: [
      {
        test: /\.svg$/,
        loader: iconPlugin.extract(),
      }
    ]
  },
  plugins: [
    iconPlugin,
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Webpack isomorphic tools

如果使用了webpack-isomorphic-tools，请将下面的内容加入配置：

const iconParser = require('svg-sprite-webpack-plugin').webpackIsomorphicParser;

{
  assets: {
    svg: {
      extension: 'svg',
      parser: iconParser,
    }
  }
}

1
2
3
4
5
6
7
8
9
10

在代码中

React 0.14 及以后版本的示例:

import { Component } from 'react';
import myGreatIcon from './my-great-icon.svg';

class SuperGreatIconComponent extends Component {
  render() {
    return (
      <svg><use xlinkHref={myGreatIcon} /></svg>
    );
  }
}

1
2
3
4
5
6
7
8
9
10

建议的开发模式配置

如果您使用了webpack-dev-server，那么不建议使用本插件，而是直接使用svg-sprite-loader。

const iconTest = /\.svg$/;
if (DEV) {
  config.module.loaders.push({
    test: iconTest,
    loader: 'svg-sprite',
  });
} else {
  config.module.loaders.push({
    test: iconTest,
    loader: iconPlugin.extract(),
  });
}

1
2
3
4
5
6
7
8
9
10
11
12

使用说明

IE浏览器

Internet Explorer 不支持带有外部引用的<use>标签。这个问题已经在Microsoft Edge 13中得到了解决，但是在Edge的浏览器份额达到你可以接受的水平之前，我建议你使用优秀的SVG4Everybody库。

CDNs

<use>标签不允许跨域请求，而且据我所知，短期内不太可能开始支持它们。因此，不用使用 webpack 配置中的output.publicPath，这个库目前希望生成的图标可以在/static目录中访问，在同一个域中使用导入的图标。

← imagemin-webpack-plugin static-site-generator-webpack-plugin →