Idea: Modularize icon generation to allow for more combinations

[daPhipz]

Since there are already different versions of the quickemu icon (with/without background, different color schemes etc), I thought that it would be nice if they could be easily combined with the distro icons.

My idea is to remove the quickemu "branding" from the SVGs in /src. Then, e.g. by executing a script, the different distro icons can be combined with any quickemu icon variant - maybe like this:

combine.sh path/to/distro-icon.svg path/to/quickemu-icon-variant.svg

However, even after researching a bit, I couldn't find a CLI tool that can layer two SVGs on top of each other. Do you know about something like this?

What do you think about this?

[Lukewh]

I think it's a good idea to be able to run this as part of the minify.sh script (that should probably be renamed build or something at this point). It could auto generate all combinations and create pngs output into an archive to he released.

[daPhipz]

Yep, that's what I imagined :) I'll look into ImageMagick this weekend, maybe we can achieve the combining of SVGs/PNGs that way. If everything else fails, we could also modify the SVG XML directly, but I fear doing this robustly this is a little bit over my capabilities 😅

[Lukewh]

I also thought about modifying the svgs directly. I actually think this might be straight forward enough. If the os icons are created with an SVG group with a certain ID, we can just inject into the id

[Lukewh]

An alternative option is to have a base SVG and just replace the hex in the appropriate places with string replace 🤔

[daPhipz]

I'll have a look into that this weekend, if you don't mind 👍🏼

[Lukewh]

Please do. It would be good to do it as a separate script that just takes one image with an argument for the version.

That way we can use that script in another script to loop and generate them for the build 👍

[daPhipz]

How are you getting these compact SVG notations?

<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M224.874 86L108 86C105.239 86 103 88.2386 103 91C103 93.7614 105.239 96 108 96L216.248 96C217.021 94.8536 217.82 93.7092 218.646 92.5695L222.307 87.5164L224.874 86Z" fill="white"/>
<path d="M188.353 150.716C187.484 153.025 186.569 155.457 185.644 158L62 158C59.2386 158 57 155.761 57 153C57 150.239 59.2386 148 62 148L189.491 148L189.131 148.649L188.353 150.716Z" fill="white" fill-opacity="0.7"/>
<path d="M175.008 209L42 209C39.2386 209 37 211.239 37 214C37 216.761 39.2386 219 42 219L173.636 219C173.665 218.854 173.693 218.709 173.721 218.567L173.751 218.418C174.371 215.263 174.778 213.158 175.031 211.502C175.013 210.665 175.006 209.831 175.008 209Z" fill="white" fill-opacity="0.3"/>
<path d="M179.159 271L37 271C34.2386 271 32 273.239 32 276C32 278.761 34.2386 281 37 281L186.772 281C185.787 279.72 184.785 278.458 183.765 277.214C182.01 275.178 180.484 273.1 179.159 271Z" fill="white"/>
<path d="M217.848 332L52 332C49.2386 332 47 334.239 47 337C47 339.761 49.2386 342 52 342L223.195 342C222.209 340.094 221.214 338.193 220.209 336.299C219.414 334.853 218.627 333.42 217.848 332Z" fill="white" fill-opacity="0.6"/>
<path d="M247.238 394L92 394C89.2386 394 87 396.239 87 399C87 401.761 89.2386 404 92 404L251.287 404C249.96 400.655 248.611 397.322 247.238 394Z" fill="white"/>
<path d="M301.279 56.8628C299.318 65.6146 285.51 54.9374 282.892 64.8409C267.428 53.9502 281.943 76.6296 279.896 78.0626L279.771 78.0379L278.543 77.6657C277.781 77.2119 276.692 76.4707 275.146 75.0396C261.437 82.145 257.294 101.692 242.939 110.172C231.535 125.91 225.872 144.281 216.431 161.282C210.144 177.987 204.203 194.759 205.095 212.877C203.615 227.19 195.791 245.512 206.671 257.836C222.6 277.164 234.494 300.036 246.601 322.033C265.533 357.684 281.018 395.159 293.975 433.179C296.953 424.92 295.063 451.169 300.426 454.02C300.974 440.817 302.423 419.947 304.295 403.875C306.098 361.251 293.091 319.883 293.49 277.4C293.594 275.626 293.666 273.796 293.771 271.989L294.784 266.847L294.158 266.724C295.631 245.983 299.051 223.874 316.839 211.104C334.845 198.92 357.97 199.511 378.079 192.54C382.564 190.957 387.16 189.864 391.727 189.345C391.766 189.34 391.817 189.375 391.853 189.369C405.147 187.97 418.5 190.725 431.097 195.406C431.283 195.476 431.513 195.585 431.699 195.655C432.845 196.086 434.087 196.538 435.215 196.998C444.568 199.721 462.994 207.227 467.746 201.32C456.818 187.525 437.7 184.594 422.463 177.002C420.019 176.041 416.989 174.923 413.913 174.016L398.899 167.408L395.205 165.637L395.18 165.762L341.096 143.759C340.364 142.772 339.556 141.749 338.777 140.957L392.07 158.507L392.119 158.255C393.962 159.065 395.806 159.791 397.705 160.399L397.681 160.524L434.915 175.286C441.092 179.09 447.838 182.338 454.419 184.094C465.109 187.864 475.891 207.059 479.308 208.566C480.947 190.905 465.205 179.751 451.862 171.865C436.718 160.411 411.63 155.803 413.257 132.714C412.859 131.005 412.473 129.301 411.917 127.61L407.119 117.652L407.395 117.576C400.55 105.295 389.521 95.1947 376.763 89.6354C364.449 82.453 350.481 74.9864 336.738 70.4015C329.244 83.4465 328.88 57.3369 316.005 62.537C305.769 61.7518 306.614 64.6639 300.432 56.8615L301.279 56.8628ZM365.111 111.998C368.753 112.616 372.751 114.095 376.645 116.356C386.977 122.372 392.612 131.895 389.272 137.621C385.933 143.347 374.804 143.075 364.477 137.035C354.15 130.995 348.478 121.657 351.826 115.891C353.914 112.3 359.054 110.972 365.111 111.998Z" fill="white"/>
<path d="M362.5 137C372.853 143.624 381.252 143.64 385.5 137C389.748 130.36 386.353 122.624 376 116C365.647 109.376 356.248 109.36 352 116C347.752 122.64 352.147 130.376 362.5 137Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M377.506 138.821C381.263 138.817 383.336 137.534 384.23 136.138C385.123 134.742 385.419 132.322 383.848 128.909C382.305 125.556 379.186 121.903 374.693 119.029C370.201 116.154 365.577 114.854 361.886 114.858C358.129 114.862 356.056 116.145 355.163 117.541C354.269 118.937 353.974 121.357 355.544 124.77C357.088 128.123 360.206 131.776 364.699 134.65C369.192 137.525 373.815 138.825 377.506 138.821ZM389.5 138.862C385.252 145.502 372.357 145.485 362.004 138.862C351.651 132.238 346.703 121.486 350.951 114.846C355.199 108.207 367.035 108.193 377.388 114.817C387.741 121.44 393.748 132.222 389.5 138.862Z" fill="white"/>
</svg>

Once I open an SVG in Inkscape and save it, there are indentations and a lot of Inkscape-specific cruft that will make manipulating the SVG more difficult...

[Lukewh]

Try running it through svgo 👍

I also think inkscape has an export function that you can tweak the output