@limetech/lime-elements
Version:
61 lines (60 loc) • 1.77 kB
JavaScript
export class CacheStorageIconCache {
constructor(cache) {
this.promises = {};
this.cache = cache;
}
/**
* Get icon data from the cache
*
* @param name - Name of the icon
* @param path - Path on the server where the assets are located
* @returns SVG markup
*/
async get(name, path = '') {
const cache = await this.cache;
const url = this.getUrl(name, path);
let response = await cache.match(url);
if (!response) {
response = await this.fetchData(url, cache);
}
return this.getIcon(response);
}
async fetchData(url, cache) {
let requestPromise = this.promises[url];
if (requestPromise === undefined) {
requestPromise = cache.add(url);
this.promises[url] = requestPromise;
}
await requestPromise;
return cache.match(url);
}
/*
* Get icon data from a response
*/
async getIcon(response) {
let svgData = await response.text();
// Some of the icons in the Icons8 library have hard coded black color on some of the paths.
// In order to apply coloring with CSS, these have to be set to 'currentColor'
svgData = svgData.replaceAll('#000000', 'currentColor');
if (!this.validSvg(svgData)) {
throw new Error('Invalid SVG');
}
return svgData;
}
/*
* Check if the given data is a valid SVG document
*/
validSvg(data) {
const parser = new DOMParser();
const svgDoc = parser.parseFromString(data, 'image/svg+xml');
return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
}
getUrl(name, path) {
let iconPath = path || '';
if (path && !path.endsWith('/')) {
iconPath = `${path}/`;
}
return `${iconPath}assets/icons/${name}.svg`;
}
}
//# sourceMappingURL=cache-storage-icon-cache.js.map