Need help with webpack-svgstore-plugin?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mrsum
205 Stars 89 Forks 347 Commits 29 Opened issues

Description

Simple svg-sprite creating with webpack

Services available

!
?

Need anything else?

Contributors list

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.