立即在Angular2中添加SVG

我使用angular2創建了Chrome擴展。我有幾個SVG文件的img文件夾。有沒有辦法一次導入所有的SVG文件，並在任何HTML模板中分別使用它們？立即在Angular2中添加SVG

例如，在C＃應用程序，我可以在_layout.cshtml導入這樣的：

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

從所有SVG文件生成img.svg，然後我可以用這樣的：

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

那麼有沒有辦法做到這一點我鉻擴展angular2應用程序？

順便說一句，我使用的WebPack如果這能幫助...

來源

2017-03-02 Nikas Žalias

@wOxxOm例子將是非常好的！ –

不清楚你的問題到底是什麼。你在問如何從Chrome擴展中列出文件（這是wOxxOm的回答），還是你問如何使用webpack生成組合的SVG文件？或者完全不同的東西？ – Xan

要在運行時讀取使用chrome.runtime一個擴展包目錄。 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('')); 
});

來源

2017-03-02 09:05:56 wOxxOm

立即在Angular2中添加SVG

回答

相關問題