Get the absolute path of each file

[mmikhan]

👋

Is there anyway to get the absolute path of each file when running the forEach() on a collection instance? For example, when running the following, I only get the svg, and name.

return collection.forEach((svg, name) => {
  console.log(
    `Found icon ${name}: ${svg.toString()}\n`
  );
});

I need to have the path of each file for the project I am working on and couldn't find anywhere in the code where I can find the path.

I really appreciate any help on this 😀

[cyberalien]

I assume you are using ImportDir function to import all icons from a directory?

Then you can use importer option to add source. Example:

const tools = require('@iconify/tools');

tools
	.ImportDir('svg', {
		importer: (source, options) => {
			return new Promise((fulfill, reject) => {
				tools
					.ImportSVG(source, options)
					.then((svg) => {
						svg.source = source;
						fulfill(svg);
					})
					.catch((err) => {
						reject(err);
					});
			});
		},
	})
	.then((collection) => {
		// Do stuff
	})
	.catch((err) => {
		console.error(err);
	});

Option importer is a function that returns a Promise. It imports icon using ImportSVG, then adds custom property source to it.

[mmikhan]

Damn, I never realised that there's a built-in importer() that I could use. I have been digging this from yesterday and even edited the source code to make it work 😑

Thanks man, really appreciate your work 🍺

[mmikhan]

@cyberalien forEach() on Collection class seems doesn't return any custom properties. How would you access the source custom property from then?

For now, I used the following though:

return collection.forEach((svg, name) => {
  console.log(
    `${svg.toString()}, ${collection['items'][name]['source']}`
  );
});

[cyberalien]

Works fine:

const tools = require('@iconify/tools');

tools
	.ImportDir('svg', {
		importer: (source, options) => {
			return new Promise((fulfill, reject) => {
				tools
					.ImportSVG(source, options)
					.then((svg) => {
						svg.source = source;
						fulfill(svg);
					})
					.catch((err) => {
						reject(err);
					});
			});
		},
	})
	.then((collection) => {
		collection.forEach((svg, name) => {
			console.log(name + ':', svg.source);
		});
	})
	.catch((err) => {
		console.error(err);
	});

You must be doing something wrong. Also I see redundant code in your example: collection['items'][name] is the same as svg, so instead of that big expression you just need svg.source

[mmikhan]

Thanks, man ✌️ I overlooked everything and used redundant code, needs to get some rest before knocking your door again 😬