{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/595","labels_url":"https://api.github.com/repos/webpack/webpack/issues/595/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/595/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/595/events","html_url":"https://github.com/webpack/webpack/issues/595","id":49497553,"number":595,"title":"The webpack way to load svg?","user":{"login":"jehoshua02","id":625814,"avatar_url":"https://avatars.githubusercontent.com/u/625814?v=3","gravatar_id":"","url":"https://api.github.com/users/jehoshua02","html_url":"https://github.com/jehoshua02","followers_url":"https://api.github.com/users/jehoshua02/followers","following_url":"https://api.github.com/users/jehoshua02/following{/other_user}","gists_url":"https://api.github.com/users/jehoshua02/gists{/gist_id}","starred_url":"https://api.github.com/users/jehoshua02/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jehoshua02/subscriptions","organizations_url":"https://api.github.com/users/jehoshua02/orgs","repos_url":"https://api.github.com/users/jehoshua02/repos","events_url":"https://api.github.com/users/jehoshua02/events{/privacy}","received_events_url":"https://api.github.com/users/jehoshua02/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":21,"created_at":"2014-11-20T05:59:04Z","updated_at":"2015-12-23T12:43:26Z","closed_at":"2015-07-19T21:35:41Z","body":"Every time I use svg images, I want to provide png fallbacks. I was looking into using the `file-loader`, but I need to do a bit more:\r\n\r\n+ Move svg and png fallback files into the destination folder.\r\n+ Bundle a module for the client to check for svg support.\r\n+ Bundle a module for the client that returns the correct url for the image based on svg support.\r\n\r\nI hoped there would be an `svg-loader` but didn't find one in the list. Maybe it's a good idea?\r\n\r\nObviously we only want to check for svg support one time so the svg support test module would be [memoized](http://en.wikipedia.org/wiki/Memoization).\r\n\r\nI'm using React, so my example would look like this:\r\n\r\n__my-logo.jsx__\r\n\r\n```jsx\r\nvar React = require('react');\r\nmodule.exports = React.createClass({\r\n  render: function () {\r\n    return (\r\n      <img src=\"{require('my-logo.svg')}\" />\r\n    )\r\n  }\r\n});\r\n```\r\n\r\nI would imagine the configs would look something like this:\r\n\r\n__webpack.config.js__\r\n\r\n```js\r\nmodule.exports = {\r\n  module.loaders = [\r\n    { test: /\\.svg$/, loader: 'svg-loader' }\r\n  ]\r\n}\r\n```\r\n\r\nNot a requirement in my situation, but a nice to have: the `svg-loader` could take it one step further and generate the png fallback automatically as well. I'm using [`gulp-svg2png`](https://www.npmjs.org/package/gulp-svg2png). The `svg-loader` can learn something here from `gulp-svg2png` to generate png. I'm using the `scale` option to enlarge the png so it is more crisp. Query params could be passed to `svg-loader`:\r\n\r\n__webpack.config.js__\r\n\r\n```js\r\nmodule.exports = {\r\n  module.loaders = [\r\n    { test: /\\.svg$/, loader: 'svg-loader?{png:{scale:2}}' }\r\n  ]\r\n}\r\n```\r\n\r\nWhat is the \"webpack way\" to load svgs with png fallbacks? A new loader or some other way?"},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/166887381","html_url":"https://github.com/webpack/webpack/issues/595#issuecomment-166887381","issue_url":"https://api.github.com/repos/webpack/webpack/issues/595","id":166887381,"user":{"login":"vickychijwani","id":439616,"avatar_url":"https://avatars.githubusercontent.com/u/439616?v=3","gravatar_id":"","url":"https://api.github.com/users/vickychijwani","html_url":"https://github.com/vickychijwani","followers_url":"https://api.github.com/users/vickychijwani/followers","following_url":"https://api.github.com/users/vickychijwani/following{/other_user}","gists_url":"https://api.github.com/users/vickychijwani/gists{/gist_id}","starred_url":"https://api.github.com/users/vickychijwani/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vickychijwani/subscriptions","organizations_url":"https://api.github.com/users/vickychijwani/orgs","repos_url":"https://api.github.com/users/vickychijwani/repos","events_url":"https://api.github.com/users/vickychijwani/events{/privacy}","received_events_url":"https://api.github.com/users/vickychijwani/received_events","type":"User","site_admin":false},"created_at":"2015-12-23T12:43:26Z","updated_at":"2015-12-23T12:43:26Z","body":"Found this [svg-url-loader](https://www.npmjs.com/package/svg-url-loader) that does the right thing (i.e., like `url-loader` except it doesn't encode the whole SVG). Tested with `css-loader`, didn't try with `html-loader`."}}