Svg-sprite-loader: No icon rendered

[n00dl3]

I tried this loader yesterday, and I can't figure out how to load icons, I'm working on an angular 2 app so I created a component that does more or less the same job as the react-one in the examples (see code below) but it does not display any icon.

from the README.md:

By default sprite renders when DOMContentLoaded event fires and injects as first child in document.body

• I don't see neither anything added to the body after page load (even before angular's bootstrap) nor a single reference to a sprite.js script in the list of sources in Chrome.
• I don't have any output at compile or run time, it just does not render....
• I removed my <base> tag

Here is my code :

import { Component, Input, OnInit, ElementRef} from '@angular/core';
var Glyphs = {};
var req = require.context("./icons", false, /\.svg$/);
req.keys().forEach(function(file: string) {
  var id = req(file);
  var name = /^\.\/(.*)\.svg$/.exec(file)[1];
  if (name) {
    Glyphs[name] = id;
  }
});

@Component({
  selector: 'lnk-icon',
  template: "",
  directives: [],
  providers: [],
  pipes: []
})
export class IconComponent implements OnInit {

  @Input("glyph")
  private glyph: string;

  constructor(private element: ElementRef) {
  }

  ngOnInit() {
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var svg = document.createElementNS(svgns, "svg");
    var use = document.createElementNS(svgns, "use");
    use.setAttributeNS(xlinkns,"href",Glyphs[this.glyph]);
    svg.appendChild(use);
    this.element.nativeElement.appendChild(svg);
  }

}

and my webpack config:

//stuff
  module: {
     loaders:[{
      test: /\.svg$/,
      loader: "svg-sprite"
    }]
  },
//more stuff

Note that I first tried using Angular's template syntax but didn't work neither...

[kisenka]

@n00dl3 setAttributeNS(xlinkns,"href",""+Glyphs[this.glyph]+")") remove redundant bracket from end of the line. I mean +")".

[n00dl3]

oh yeah, thanks.
But that does not come from here, it's a mistake from my copy/paste and older tests. I updated

[kisenka]

@n00dl3 could you please provide full test case? Webpack config, node js dependencies (just copy them from package.json), component code and a few arbitrary SVG files? It will be more faster to investigate your problem then. You can place testcase on gist.github.com or create separate repo under your account.

[n00dl3]

Just created the gist. thank you for taking time to answer me .
https://gist.github.com/n00dl3/b364815982b2faefc0d348937fe192de

[n00dl3]

I created a repo for testing, it will be easier for you to try:
just run

npm install
npm start

and you are good (server is listening on localhost:8080)

[kisenka]

@n00dl3 when svg files are required happens actually this:

When you require an image, loader transforms it to SVG symbol and add it to the array in special sprite class. When browser event DOMContentLoaded fires sprite will be rendered and injected as first child of document.body. Require statement e.g. require('svg-sprite!./image.svg') returns a symbol id, so you can reference it later in <svg><use xlink:href="#id"/></svg>.

/lib/web/sprite.js it's a client runtime which holds all symbols and render whole sprite at DOMContentLoaded event.

Loader works in following steps:

1. Process SVG image, convert it to symbol and return as a string.
2. Generate client runtime code, which add sprite.js as dependency, so it's becomes a part of a bundle and will be invoked on the _runtime_. Client runtime has symbol string on input and add it to the symbols list of the sprite.

[kisenka]

@n00dl3 great, give me some time.

[kisenka]

@n00dl3 just remove svg from this line https://github.com/n00dl3/test_svg_sprite/blob/master/config/webpack.common.js#L28 :) You override sprite-loader setup with file-loader.

[n00dl3]

F**k, 48 hours it was just there!!!! :rage4:
Well thank you very much.
Now excuse me, I have to suicide myself...

[kisenka]

No problem :)

BTW :scream:

[n00dl3]

"phantomjs-prebuilt": "^2.1.7"<-culprit

[princed]

@kisenka BTW, could we detect such cases somehow?

[kisenka]

@princed I think yes - http://webpack.github.io/docs/loaders.html#loaders

[kisenka]

@princed a pochemu vi sprrrashivaete?

[cartogram]

@n00dl3 Don't feel so bad, I just did the exact same thing! Lucky for me I found this thread

[aalenliang]

Great! I am with you!