Notable Pseudocode Mashups

    webpack-vector-sprite-plugin

    1.0.4 • Public • Published

    WEBPACK PLUGIN

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

    NPM

    Package info

    Build Status NPM version

    Installation

    npm i webpack-vector-sprite-plugin --save-dev

    Webpack version support

    Use webpack-vector-sprite-plugin@3.x.x for Webpack 1.x.x
    Use webpack-vector-sprite-plugin@4.x.x for Webpack 2.x.x,3.x.x,4.x.x.

    Node.js version support

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

    Tested to work with with node.js 4.x,6.x,7.x,8.x

    Webpack configuration

    EXAMPLE here

    Usage

    1) require plugin

    //webpack.config.js
    var SvgStore = require('webpack-vector-sprite-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-vector-sprite-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-vector-sprite-plugin

    MIT © Chernobrov Mike, Gordey Levchenko , Nadav Sinai , Zack Jackson

    Keywords

    none

    Install

    npm i webpack-vector-sprite-plugin

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    76.7 kB

    Total Files

    34

    Last publish

    Collaborators

    • zackljackson