From a357b09682c7ac87def2aa85f52f664dbaba12f6 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 14 May 2020 23:42:44 +0100
Subject: [PATCH] feat: enable emoji and custom SVG icons in Featurette widget

# To use emoji icons.
[[feature]]
  icon = ":smile:"
  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
---
 assets/scss/academic/academic.scss           |  1 +
 assets/scss/academic/icons.scss              | 13 +++++++++++++
 exampleSite/assets/images/icon-pack/.gitkeep |  0
 exampleSite/content/home/skills.md           | 15 +++++++++++++++
 layouts/partials/widgets/featurette.html     | 13 ++++++++++++-
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 assets/scss/academic/icons.scss
 create mode 100644 exampleSite/assets/images/icon-pack/.gitkeep

diff --git a/assets/scss/academic/academic.scss b/assets/scss/academic/academic.scss
index 1c9cf5fc..17b5d93e 100644
--- a/assets/scss/academic/academic.scss
+++ b/assets/scss/academic/academic.scss
@@ -6,6 +6,7 @@
  **************************************************/
 
 @import "root";
+@import "icons";
 @import "footer";
 @import "nav";
 @import "card";
diff --git a/assets/scss/academic/icons.scss b/assets/scss/academic/icons.scss
new file mode 100644
index 00000000..529a0162
--- /dev/null
+++ b/assets/scss/academic/icons.scss
@@ -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;
+}
diff --git a/exampleSite/assets/images/icon-pack/.gitkeep b/exampleSite/assets/images/icon-pack/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/exampleSite/content/home/skills.md b/exampleSite/content/home/skills.md
index 073329dc..80109c7a 100644
--- a/exampleSite/content/home/skills.md
+++ b/exampleSite/content/home/skills.md
@@ -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%"
+
 +++
diff --git a/layouts/partials/widgets/featurette.html b/layouts/partials/widgets/featurette.html
index 28e591ab..1573edac 100644
--- a/layouts/partials/widgets/featurette.html
+++ b/layouts/partials/widgets/featurette.html
@@ -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>