I’m planning to make my own SVG icon library and use it through my website, so I can for example show a house icon next to the “Home” link in the navbar, or show an arrow icon next to a link that’ll open in a new tab. However, I’m not sure what’s the best way to implement this.
I’ve previously done it like this in other projects (using the tabler icons library): <i class="ti ti-home"></i>, and I’d like to do something similar for my own website, though avoiding the use an icon font (which is how I believe the prior example works). I’ve also used the iconify web component before.
My website is made using Eleventy and Nunjucks, plus Webpack. I believe I could either make a Nunjucks partial or a web component to handle icons. Ideally, I’d like to also be able to style icons through CSS (change color, size and so on).
If anyone else has also faced this challenge I’d like to know what solution you came up with
I’ve only done a very small amount with SVG icons (and no icon fonts at all), but my layout builder has both help icons and colour palette icons as SVG in line with the text. I used the inline-flex method with vertical alignment control. No frameworks or web components needed!
Feel free to take a look at the source of that page, it’s pretty simple: a <span> that contains two items, the text and the svg. The CSS then sets up that span as inline-flex and aligns the two children vertically.
I would suggest using inline SVG for this. I’m unfamiliar with Eleventy’s usage, but my static site generator Zola allows for user-defined templates that make for quick reference throughout the site (e.g., my_icon()).
SVG elements are just HTML elements, and can be styled with CSS.
i use lucide, and the way i do it is i have a shortcode that injects the svg into the final page. so like {% lucide "icon name" %}, and then the lucide shortcode is like return bigAssListOfLucideIcons[name]. its mostly based off of this plugin below, though i did change the code a bit. maybe this would help!
