feat: enable emoji and custom SVG icons in Featurette widget

# To use emoji icons.
[[feature]]
  icon = "😄"
  icon_pack = "emoji"
  name = "Emojiness"
  description = "100%"

# To use custom SVG icons.
# Place custom SVG icon in `assets/images/icon-pack/`, creating folders if necessary.
[[feature]]
  icon = "beach-sunset"
  icon_pack = "svg"
  name = "Surfing"
  description = "90%"

Close #1149
Close #1692
This commit is contained in:
George Cushen committed 2020-05-14 23:42:44 +01:00
1 parent b4901e3fd2
commit a357b09682
5 files changed
+41 -1

No files matched your search

+1
View File
@@ -6,6 +6,7 @@
**************************************************/
@import "root";
@import "icons";
@import "footer";
@import "nav";
@import "card";
+13
View File
@@ -0,0 +1,13 @@
.svg-icon {
display: inline-flex;
align-self: center;
}
.svg-icon {
height:0.9em;
width:0.9em;
}
.svg-icon.svg-baseline {
bottom: 0.1em;
line-height: 1;
position: relative;
}
Whitespace-only changes.
+15
View File
@@ -32,4 +32,19 @@ subtitle = ""
name = "Photography"
description = "10%"
# Uncomment to use emoji icons.
# [[feature]]
# icon = ":smile:"
# icon_pack = "emoji"
# name = "Emojiness"
# description = "100%"
# Uncomment to use custom SVG icons.
# Place custom SVG icon in `assets/images/icon-pack/`, creating folders if necessary.
# [[feature]]
# icon = "beach-sunset"
# icon_pack = "svg"
# name = "Surfing"
# description = "90%"
+++
+12 -1
View File
@@ -22,7 +22,18 @@
{{ $pack_prefix = "fa" }}
{{ end }}
<div class="col-12 col-sm-4">
{{ with .icon }}<div class="featurette-icon"><i class="{{ $pack }} {{ $pack_prefix }}-{{ . }}"></i></div>{{ end }}
{{ with .icon }}
<div class="featurette-icon">
{{- if eq $pack "emoji" -}}
{{- . | emojify -}}
{{- else if eq $pack "svg" -}}
{{- $svg_icon := resources.Get (printf "images/icon-pack/%s.svg" .) -}}
{{- if $svg_icon -}}<img src="{{ $svg_icon.RelPermalink }}" alt="{{.}}" class="svg-icon svg-baseline">{{- end -}}
{{- else -}}
<i class="{{ $pack }} {{ $pack_prefix }}-{{ . }}"></i>
{{- end -}}
</div>
{{ end }}
<h3>{{ .name | markdownify | emojify }}</h3>
{{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>