search

kaiiiz / hugo-theme-monochrome

Monochrome is a fast, clean and responsive hugo theme
https://kaiiiz.github.io/hugo-theme-monochrome/
MIT License
171 stars 52 forks source link

Problems with the new icon tag #10

Closed Ran-n closed 2 years ago

Ran-n commented 2 years ago

Im trying to implement this change: svg-wrapper shortcode has been changed to icon

But im having trouble since i want to use icons that feather doesnt have like the bitcoin icon. Is there a way to implement this on this knew system? If not, would you mind adding the svg-wrapper back so that we can make use of it too?

kaiiiz commented 2 years ago

The original purpose of svg-wrapper is to add fill: color property to the style of inner SVG for light/dark mode capability.

However, in the recent development, I found out that SVG is not always implemented by filling the color. (e.g. takes feather icon, for example, it's implemented mostly by stroke) Adding fill property to those SVGs will become a total mess. Besides, it seems that using fill: currentColor makes the most of the SVG implementation follow the current text color, which achieves the goal of svg-wrapper.

Based on the above reasons, I decided to remove the functionality of svg-wrapper and left the flexibility to the end-users, so the only purpose of the shortcode now is to embed built-in icons, hence the new name icon.

If you really want to have a wrapper that wraps your SVG, you can create your own shortcode under the project folder (/layouts/shortcodes/\<SHORTCODE>.html). See https://gohugo.io/templates/shortcode-templates for more details.

kaiiiz commented 2 years ago

Take bitcoin icon from simple icons for example

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bitcoin</title><path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z"/></svg>

Add fill="currentColor" to the SVG will make it support light/dark mode switch in Monochrome v1.0.0. You may also need to specify its width and height, Monochrome by default use 24px.

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor"><title>Bitcoin</title><path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z"/></svg>

Add the above SVG to /layouts/shortcodes/bitcoin.html, and you can use {{< bitcoin >}} everywhere in your project to render the bitcoin icon. For advanced usage such as rendering links, check out hugo documents for more details about shortcode parameters.

By the way, Monochrome has a class name called icon and it makes the icon link has the right color with hover effect. You can use it in this way if you're creating your own shortcode:

<div class="icon">
    <a rel="noopener" target="_blank" href="<your link>">
        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor"><title>Bitcoin</title><path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z"/></svg>
    </a>
</div>
Ran-n commented 2 years ago

@kaiiiz Oh ok, i guess its cause im a hugo newbie. It would be could if you could add it so any svg could be used (either by providing the link to it or the path on the static folder), that way the theme would be so reliant on feather.

Also, I've noticed that the images dont seem to respond to the width tag anymore. I have this tag: <img src="https://raw.githubusercontent.com/Ran-n/svgs/main/linguas/gz_0.svg" width="24px" height="24px" alt="galego" title="Galego"> And i just get a little thin strip that goes all the way sideways.

kaiiiz commented 2 years ago

It would be could if you could add it so any svg could be used (either by providing the link to it or the path on the static folder), that way the theme would be so reliant on feather.

If I’m not mistaken, you wish to add a shortcode 

<div class="icon">
    <a rel="noopener" target="_blank" href="<your link>">
        {{ .Inner }}
    </a>
</div>

In this way, you can wrap any SVG with class icon using a shortcode (replace {{ .Inner }})?

I can extend the icon shortcode with this feature. However, the only purpose of this wrapper is to add the link hover effect and set the SVG size to 24x24. For dark/light switch capability, this is something that the end-users need to care about themselves, since applying fill: currentColor and stroke: currentColor in .icon svg CSS will not make all SVG implementation work well.

Also, I've noticed that the images dont seem to respond to the width tag anymore. I have this tag: <img src="https://raw.githubusercontent.com/Ran-n/svgs/main/linguas/gz_0.svg" width="24px" height="24px" alt="galego" title="Galego"> And i just get a little thin strip that goes all the way sideways.

Yes, this is the bug. The img class should has max-width: 100% and not width: 100%. Thanks for your report, I'll create a bug-fix release soon.

Ran-n commented 2 years ago

If I’m not mistaken, you wish to add a shortcode

Yeah, sort of. My original concept was to have icons that i can press to get me to a link, others that just exist there for information porpuses and others that when I click them they copy something to the clipboard.

this is something that the end-users need to care about themselves

I see, i undertand.

Yes, this is the bug. The img class should has max-width: 100% and not width: 100%. Thanks for your report, I'll create a bug-fix release soon.

Cool, great, cant wait.

Ran-n commented 2 years ago

Ok, i just checked the most recent update and that fixes the image size issue.