fix: working

.testSite/config/_default/params.yaml

@@ -0,0 +1,2 @@
+inlineSvg:
+  inlineCSS: false

.testSite/layouts/_default/single.html

@@ -2,31 +2,10 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <article>
-        <header>
-          <h1>{{ .Title }}</h1>
-        </header>
-        {{ .Content }}
-      </article>
+      <h1>{{ .Title }}</h1>
+      {{ .Content }}
     </div>
   </div>
-  <div class="row">
-    {{ if ne .Params.disableRange true }}
-    {{ range .Params.testImages }}
-    <div class="col-md-6" id="{{ .id }}">
-      <h2>{{ .title }}</h2>
-      <p>{{ .subtitle }}</p>
-
-      {{ $partial := .partial | default "image" }}
-      {{ with .params }}
-      {{ $params := (dict "page" $ "src" "test.jpg") }}
-      {{ $params = merge $params . }}
-      {{ partial $partial $params }}
-      {{ end }}
-      <div id="{{ .id }}-results"></div>
-    </div>
-    {{ end }}
-    {{ end }}
-  </div>
 </div>
 {{ end }}
+

.testSite/layouts/index.html

@@ -0,0 +1,64 @@
+{{ define "main" }}
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <h1>{{ .Title }}</h1>
+      <div>
+        {{ partial "inline-svg" (dict 
+        "src" "icons/bootstrap/clock.svg" 
+        "fs" 1
+        "display" "inline"
+        "title" "SVG Title"
+        "desc" "SVG Desc"
+        ) }} <span class="fs-1">Inline SVG, fs: 1 (2.5rem) Text fs-1</span>
+      </div>
+      <div class="fs-2">
+        {{ partial "inline-svg" (dict 
+        "src" "icons/bootstrap/clock.svg"
+        "display" "inline"
+        "title" "SVG Title"
+        "desc" "SVG Desc"
+        ) }} <span class="">Inline SVG & text inherit font size (2 - 2rem)</span>
+      </div>
+      <div class="text-primary">
+        {{ partial "inline-svg" (dict 
+        "src" "icons/bootstrap/clock.svg" 
+        "fs" 6
+        "display" "inline"
+        "title" "SVG Title"
+        "desc" "SVG Desc"
+        ) }} <span class="fs-6">Inline SVG, fs: 6 (1rem). Text fs-6</span>
+      </div>
+      <div class="d-flex flex-row align-middle pb-2">
+        <div class="d-flex align-items-center text-primary me-2 my-2">
+          {{ partial "inline-svg" (dict 
+          "src" "icons/bootstrap/clock.svg" 
+          "fs" 2
+          "display" "block"
+          "title" "SVG Title"
+          "desc" "SVG Desc"
+          ) }}
+        </div>
+        <div class="d-flex align-items-center">
+          Block SVG, font size 2 (2rem) Text 1rem,
+        </div>
+      </div>
+      <div class="d-flex flex-row align-middle pb-2">
+        <div class="d-flex align-items-center text-primary me-2 my-2">
+          {{ partial "inline-svg" (dict 
+          "src" "icons/bootstrap/clock.svg" 
+          "rem" 2
+          "display" "block"
+          "title" "SVG Title"
+          "desc" "SVG Desc"
+          ) }}
+        </div>
+        <div class="d-flex align-items-center">
+          Block SVG, rem: 2 Text 1rem,
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{ end }}
+

.testSite/package.json

@@ -11,9 +11,8 @@
   },
   "author": "Sean Emerson",
   "license": "ISC",
-  "homepage": "https://hugo-responsive-images.netlify.app/",
+  "homepage": "https://hugo-inline-svg.netlify.app/",
   "dependencies": {
-    "bootstrap": "^5.2.0",
-    "lazysizes": "^5.3.2"
+    "bootstrap": "^5.2.0"
   }
 }

assets/scss/inline-svg.scss

@@ -15,28 +15,44 @@
 
  ****************************************************/
 
-.svg-font {
+.inline-svg {
   color: inherit;
   fill: currentColor;
-  vertical-align: middle;
+  vertical-align: baseline;
+
+  &.d-inline-block {
+    display: inline-block;
+    height: 0.7em;
+    width: 0.7em;
+  }
 
   &.fs-inherit {
     font-size: inherit;
   }
   &.d-block {
     display: block;
+    height: 1em;
+    width: 1em;
+
+    // @for $i from 1 to 5 {
+    //   &.em {
+    //     &-#{$i} {
+    //       height: ($i) + em;
+    //       width: ($i) + em;
+    //     }
+    //   }
+    // }
   }
 
   @for $i from 1 to 5 {
-    &.em {
+    &.rem {
       &-#{$i} {
-        height: ($i) + em;
-        width: ($i) + em;
+        font-size: ($i) + rem;
       }
     }
   }
 
-  $font-sizes: (
+  $bs-font-sizes: (
     1: 2.5,
     2: 2,
     3: 1.75,
@@ -46,7 +62,7 @@
     7: 0.875,
   );
 
-  @each $key, $size in $font-sizes {
+  @each $key, $size in $bs-font-sizes {
     &.fs {
       &-#{$key} {
         font-size: ($size) + rem;

config.yaml

@@ -1,3 +1,12 @@
 params:
   inlineSvg:
     inlineCSS: false
+    inlineStyles:
+      fs:
+        1: 2.5
+        2: 2
+        3: 1.75
+        4: 1.5
+        5: 1.25
+        6: 1
+        7: 0.875

layouts/partials/hugo-inline-svg/private/format.html

@@ -34,35 +34,40 @@
 {{ end }}
 
 {{/* assign classes */}}
-{{ $class := (slice "svg-font" (printf "em-%v" .em)) }}
-{{ if .fs }}
-  {{ $class = $class | append (printf "fs-%v" .fs) }}
+
+{{ $styleAttr := partial "hugo-inline-svg/private/inline-styles" . }}
+
+{{ $class := "" }}
+{{ if $styleAttr }}
+  {{ $class = (slice "inline-svg-inline-styled") }}
 {{ else }}
-  {{ $class = $class | append "fs-inherit" }}
-{{ end }}
-{{ if .block }}
-  {{ $class = $class | append "d-block" }}
-{{ end }}
-{{ $class = printf `class="%s"` (delimit $class " ") }}
-
-{{ $styleAttr := "" }}
-{{ if eq site.Params.inlineSvg.inlineCSS true }}
-  {{ $inline := (slice "font-size: inherit;" "color: inherit;" "fill: currentColor;" "vertical-align: middle;" ) }}
-  {{ $inline = $inline | append (slice (printf "height: %sem;" .em) (printf "width: %sem;" .em)) }}
-  {{ if .block }}
-    {{ $inline = $inline | append (slice "display: block;") }}
+  {{ $class = (slice "inline-svg") }}
+
+  {{ if .fs }}
+    {{ $class = $class | append (printf "fs-%v" .fs) }}
+  {{ else if .rem }}
+    {{ $class = $class | append (printf "rem-%v" .rem) }}
+  {{ else }}
+    {{ $class = $class | append "fs-inherit" }}
   {{ end }}
-  {{/* create string */}}
-  {{ $styleAttr = printf "style=\"%s\"" (delimit $inline " ") }}
+
+  {{ if eq .display "block" }}
+    {{ $class = $class | append "d-block" }}
+  {{ else if eq .display "inline" }}
+    {{ $class = $class | append "d-inline-block" }}
+  {{ end }}
+
+  {{ $class = printf `class="%s"` (delimit $class " ") }}
 {{ end }}
 
 
+
 {{/* assemble attributes for svg tag */}}
 {{- $attr := (slice .height .width .viewBox $class $ariaTitle $ariaDesc $styleAttr) -}}
 
 {{/* assemble content for inside svg tags */}}
 {{- $content := (slice $title $desc .paths) -}}
 
 {{/* put it all together and return */}}
-{{ $svgHTML := printf `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" %s>%s</svg>` (delimit $attr " ") (delimit $content " ") }}
-{{ return $svgHTML | safeHTML }}
+{{ $svgHTML := printf `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" %s>%s</svg>` (delimit $attr " ") (delimit $content " ") | safeHTML }}
+{{ return $svgHTML }}

layouts/partials/hugo-inline-svg/private/inline-styles.html

@@ -0,0 +1,44 @@
+{{ $styleAttr := "" }}
+{{ if eq site.Params.inlineSvg.inlineCSS true }}
+  {{ $inline := (slice  "color: inherit;" "fill: currentColor;"  ) }}
+
+  {{ if eq .display "block" }}
+    {{ $inline = $inline | append (slice 
+      "display: block;" 
+      "height: 1em;" 
+      "width: 1em;"
+      "vertical-align: middle;"
+      ) }}
+  {{ else if eq .display "inline" }}
+    {{ $inline = $inline | append (slice 
+      "display: inline-block;" 
+      "height: 0.7em;" 
+      "width: 0.7em;"
+      "vertical-align: baseline;"
+
+      ) }}
+  {{ end }}
+
+  {{ if .fs }}
+    {{ $fsMap := (dict 
+      "1" "2.5"
+      "2" "2"
+      "3" "1.75"
+      "4" "1.5"
+      "5" "1.25"
+      "6" "1"
+      "7" "0.875"
+      )}}
+    {{ $inline = $inline | append (slice (printf "font-size: %vrem;" (index $fsMap (.fs | string)))) }}
+  {{ else if .rem }}
+    {{ $inline = $inline | append (slice (printf "font-size: %vrem;" .rem)) }}
+  {{ else }}
+    {{ $inline = $inline | append (slice "font-size: inherit;") }}
+  {{ end }}
+
+
+  {{/* create string */}}
+  {{ $styleAttr = printf `style="%s"` (delimit $inline " ") }}
+{{ end }}
+
+{{ return $styleAttr }}

layouts/partials/hugo-inline-svg/private/input-error.html

@@ -24,9 +24,13 @@
 
 {{ $message := "" }}
 {{ if .ctx.Page }}
-  {{ $message := printf "Invalid %s value of \"%v\" for svg %s on page %s. Must be %s." .param .value .ctx.src.RelPermalink .ctx.Page.RelPermalink .valid }}
+  {{ $message = printf "Invalid %s value of \"%v\" for svg %s on page %s. Must be %s." .param .value .ctx.src .ctx.page.RelPermalink .valid }}
 {{ else }}
-  {{ $message := printf "Invalid %s value of \"%v\" for svg %s. Must be %s." .param .value .ctx.src.RelPermalink .valid }}
+  {{ $message = printf "Invalid %s value of \"%v\" for svg %s. Must be %s." .param .value .ctx.src .valid }}
 {{ end }}
 
+{{/* log custom error message */}}
 {{ partial "hugo-inline-svg/private/errorf" $message }}
+
+{{/* return to avoid printing */}}
+{{ return true }}