SVG Icons (octicons) - Githubissues

jannis-baum / Vivify

Bring your Markdown to life

GNU General Public License v3.0

34 stars 4 forks source link

SVG Icons (octicons) #162

Closed tuurep closed 2 months ago

tuurep commented 2 months ago

Close #102

tuurep commented 2 months ago

I decided to do this in 2 steps:

[x] Just add the icons + their colors
[x] svg-to-text alignment
- Hopefully we can use the same solution for #131

tuurep commented 2 months ago

Notes:

Made sure there's no whitespace between svg and link text, because it looks awkward when the space gets the link underline
- Add the space as svg margin-right or something like that
I removed some \ns from the #top-nav and am not fully sure if they were necessary there but I'm trying to hopefully use CSS for these sort of things

tuurep commented 2 months ago

@jannis-baum I'm proposing new colors for dark theme dir and file icons:

How's that look? (if you can ignore the alignment :smile:)

dir: #59739c file: #989898

For back button I'm suggesting to reuse --text-secondary

(todo: alignment)

tuurep commented 2 months ago

Ready for review

backbutton-after

jannis-baum commented 2 months ago

Hey @tuurep thank you, this looks cool! I will look at it as soon as I can, might still be a few days though. Talk soon!

tuurep commented 2 months ago

Yeah, love the link color change. I also prefer that but didn't think to suggest it.

Gray icon colors look good on dark theme, approved

Do you think it would make sense to allow people to pick alternative icons?

Yeah absolutely, but also I was thinking it's kind of already possible with custom stylesheets with something like:

.icon-directory > path {
   d: path ('foo foo foo foo foo foo foo foo etc')
}

or save an svg file in my vivify conf dir and point to it

(dunno how accurate the above are, I could test this as well)

So I think it might already be well customizable, but does require some knowledge of CSS (but so does all other theming)

What do you think?

Also, I think we can merge but I think this is pending 1 approval from either you or tweekism :)

jannis-baum commented 2 months ago

Oh nice, I wasn't aware of that CSS feature! Cool. Yes, totally enough I'd say. We can point people to it if they ask for it. I'll approve and you can merge it :)

Edit: Looks like I can't approve it anymore because I made a commit to it? Not sure. I'll just bypass the review and merge it then ^^

tuurep commented 2 months ago

Yeah can confirm this is possible, for example:

/* https://primer.style/foundations/icons/feed-star-16/ */
.icon-directory > path {
    d: path("M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.252-12.932a.476.476 0 0 0-.682.195l-1.2 2.432-2.684.39a.477.477 0 0 0-.266.816l1.944 1.892-.46 2.674a.479.479 0 0 0 .694.504L8 10.709l2.4 1.261a.478.478 0 0 0 .694-.504l-.458-2.673L12.578 6.9a.479.479 0 0 0-.265-.815l-2.685-.39-1.2-2.432a.473.473 0 0 0-.176-.195Z");
}

However we might be quite reliant that the SVG used is exactly 16x16 pixels, but maybe that's tweakable on the svg tag as well?

jannis-baum commented 2 months ago

Great, thanks for checking it! I think as long as it's possible it's fine for now :) If it doesn't work for whoever will ask for it in the future we can reconsider