Skip to content
This repository has been archived by the owner on Oct 9, 2020. It is now read-only.

Provide an example in the documentation #24

Open
jogjayr opened this issue Apr 29, 2016 · 4 comments
Open

Provide an example in the documentation #24

jogjayr opened this issue Apr 29, 2016 · 4 comments

Comments

@jogjayr
Copy link

jogjayr commented Apr 29, 2016

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
Copy link

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

@michaek
Copy link

michaek commented Dec 22, 2016

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
Copy link

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants