Просмотр исходного кода

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
George Cushen 5 лет назад
Родитель
Сommit
a357b09682

+ 1 - 0
assets/scss/academic/academic.scss

@@ -6,6 +6,7 @@
  **************************************************/
 
 @import "root";
+@import "icons";
 @import "footer";
 @import "nav";
 @import "card";

+ 13 - 0
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;
+}

+ 0 - 0
exampleSite/assets/images/icon-pack/.gitkeep


+ 15 - 0
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%"
+
 +++

+ 12 - 1
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>