svg-sprite-loader

svg-sprite-loader copied to clipboard

Do you want to request a feature, report a bug or ask a question? Not sure if I'm doing anything wrong or if it's a bug...

I've built an Aurelia app with the Aurelia CLI using webpack 4 & the svg-sprite-loader. I'd like to extract almost all icons to an external sprite.svg which is working just fine but I'd like to inline 1 icon into my index.html which is used as my landing page icon and should be shown even if no other resources have been loaded.

The following template doesn't output anything in the final index.html:

...
<% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
  <%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
<% } %>
...

Parts of my config:

// ...
module.exports = ({production, server, extractCss, coverage, analyze, karma} = {}) => ({
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          publicPath: '/assets/icons/',
          spriteFilename: '_sprite.svg'
        }
      },
      // ...
    ]
  },
  plugins: [
    // ...
    new SpriteLoaderPlugin(),
    // ...
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),
    // ...
  ]
});

The resulting /assets/icons/_sprite.svg includes all icons as expected and can be used within my app.

Please let me know if I can give you any more information. If needed I could also upload my whole project since its pretty much the default Aurelia CLI output with some build adjustments but not much code inside...

Please tell us about your environment:

• Node.js version: 8.9.3
• webpack version: 4.20.0
• svg-sprite-loader version: 4.1.1
• OS type & version: Win 10

@suamikim hi! It would be great if you can provide me a piece of your project (I don't need it entirely) with package.json webpack config, htmlwebpackplugin template, some SVGs and JS code, which imports SVGs for external sprite.

Hi @kisenka here's the project which should include everything. As already stated, it's an Aurelia project so the general structure & configuration workflow might differ a little from a vanilla webpack project but the basics should still apply.

The relevant code lies within the client folder. To run it, simply go in there & run npm i & npm run build or npm run build-prod to create the build in the dist folder.

I'm happy to answer your questions or give you more info when needed!

Hi, I have same issue on my app too, with almost same config (with webpack 3, latest version of html-webpack-plugin and svg-sprite-loader).

The webpack config :

const SvgSpriteLoaderPlugin = require('svg-sprite-loader/plugin');

const buildHtml = chunk => {
    const obj = new HtmlWebpackPlugin({
        chunks: [chunk],
        template: `webpack-templates/login.ejs`,
    });
    console.log(obj);
    return obj;
};

...
// Loaders
{
    test: /\.svg$/,
    use: [
        {
            loader: 'svg-sprite-loader',
            options: {
                extract: true,
            },
        },
    ],
},

...

// Plugins

buildHtml('login', 'index.html'),
new SvgSpriteLoaderPlugin({
    plainSprite: true,
}),

And that's the output of the console.log of HtmlWebpackPlugin object :

{
  options:
   { template: 'webpack-templates/login.ejs',
     templateParameters: [Function: templateParametersGenerator],
     filename: 'index.html',
     hash: false,
     inject: true,
     compile: true,
     favicon: false,
     minify: false,
     cache: true,
     showErrors: true,
     chunks: [ 'login' ],
     excludeChunks: [],
     chunksSortMode: 'auto',
     meta: {},
     title: 'Webpack App',
     xhtml: false } 
}

There is no property files in it despite my different attempts to set the config. The sprite file is correctly included in build folder, but no svg included in the body like in the example.

Hello I just encountered the same problem. I wanted to use an inline svg sprite map like it is described in the example. After searching a bit it seems that there are breaking changes in html-webpack-plugin which makes this plugin not compatible with the latest version of html-webpack-plugin (at this time 4.3.0).

I solved my problem temporarily by forcing the version to 3.2.0. it would be a good thing that your plugin supports the api of the latest version of html-webpack-plugin .

I have downgrade svg-symbol-sprite-loader to 3.1.0, it works with my webpack-bundle-analyzer is 3.1.0