I'm getting the following error when I attempt to load an svg icon. If I manually paste the contents of the svg file into the <template>
tag, the icon renders as expected. Is there something else I'm missing in the webpack config?
ERROR in ./src/assets/noun_848947_cc.svg
Module parse failed: C:\repo\node_modules\vue-svg-loader\index.js!C:\repo\src\assets\noun_848947_cc.svg Unexpe
cted token (1:724)
You may need an appropriate loader to handle this file type.
| module.exports = {template: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path style="text-indent:0;text-transform:none;block-progression:tb" d="M49.938 5.007c-.256.013-.49.0
66-.688.125l-40 16A2.051 2.051 0 0 0 8 23.007v54a2.05 2.05 0 0 0 1.25 1.844l40 16a2.024 2.024 0 0 0 1.5 0l40-16A2.05 2.05 0 0 0 92 77.008v-54a2.052 2.052 0 0 0-1.25-1.876l-40-16a1.933 1.933 0 0
0-.812-.125zM50 9.164l34.594 13.843L70 28.82 35.406 15.007 50 9.164zm-20 8l34.594 13.843L50 36.82 15.406 23.007 30 17.164zm-18 8.781l36 14.406v49.657L12 75.633V25.945zm76 0v49.688L52 90.008V40.3
5l16-6.406v13.062a2 2 0 1 0 4 0V32.351l16-6.406z" overflow="visible" color="#000"/><text y="115" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial,
Sans-serif">Created by Rockicon</text><text y="120" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg
>'};
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PlannedWork.vue 43:0-52
@ ./src/components/PlannedWork.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/ActiveWave.vue
@ ./src/components/ActiveWave.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {},
// other vue-loader options go here
},
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
},
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.svg$/,
loader: 'vue-svg-loader',
},
],
},
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 49.937503,957.36963 c -0.25586,0.0126 -0.4893,0.0653 -0.6875,0.125 l -39.9999997,16 c -0.7397,0.29923 -1.25829,1.07711 -1.25,1.875 l 0,54.00007 c 0.004,0.7875 0.51999,1.5484 1.25,1.8437 l 39.9999997,16.0001 c 0.47513,0.1921 1.02487,0.1921 1.5,0 l 40,-16.0001 c 0.73001,-0.2953 1.24589,-1.0562 1.25,-1.8437 l 0,-54.00007 c 0.008,-0.79789 -0.5103,-1.57577 -1.25,-1.875 l -40,-16 c -0.27834,-0.11001 -0.55664,-0.13757 -0.8125,-0.125 z m 0.0625,4.15625 34.59375,13.84375 -14.59375,5.8125 -34.59375,-13.8125 14.59375,-5.84375 z m -20,8 34.59375,13.84375 -14.59375,5.8125 -34.59375,-13.8125 14.59375,-5.84375 z m -18,8.78125 36,14.40625 0,49.65632 -36,-14.375 0,-49.68757 z m 76,0 0,49.68757 -36,14.375 0,-49.65632 16,-6.40625 0,13.06253 a 2.0001995,2.0001995 0 1 0 4,0 l 0,-14.65628 16,-6.40625 z" fill="#000000" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Rockicon</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>