webpack-svgstore-plugin

by mrsum

Simple svg-sprite creating with webpack

204 Stars 81 Forks Last release: Not found 342 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 [email protected] for Webpack 1.x.x
Use [email protected] 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:

html
  
    
  
React JSX:
html
  
    
  

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.