Question

我使用webpack使用以下加载程序加载我的svgs

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

这会内联我的所有svgs并在我的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>

在我的角度2 app.module.ts我有

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

在我的HTML中我有

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

这适用于Chrome和Safari，但不适用于firefox

Answer 1

Robert Longson给出的答案是正确的。

我删除了标记，在我的app.module中添加了{provide: APP_BASE_HREF, useValue: '/'}。如上所述here

SVG没有在使用webpack和angular 2

1 个答案: