Keenicons structure
I saw Keenicons icons and they are gorjeous.
I noticed that Keenicons need internal span for each path that the original SVG have.
Is this intencional?
This will make usage hard.
It easier (even in a developer sense)
to have all icon content in a single `content: \eeb6`
So we dont have to manage different spans in the front end
Do you have plans to merge that?
Thanks
Replies (5)
Hi,
Yes, the duotone version of KeenIcons requires inner span tags for the icon paths. The reason for this is when an icon has a duo colors style it requires to be included as an inline SVG image or as an HTML element with span tags for each color style. Outline and solid versions can be used with a single tag and class since they have a single color style.
You can use the online KeenIcons docs or offline docs at src/plugins/keen-icons/duotone/demo.html to get the required icon code and use in your app.
You can refer to our Starter Kit solutions to learn how to create getIcon function and print the icons in your pages using your server-side language:
<pre >
<?php echo getIcon("calendar", "fs-3 text-primary", "duotone")?>
</pre>
You can download a starter kit code from <a href="https://devs.keenthemes.com/metronic">Metronic Downloads page.
Regards.
Thanks for the reply!
I understand the way you created Duocolor icons.
Creating inline elements for each color.
But that doesn't need to be necessary.
So, if a may suggest a different approach,
you can split paths in two layers and put content using :before and :after pseudo-classes.
This will make your icons more easy to use and customize.
Something like FontAwesome does with theirs Duocolor icons.
References:
https://blog.vihanga.dev/duotone
https://fontawesome.com/docs/web/style/duotone
Hi,
Agree, FontAwesome's recent Duotone icons use 2 paths structure and they managed to implement it with inner pseudo elements. Great approach, apparently they implemented this recently, a year ago their Duotone icons were generated as inline SVG using javascript code.
Currently our Icons source SVG file may have more than 2 paths so the font awesome's approach we can't apply it at the moment but we will work on this further and improve the duotone icons in the next version of KeenIcons.
Regards.
I could not find the getIcon helper.
Can you send me the link?
In which StartKit I can find this?
Hi,
You can download a starter kit from Metronic Downloads and find out how getIcon helper is worth using icons array config for the paths.
Regards.
