Improvement: split svg.html

[vanodevium]

It is bad decision to have one big file for all icons.

Let's imagine: I want to change only one icon, but I have to override full file. Ugly!

---

Idea: split svg.html into svg/name.html

So if a developer wants to change some icon, he doesn't override the full svg.html, just a concrete small file.

[1bl4z3r]

Hi @vanodevium,

For this, I would've to disagree with you. svg.html partial acts as a single source of truth for all SVGs used in the theme; basically a glorified dictionary, so that if one decides to change, extend or modify the SVGs, it would be one file, as opposed to n number of files and if a component needs an image, asks "Yo! svg.html, what's the content for SVG for this name?"

This makes lives a whole lot easier for me, anybody using this theme (which includes you too :wink:) and anyone coming from original Hermit theme.

However, I am open to suggestions as always.

[vanodevium]

Hi @1bl4z3r

Okay, maybe if you consider this file as the only source of truth, it makes sense.

But personally, I don't see a problem with leaving the if-else conditions in this file, and moving the svg content to micro includes.

Let me show the problem with a live example.

I changed the colors of the theme as a whole:

// Colors
$theme: #0074d9;
$text: hsl(204, 28%, 93%);
$theme-highlight: $theme; // cursor selection
$theme-background: #1a569e; // background
$theme-background-dark: #1c3a67; // footer background
$theme-dark: #152034; // dark color for base code and scroll
$typewriter: $theme;

But they did NOT override the icon colors, because the icon colors are sealed in this one file. So I had to override the whole file to change only 2 values (scroll-to-top circle and arrow)

[1bl4z3r]

Yep yep yep.

My bad, I'd pooped that thing (scroll-to-top circle and arrow) into the theme. I didn't take in account for the color changes.

I am fixing that as I speak

[1bl4z3r]

Hi @vanodevium again,

This is fixed. You can extend _colors.scss and edit following according to your choice

// Scroll to Top Default colors

$stt-stroke:#CCC;
$stt-circle:#3b3e48;
$stt-arrow:#018574;

Let me know if you find any issues with this.

[1bl4z3r]

Closing this issue. Re-open if required