SVG support

[maxceem]

When I use topcoder-react-utils as it is, I had lots of issues with SVG files.

I've added the next rule from community app and all issues with SVG gone https://github.com/topcoder-platform/community-app/blob/develop/config/webpack/default.js#L20-L27

    rules: [{
      test: /\.svg$/,
      loader: 'file-loader',
      options: {
        outputPath: '/images/',
        publicPath: '/community-app-assets',
      },
    }],

Didn't dig deep why is it like this. But probably this rule can be added to topcoder-react-utils so SVG works out of the box.

[birdofpreyru]

@maxceem the config, as it is, handles inlining of SVGs via this rule: https://github.com/topcoder-platform/topcoder-react-utils/blob/master/config/webpack/app-base.js#L120. I guess, the problem in your case is that the rule ignores node_modules folder, by default, and you probably have some SVG dependencies there? So, it is better just to tune that rule in your case to still process legacy TC dependencies from node_modules.

[maxceem]

All errors were inside connect-app files.
And also /jsx|svg/ rule includes legacy TopCoder modules because of modification in the webpack config inside community app https://github.com/topcoder-platform/community-app/blob/develop/config/webpack/development.js#L20
The same modification I made for the connect app.

I've checked for communit app and same errors are showen here without additional svg rule:

• I've cloned develop branch of the community-app
• commented out these lines https://github.com/topcoder-platform/community-app/blob/develop/config/webpack/default.js#L20-L27
• run npm run dev
• got lots of error like this:

   ERROR in ./src/assets/images/dashboard/ico-checkmark.svg
   Module parse failed: Unexpected token (1:0)
   You may need an appropriate loader to handle this file type.
   | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   | <svg width="15px" height="13px" viewBox="0 0 15 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
   |     <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
    @ ./node_modules/css-loader?{"localIdentName":"[path][name]___[local]___[hash:base64:6]","modules":true}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./src/shared/components/Dashboard/MyChallenges/ChallengeTile/style.scss 7:25157-25224 7:47217-47284
  
  

[birdofpreyru]

Ah, sorry, @maxceem got it now: it is an indication that some SVGs are not handled properly; they are referenced via image src, or style url(..), rather than being properly imported into JS to be inlined. Ideally, we should refactor affected code, so we need no such extra rule.