Provide an example in the documentation

[jogjayr]

This loader doesn't have an example provided in the documentation. It may be obvious to people using React and JSX but providing usage examples would clear up confusion.

---

Happy to break this out into a separate issue, since this is a question about my usage of svg-inline-loader

I'm using it with Angular 1.5. My component file requires the SVG using:

// component controller
this.iconSvg = require('path/to/icon.svg');

My Angular template uses this:

<div>

    {{$ctrl.iconSvg}}

</div>

The generated output doesn't inline the SVG, instead providing a file or url-loader type output:

//generated output
this.iconSvg = __webpack_require__(11);

/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "05e675e0076e90460de5b3e3257738e5.svg";

/***/ },

I would have expected value of __webpack_require__(11) to be the inlined svg rather than a path to it.

I have checked my loader config and can verify that .svg uses svg-inline.

[davidpfahler]

I have a similar problem where the require call returns a URL /static/someHash.svg

[michaek]

When I've seen this happen, it's been because another loader was configured to match svgs. If you're still experiencing this, it might be helpful to post your webpack config.

[mkozhukharenko]

I'm using a config provided by react-storybook (link) . You can see that file-loader match svg as well, but if I remove svg from file loader it doesn't work either.

[hepiyellow]

Yep. a usage example would be really appreciated. How do I use it with react?