1

I'm using React v15.4.1. I've followed this solution but in the place of where the component should be rendered, I am only getting a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg

My React component is set up like:

import theSVGicon from 'path/to/icon.svg';
...
<span dangerouslySetInnerHTML={{ __html: theSVGicon }} />

Other Notes:

  1. The image renders fine when I include it as the src in an image like this: <img src={theSVGicon}/>
  2. Code like the bottom of this page does work: <svg viewBox="0 0 64 64" width="64" height="64" fill="currentcolor"> <path d="M 28.495430026136273 0 L 35.504569973863724 0 L 37.22908963117581 ... 0 0 0 32 20"></path> </svg>
  3. Following this solution, I do see an svg component rendered, along with the other attributes. I also see the spacing for where it should be, but it is blank. More details:

from element inspector image link: https://i.stack.imgur.com/rpoXP.jpg

  1. Ideally, I want to set up my svg image like in (3) above so that I can tweak attributes like viewBox and height, which is supported in the latest React version.

Is something wrong with my loader? I am using Webpack and rendering server side using webpack-isomorphic-tools. I didn't want to look too much into this since it does work with an img and I have code that is supposed to handle SVGs based off of an earlier version of a boilerplate:

dev.config.js

...
module: {
    loaders: [
      ...
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
...

webpack-isomorphic-tools.js

...
assets: {
    ...
    svg: {
      extension: 'svg',
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser
    },
...

My last-ditch effort would be to redo and follow this

Community
  • 1
  • 1
writofmandamus
  • 1,151
  • 1
  • 23
  • 40

1 Answers1

1

Use svg-inline-react as an loader and to load svg as inline

{ test: /\.svg$/, loader: 'svg-inline' }

with specify the svg-inline loader it should work with your below line

<span dangerouslySetInnerHTML={{ __html: UpvoteFist }} />

but if only loader doesn't work for you then follow the guidlines they given as

import InlineSVG from 'svg-inline-react'; // ES2015

.......

 <InlineSVG src={require("svg-inline!icon.svg")} /> // Use with loader
Adeel Akram
  • 11
  • 4
  • putting it as the `src` in an `img` does work for me, but I wanted to render it as an svg-inline. – writofmandamus Feb 17 '17 at 06:57
  • Yeah, the svg-inline loader doesn't work for me. It would then throw an error about not being able to parse through a font awesome svg file in one of my node modules. Your second suggestion doesn't work either with a lot of `svg-inline-loader doesn't exist` doesn't exist errors. If you have one, I'm wondering how your webpack-isomorphic-tools.js file looks like? I think this guide is my closest chance for getting it to work: https://github.com/peter-mouland/react-lego/wiki/Importing-SVGs . One of the main things I need to figure out is why `svg` for me isn't included in images: extensions [... – writofmandamus Feb 17 '17 at 09:43
  • I'm getting the same error whether `require`-ing the loader directly or setting it in my webpack config: [1] [piping] error given was: `SyntaxError: Unexpected token & [1] at exports.runInThisContext (vm.js:53:16) [1] at Module._compile (module.js:373:25) [1] at Object._module2.default._extensions.(anonymous function) [as .webpack-loaders] (/path/to/app/node_modules/webpack-isomorphic-tools/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:274:11)` – writofmandamus Feb 17 '17 at 20:31
  • My solution may lie in here as I'm getting similar problems and used the same boilerplate app: https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/59 – writofmandamus Feb 17 '17 at 22:00