Add custom icons

[vaga]

I have to find a solution to add custom icons.

• 83

• 86

[dogo77]

hi, i noticed that feather icons hasn't accepted new icons since over 2 years, and a lot of icons are missing in this set (ie. mastodon to name one) might switching to https://simpleicons.org/ be an option? greets

[scabux]

Lucide seems to be quite nice, too. It is a community-driven fork of Feather Icons. See https://lucide.dev/ for available icons. Perhaps this could replace Feather Icons, considering that the latter seems to be rather inactive?

[QuAzI]

• telegram icon would be nice

[andrewbaker-uk]

I've just been toying at replacing the feather icons with the icons from Font-Awesome. Not sure where to start though

[xeraa]

This is a total hack, but I added a custom partial of icon.html in my layouts/partials/ so that I could add a Mastodon icon:

{{- if isset .ctx.Site.Data.m10c.icons .name -}}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-svg{{ .name }}">
  <title>{{ .name }}</title>
  {{ safeHTML (index .ctx.Site.Data.m10c.icons .name) }}
</svg>
{{- else if fileExists (printf "/assets/img/simpleicons/%s.svg" .name) -}}
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="icon icon-svg{{ .name }}">
  <title>{{ .name }}</title>
  {{ readFile (printf "/assets/img/simpleicons/%s.svg" .name) | safeHTML }}
</svg>
{{- else -}}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-svglink">
  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
{{- end -}}

Then I put the path info (so only <path d="..."/>) to a file with the name I want to add into /assets/img/simpleicons/.

The style of https://simpleicons.org doesn't fit a 100% but I felt like this was ok enough:

[xeraa]

On second thought, I've slightly reworked it to work with the unchanged files from https://simpleicons.org.

My custom icon.html:

{{- if isset .ctx.Site.Data.m10c.icons .name -}}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-svg{{ .name }}">
  <title>{{ .name }}</title>
  {{ safeHTML (index .ctx.Site.Data.m10c.icons .name) }}
</svg>
{{- else if fileExists (printf "/assets/img/simpleicons/%s.svg" .name) -}}
<span class="icon">
  {{ readFile (printf "/assets/img/simpleicons/%s.svg" .name) | safeHTML }}
</span>
{{- else -}}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-svglink">
  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
{{- end -}}

And a small customization to the SCSS file:

span.icon {
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 0;
}