search

jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

You may need an appropriate loader to handle this file type. #90

Open Tenkir opened 6 years ago

Tenkir commented 6 years ago

Running Webpack 3.8.1.

Error:

./src/components/Navigation/logo.svg
Module parse failed: Unexpected token (21:12)
You may need an appropriate loader to handle this file type.
| 
|         return (
|             <svg {...this.props}>
|                   <defs>
|     <polygon id="path-1" points="0 29.3122683 67.4495122 29.3122683 67.4495122 7.31707317e-05 0 7.31707317e-05"/>

Webpack.config.js:

          {
            test: /\.svg$/,
            exclude: /node_modules/,
            loader: require.resolve('svg-react-loader'),
            options: {
              xmlnsTest: /^xmlns.*$/
            }
          },

logo.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="68px" height="30px" viewBox="0 0 68 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <polygon id="path-1" points="0 29.3122683 67.4495122 29.3122683 67.4495122 7.31707317e-05 0 7.31707317e-05"></polygon>
    </defs>
    <g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2018---Home" transform="translate(-250.000000, -10.000000)">
            <g id="Navigation">
                <g id="Logo" transform="translate(250.000000, 10.000000)">
                    <polygon id="Fill-1" fill="#000000" points="7.32804878 19.2564146 10.992439 19.2564146 10.992439 10.0566585 7.32804878 10.0566585"></polygon>
                    <polygon id="Fill-2" fill="#000000" points="12.8239024 19.2564146 16.4882927 19.2564146 16.4882927 10.0566585 12.8239024 10.0566585"></polygon>
                    <path d="M21.9838537,11.8883415 L21.9838537,19.2434634 C21.9838537,19.2507805 21.9787317,19.2559024 21.9714146,19.2559024 L18.3333659,19.2559024 C18.3260488,19.2559024 18.3201951,19.2507805 18.3201951,19.2434634 L18.3201951,10.0693171 C18.3201951,10.062 18.3260488,10.056878 18.3333659,10.056878 L20.1523902,10.056878 C21.1643415,10.056878 21.9838537,10.8763902 21.9838537,11.8883415 Z" id="Fill-3" fill="#000000"></path>
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-6"></g>
                    <path d="M3.6504878,25.6617805 L25.662439,25.6617805 L25.662439,3.64982927 L3.6504878,3.64982927 L3.6504878,25.6617805 Z M0,29.3122683 L29.3121951,29.3122683 L29.3121951,7.31707317e-05 L0,7.31707317e-05 L0,29.3122683 Z" id="Fill-5" fill="#000000" mask="url(#mask-2)"></path>
                    <polygon id="Fill-7" fill="#000000" mask="url(#mask-2)" points="33.068122 11.0872683 37.3837317 11.0872683 38.5515366 14.6967805 39.7947073 11.0872683 44.0356829 11.0872683 44.0356829 20.1114146 41.0569024 20.1114146 41.0569024 15.3150732 39.3403171 20.1114146 37.7634878 20.1114146 36.0469024 15.3150732 36.0469024 20.1114146 33.068122 20.1114146"></polygon>
                    <polygon id="Fill-8" fill="#000000" mask="url(#mask-2)" points="58.7657561 11.0872683 62.5142927 11.0872683 64.4701463 15.2770244 64.4701463 11.0872683 67.4489268 11.0872683 67.4489268 20.1114146 64.2564878 20.1114146 61.7569756 15.1884878 61.7569756 20.1114146 58.7657561 20.1114146"></polygon>
                    <path d="M50.814878,20.2829268 C50.8382927,20.2829268 50.8580488,20.2865854 50.8814634,20.2865854 C53.2909756,20.28 55.2431707,18.3256098 55.2431707,15.9139024 L55.2431707,11.087561 L51.8597561,11.087561 L51.8597561,15.9387805 C51.8597561,16.4860976 51.4156098,16.9295122 50.8690244,16.9295122 C50.3217073,16.9295122 49.8782927,16.4860976 49.8782927,15.9387805 L49.8782927,11.087561 L46.5212195,11.087561 L46.5212195,16.1692683 C46.6543902,18.444878 48.5121951,20.2536585 50.814878,20.2829268" id="Fill-9" fill="#000000" mask="url(#mask-2)"></path>
                    <polygon id="Fill-10" fill="#000000" mask="url(#mask-2)" points="33.0680488 29.3122683 67.4487805 29.3122683 67.4487805 25.5710488 33.0680488 25.5710488"></polygon>
                </g>
            </g>
        </g>
    </g>
</svg>
mantissa7 commented 6 years ago

Did you get this working? I've tried the above code and it loads for me. 

"svg-react-loader": "^0.4.5",
"webpack": "^3.8.1"
jhamlet commented 5 years ago

Please provide a small repository that reproduces this issue so I can investigate