webpack-svgstore-plugin

2018-12-07 admin

webpack-svgstore-plugin是什么

什么是webpack-svgstore-plugin,Webpack svgstore plugin

webpack-svgstore-plugin使用教程帮助文档

WEBPACK PLUGIN

███████╗██╗   ██╗ ██████╗     ███████╗████████╗ ██████╗ ██████╗ ███████╗
██╔════╝██║   ██║██╔════╝     ██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗██╔════╝
███████╗██║   ██║██║  ███╗    ███████╗   ██║   ██║   ██║██████╔╝█████╗  
╚════██║╚██╗ ██╔╝██║   ██║    ╚════██║   ██║   ██║   ██║██╔══██╗██╔══╝  
███████║ ╚████╔╝ ╚██████╔╝    ███████║   ██║   ╚██████╔╝██║  ██║███████╗
╚══════╝  ╚═══╝   ╚═════╝     ╚══════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝                                                                     

NPM

Package info

Build Status NPM version Code Climate Test Coverage

Installation

npm i webpack-svgstore-plugin --save-dev

We do not maintain a version for node.js 0.12 anymore

Only:

  • “7.0+”
  • “6.0”
  • “4.0”

Webpack version support

Use webpack-svgstore-plugin@3.x.x for Webpack 1.x.x Use webpack-svgstore-plugin@4.x.x for Webpack 2.x.x

Webpack configuration

EXAMPLE here

Usage

1) require plugin

//webpack.config.js
var SvgStore = require('webpack-svgstore-plugin');
module.exports = {
  plugins: [
    // create svgStore instance object
    new SvgStore({
      // svgo options
      svgoOptions: {
        plugins: [
          { removeTitle: true }
        ]
      },
      prefix: 'icon'
    })
  ]
}

2) Put function mark at your chunk

// plugin will find marks and build sprite

var __svg__           = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' };
// will overwrite to var __svg__ = { filename: "assets/svg/1466687804854.logos.svg" };

// also you can use next variables for sprite compile
// var __sprite__     = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].icons.svg' };
// var __svgstore__   = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].stuff.svg' };
// var __svgsprite__  = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].1logos.svg' };

// require basic or custom sprite loader
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);
Dear friends…

As you know, last version has integrated ajax sprite loader. Right now, you can override that. Or create your own sprite ajax loader function.

3) HTML code for happy using

HTML:

  <svg class="svg-icon">
    <use xlink:href="#icon-name"></use>
  </svg>

React JSX:

  <svg className='svg-icon'>
    <use xlinkHref='#icon-name' />
  </svg>

Plugin settings

options

  • template - add custom jade template layout (optional)
  • svgoOptions - options for svgo (optional, default: {})

License

NPM package available here: webpack-svgstore-plugin

MIT © Chernobrov Mike, Gordey Levchenko

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47481.html

文章标题:webpack-svgstore-plugin

回到顶部