Comments (6)
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;
}
from hugo-theme-m10c.
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
from hugo-theme-m10c.
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?
from hugo-theme-m10c.
- telegram icon would be nice
from hugo-theme-m10c.
I've just been toying at replacing the feather icons with the icons from Font-Awesome. Not sure where to start though
from hugo-theme-m10c.
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:
from hugo-theme-m10c.
Related Issues (20)
- Add top ten topics to menu section
- Put about section as home HOT 1
- RSS link tags missing in the <head>
- Add Persistent HTML to index
- Add a demo
- Table formatting
- 🐞 Bug: Tags list line break does not work.
- app-header-menu-item CSS class does not exist
- Table of content
- add support for _index.md HOT 1
- maybe add Matrix and Pleroma logo? HOT 1
- Rendering works in local server, fails in site generation HOT 1
- Xing Icon HOT 1
- Create functionality to add footer HOT 1
- Module Error HOT 2
- m10c is not compatible with Hugo v0.104 HOT 4
- --minify breaks space between elements HOT 3
- Module "m10c" is not compatible with Hugo v0.105.0 HOT 2
- Enable description to be displayed under title in the posts list page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-theme-m10c.