Reputation: 203
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
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