CODEWITHSUNDEEP
angularsvgwebpack
Caroline Church
Caroline Church

Reputation: 203

SVG not showing in firefox using webpack and angular 2

I am using webpack to load my svgs using the following loader 

 {
     test: /\.svg$/,
     loader: 'svg-sprite-loader?' + JSON.stringify({
         name: 'icon-[1]',
         prefixize: true,
         egExp: './assets/svg/.*/(.*)\\.svg'
     })
 }

This inlines all my svgs and produces the following in my html 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
    <defs>
        <symbol viewBox="0 0 128 128" id="icon-add-new_128">
            <path d="M68 36h-8v24H36v8h24v24h8V68h24v-8H68z"></path>
            <path d="M64 8C33.076 8 8 33.074 8 64s25.076 56 56 56c30.926 0 56-25.074 56-56S94.926 8 64 8zm0 108c-28.673 0-52-23.327-52-52s23.327-52 52-52 52 23.327 52 52-23.327 52-52 52z"></path>
       </symbol>
    </defs>
</svg>

And in my angular 2 app.module.ts i have 

let actionBasedIcons = require.context('../assets/svg/action-based', false, /.*\.svg$/);
actionBasedIcons.keys().forEach(actionBasedIcons);

and in my html i have 

<svg class="ibm-icon" aria-hidden="true">
    <use xlink:href="#icon-add-new_128"></use>
</svg>

This works fine in Chrome and Safari but not in firefox

Upvotes: 1

Views: 1023

Answers (1)

Caroline Church
Caroline Church

Reputation: 203

The answer that Robert Longson gave was correct.

I removed the tag and in my app.module i added {provide: APP_BASE_HREF, useValue: '/'}. As mentioned here

Upvotes: 2

Related Questions