[Question]Inject sprite to html after compile? about svg-spritemap-webpack-plugin HOT 22 CLOSED

Yeah, you might want to try the .source() function, as variables prefixed with a _ are private by convention:

<%= compilation.assets["spritemap.svg"].source() %>

from svg-spritemap-webpack-plugin.

Looks like we were thinking the same thing, I've just added a minimal inline-html example to the repository. Great to hear it's working with 3.4.0 for you as well!

from svg-spritemap-webpack-plugin.

In what way? Are you using something like html-webpack-plugin?

from svg-spritemap-webpack-plugin.

yes

from svg-spritemap-webpack-plugin.

The generated spritemap ends up in the webpack assets with a chunk name, this should allow you to target it when using a custom template, see this example for more info.

from svg-spritemap-webpack-plugin.

Don`t understand,
where chunk output
how i should require it

<%= require('html-loader!../spritemap') %>

from svg-spritemap-webpack-plugin.

@borm, read the docs for html-webpack-plugin, it's in there, I don't really use it myself so I can't really help you. It's possible to target files or custom options in an .ejs file like this:

<% htmlWebpackPlugin.files %>

It should also be possible to get the source content of a file/asset via the compile.assets[] array and the source() function:

<%= compilation.assets[??].source() %>

from svg-spritemap-webpack-plugin.

new SVGSpritemapPlugin({
      src: ['src/icons/*.svg', 'src/icons/flags/*.svg'],
      filename: 'dist/sprite.svg',
      prefix: 'icon-',
      chunk: 'spritemap',
      deleteChunk: false,
      styles: path.join(__dirname, 'src/_sprites.scss'),
    }),

<pre>
  <%= JSON.stringify(htmlWebpackPlugin.files, 0, 2) %>
</pre>

output

{
--
  | "publicPath": "",
  | "chunks": {
  | "vendors~app": {
  | "size": 1763912,
  | "entry": "dist/vendors~app.js",
  | "hash": "e5ac2dc6a01f80ebfe1b",
  | "css": [
  | "dist/vendors~app.css"
  | ]
  | },
  | "app": {
  | "size": 653824,
  | "entry": "dist/app.js",
  | "hash": "31d69e6c1451af924090",
  | "css": [
  | "dist/app.css"
  | ]
  | }
  | },
  | "js": [
  | "dist/vendors~app.js",
  | "dist/app.js"
  | ],
  | "css": [
  | "dist/vendors~app.css",
  | "dist/app.css"
  | ]
  | }

from svg-spritemap-webpack-plugin.

@borm, can you also post the entire webpack output and the output of the following code in the ejs template?

<pre>
  <%= JSON.stringify(compilation.assets, 0, 2) %>
</pre>

from svg-spritemap-webpack-plugin.

veeeeeery big output

from svg-spritemap-webpack-plugin.

Haha, I would've guessed. You can add it as an attachment if you want to?

from svg-spritemap-webpack-plugin.

r.txt

from svg-spritemap-webpack-plugin.

ah, i see "spritemap.svg"

from svg-spritemap-webpack-plugin.

as i understood i can use it
<%= compilation.assets["spritemap.svg"]._value %>

from svg-spritemap-webpack-plugin.

but why it not exist inside htmlWebpackPlugin.files :(

from svg-spritemap-webpack-plugin.

No idea why it doesn't show up when printing the array but if it works it works, right?

from svg-spritemap-webpack-plugin.

yes

from svg-spritemap-webpack-plugin.

Up, how get it in version 3.3.5

new SVGSpritemapPlugin('src/icons/!*.svg', {
      output: {
        filename: 'dist/sprite.svg',
        chunk: {
          name: 'spritemap',
          keep: true,
        },
      },
      sprite: {
        prefix: 'icon-',
        gutter: 8,
        generate: {
          title: false,
        },
      },
      styles: false,
    }),

<%= JSON.stringify(compilation.assets["dist/sprite.svg"], 0, 2) %>
<%= JSON.stringify(compilation.assets["spritemap.svg"], 0, 2) %>
<%= JSON.stringify(compilation.assets["spritemap"], 0, 2) %>
Nothing printed

<%= JSON.stringify(htmlWebpackPlugin.files, 0, 2) %>

{
--
  | "publicPath": "",
  | "js": [
  | "dist/vendors~app.js",
  | "dist/app.js"
  | ],
  | "css": [
  | "dist/vendors~app.css",
  | "dist/app.css"
  | ]
  | }

from svg-spritemap-webpack-plugin.

@borm, can you confirm that it works with 3.4.4? It might be related to changes made in #79.

from svg-spritemap-webpack-plugin.

@cascornelissen maybe you mean 3.4.0?

don`t worked

from svg-spritemap-webpack-plugin.

@borm, no I meant 3.3.4, sorry for the typo. The changes introduced by #79 were released in 3.3.5 so I was wondering if it was related to that. But also some more fixes were added and released in 3.3.6, 3.3.7 and 3.4.0. Can you also check the latest version if 3.3.4 works?

from svg-spritemap-webpack-plugin.

3.3.4 works

sorry but 3.4.0 also works

Can you add this example https://github.com/borm/webpack-spritemap to examples?

from svg-spritemap-webpack-plugin.