Generate icons using electron-icon-maker

[amilajack]

https://github.com/jaretburkett/electron-icon-maker

[lazytyper]

The electron-icon-maker requires a png file with a recommended size of 1024x1024 at least as input.
Better would be an icon maker which accepts svg files, too.
And it would be perfect, if the icon maker could create the icon.ico and icon.icns, too.

[kbrisso]

How do you want this to work exactly? A Webpack plugin?
https://webpack.js.org/contribute/writing-a-plugin/

Here is an icon processing plugin, I'm willing to give this a try. It's a good way to learn Webpack.
https://github.com/jantimon/iconfont-webpack-plugin

[lazytyper]

How do you want this to work exactly? A Webpack plugin? https://webpack.js.org/contribute/writing-a-plugin/

No, not an icon font. It's for the app icon. App icons are usually or mostly created as an SVG file. A Webpack plug-in could convert them into necessary icon files like PNG or .ico.

For icon fonts I am already using another Webpack plugin.

[kbrisso]

Sorry for the confusion. The font plugin is an example I would use to get the icon maker to run. Would you like the icon maker to be called from a Webpack plugin is my question. If so I can work on this.

[lazytyper]

Would you like the icon maker to be called from a Webpack plugin is my question. If so I can work on this.

Maybe an npm script would be the better way. What if you use Webpack with hot reload and the icons will be created everytime you edit the source code? This could cost unnecessary runtime. But if it's only a few milliseconds, then it doesn't matter.
The icons are only important when you build a package.

[lazytyper]

I changed my mind. The icons could be created when creating the main js. (config file: .erb/configs/webpack.config.main.prod.ts.

[kbrisso]

Let me do some research on this and I will post something next week.

[kbrisso]

@lazytyper I created a POC repo and was able to get icon maker code to run with a Webpack plugin. I used a forked version of this plugin to run it with Webpack 5. Do you want me to post the project so you can see how it works? I'm not sure if I want to use this particular plugin, I want a plugin to run once on build, this does but it has a watch. I don't think we need a watch.

This might work better.
https://github.com/artemdudkin/before-build-webpack

[lazytyper]

@kbrisso Sorry for the late answer. I've just been trying the webpack plugins by myself, I also tried
this here:
https://github.com/jacelynfish/run-once-plugin
but it does not work at all.

I also discovered that electron-icon-maker is using icon-gen, which does not work well: It does not scale SVG files, and if I use PNG, it's throwing errors, and it takes 10 seconds to create the files.

I can try another way without Webpack:

• adding a script .erb/scripts/extras.js for extra tasks, and a config file .erb/configs/extras.json for options (source file, sizes, file types, etc.)
• I'll use other libs like jimp and node-svg2img

[kbrisso]

@lazytyper No worries about reply everyone is busy..I modified the source of icon maker and did get it to work in a plugin. Not the best approach but I did get it to work, I can post code later. That being said from reading above post you want to use like to try another processor jimp or node-svg2img. I do think we can make something work in a plugin but I think it should be an optional feature to run because of the processing. Let me know what project you prefer and I can try and make something work. I 'm new to Webpack and this is a good exercise. My thinking is if we can get this to to work the configuration could be used for other pre-processing type stuff.