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?
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:
<?php echo getIcon("calendar", "fs-3 text-primary", "duotone")?>
You can download a starter kit code from Metronic Downloads page.
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.
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.