search

mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 90 forks source link

Support multiple instances #92

Closed jonespen closed 8 years ago

jonespen commented 8 years ago

Is it possible to generate multiple sprite files? I'm creating a styleguide, and it would be nice to output a sprite.html (using custom template) with all the icons.

When trying the following code

plugins: [
    new SvgStorePlugin([join(src, 'icons', '**/*.svg')],
      '',
      {
        name: 'sprite.svg',
        prefix: 'icon-',
        chunk: 'app'
      }
    ),
    new SvgStorePlugin([join(src, 'icons', '**/*.svg')],
      '',
      {
        name: 'sprite.html',
        prefix: 'icon-',
        chunk: 'app'
      }
    )
  ]

I get the following error:

/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:24
        return typeof item === "string" ? item : item.source();
                                                     ^

TypeError: Cannot read property 'source' of undefined
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:24:48
    at Array.map (native)
    at ConcatSource.source (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:23:23)
    at Compiler.writeOut (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:256:26)
    at Compiler.<anonymous> (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:246:20)
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:181:20
    at Object.async.forEachOf.async.eachOf (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:233:13)
    at Object.async.forEach.async.each (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:209:22)
    at Compiler.emitFiles (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:235:20)
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/mkdirp/index.js:48:26
    at FSReqWrap.oncomplete (fs.js:82:15)

It works fine with one instance.

Btw, great project 💯

mrsum commented 8 years ago

@jonespen Hello!

Can you try 3.0.0-alpha.2 version? documentation here https://github.com/mrsum/webpack-svgstore-plugin/blob/feature/refactor/README.md

jonespen commented 8 years ago

Hey, thanks!

I upgraded, and it works, but I still can't figure out how to specify two different templates. AFAIK svgxhr don't take a template as parameter

mrsum commented 8 years ago

Hi @jonespen i don't understand what you mean about 'templates'

mrsum commented 8 years ago

jade/pug template for compiling data to svg, or different sprites by mask?

mrsum commented 8 years ago

Wherever, if you want compile 2 or more different sprites, you can use

var __svg__ = { path: './svg/folder-1/*.svg', name: 'assets/svg/[hash].icons.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

var __svg__ = { path: './svg/folder-2/*.svg', name: 'assets/svg/[hash].logos.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);
jonespen commented 8 years ago

Jade/pug template. If this could be customizable, I could create a html file with all the icons in the svgstore.

I can have a look at it (not right now) if you want

mrsum commented 8 years ago

@jonespen You can set up template

new SvgStore({
  template: 'path/to/your/pug/template.pug'
})
ephor commented 8 years ago 
var __svg__ = { path: './svg/folder-1/*.svg', name: 'assets/svg/[hash].icons.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);
var __svg__ = { path: './svg/folder-2/*.svg', name: 'assets/svg/[hash].logos.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

Can I use something like this, but in config (not in chunk)? 

new SvgStore(
     //=========> input path
     [
         path.join(__dirname + 'public/', 'image/svg_icons/market', '*.svg'),
         path.join(__dirname + 'public/', 'image/svg_icons/portable', '*.svg'),
     ],
     //=========> output path
     [
         path.join(__dirname + 'public/', 'image/svg_sprite/market'),
         path.join(__dirname + 'public/', 'image/svg_sprite/portable'),
     ],
     //=========> options
     {
         name: 'sprite.svg',
         chunk: 'portable.styl',
         prefix: 'svg-',
     }
)

By the way, I can not get the plugin to work. There is no output. Maybe I need to write input path and output path with considering output.path?