Angular2でSVGを一気に追加

Question

私はangular2でchrome extensionを作成しています。 SVGファイルが少ないimgフォルダがあります。一度にすべてのsvgファイルをインポートし、HTMLテンプレートで別々に使用する方法はありますか？

<svg class="icon" style="fill: red;"><use xlink:href="#grid" /></svg> 

：すべてのSVGファイルからimg.svgを生成し、その後、私はこのようにそれを使用することができます

@Html.Raw(System.IO.File.ReadAllText(Enviroment.WebRootPath + "/img/img.svg")) 

：私はこのような_layout.cshtmlにインポートすることができますC＃アプリケーションの例では

これを行う方法はありますか？chrome extension Anger2アプリですか？

この場合に役立ちますところで私は、実行時の使用chrome.runtimeで拡張パッケージディレクトリを読み取るには...

Answer 1

をWebPACKのを使用しています。 getPackageDirectoryEntry：

function readFiles(path, extension) { 
    return new Promise(resolve => { 
     chrome.runtime.getPackageDirectoryEntry(root => { 
      const rootLen = root.fullPath.length; 
      root.getDirectory(path.replace(/^\//, ''), {create: false}, dir => { 
       dir.createReader().readEntries(entries => { 
        Promise.all(entries 
         .filter(e => e.isFile && e.name.endsWith(extension)) 
         .map(e => { 
          const url = chrome.runtime.getURL(e.fullPath.substr(rootLen)); 
          return fetch(url) 
           .then(r => r.text()) 
           .then(text => ({text, name: e.name})); 
         }) 
        ).then(resolve); 
       }); 
      }); 
     }); 
    }); 
} 

使用法：

readFiles('/img', '.svg').then(svgs => { 
    svgs.forEach(svg => { 
     // svg.name is the file name 
     // svg.text is the file contents 
     ................ 
    }); 
}); 

または

readFiles('/img', '.svg').then(svgs => { 
    document.body.insertAdjacentHTML('beforeend', svgs.map(svg => svg.text).join('')); 
});