Changed all icons for svgs

[SergioCasCeb]

• Previously all icons were imported from Font Awesome, so to not depend on such a system anymore all icons have been substituted for SVGS

[netlify[bot]]

✅ Deploy Preview for thingweb-playground ready!

Name	Link
🔨 Latest commit	d45f2f37c63641b69560415c4fb17cc8de5383e8
🔍 Latest deploy log	https://app.netlify.com/sites/thingweb-playground/deploys/65aa9ade721e130008f103f4
😎 Deploy Preview	https://deploy-preview-554--thingweb-playground.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SergioCasCeb]

@egekorkan the thing about having the icons as code, it allows me to change their color dynamically much easier. If I have them as images I have to utilize an extra mask on top of the image in order to change the image's colors.

[egekorkan]

I can see the reasoning. In that case, we need to have a way to manage them. How do you generate the code? If it is simply by "exporting" from something like inkscape, we should still put the SVG files but not use them in the code but refer to them from the code via comments. Not needing this would be cooler though.

[SergioCasCeb]

I am getting them from Font Awesome as they also allow you to download the SVGs or copy the code directly. That way the style stays consistent.

[egekorkan]

Some small things to do:

• Fixing merge conflicts
• Fitting the attribution comment into the svg (e.g. https://fontawesome.com/icons/tree?f=classic&s=solid) is needed. To make it easier, we can put both SVGs inline into template.html and js code only hides or shows the relevant one.

[SergioCasCeb]

@egekorkan , I just realized now that it is deployed in Netlify, that when we build the project for production all comments are removed, including those in HTML for the SVG attribution, will this be an issue?

If it is we will probably will have to either:

• Host the icons ourselves from Font awesome
• use them all as images instead of inserting the code directly

[egekorkan]

all comments are removed, including those in HTML for the SVG attribution, will this be an issue?

Nope, the source code matters as long as the source code is public :)

[egekorkan]

It is much better now. However, it is still not clear where the inline svgs are copied from so it is difficult to maintain later on.

[SergioCasCeb]

It is much better now. However, it is still not clear where the inline svgs are copied from so it is difficult to maintain later on.

If you mean that there is no attribution for those icons specifically, I did add it. But if you mean that just showing that it is from font awesome is not enough then I will still lean towards hosting them ourselves, that way we have all the icons locally, and they can just be added by utilizing their respective classes in an (icon) element. This does add more size to the project, but it also reduces the styling necessary to make sure the svgs show properly and assures a more consistent style/size.

[egekorkan]

comments are added as expected, merging