docs(placeholders): add some generic icons (#1857)

- Modified the "placeholder" shortcode to handle `text="icon"` to display generic icons 

Co-authored-by: Julien Déramond <[email protected]>

site/content/docs/5.3/components/placeholders.md

@@ -19,7 +19,7 @@ In the example below, we take a typical card component and recreate it with plac
 
 <div class="bd-example bd-example-placeholder-cards d-flex justify-content-around">
 <div class="card">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" background="#20c997" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" background="#20c997" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -28,7 +28,7 @@ In the example below, we take a typical card component and recreate it with plac
 </div>
 
 <div class="card" aria-hidden="true">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" background="#666" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" background="#666" >}}
   <div class="card-body">
     <div class="h5 card-title placeholder-glow">
       <span class="placeholder col-6"></span>

site/layouts/shortcodes/placeholder.html

@@ -25,7 +25,8 @@
 {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
 
 {{- $show_title := not (eq $title "false") -}}
-{{- $show_text := not (eq $text "false") -}}
+{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}}
+{{- $show_icon := eq $text "icon" -}}
 
 {{- $markup := .Get "markup" | default "svg" -}}
 
@@ -40,5 +41,10 @@
     {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
     <rect width="100%" height="100%" fill="{{ $background }}"/>
     {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+    {{- if $show_icon }}
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000088">
+      <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+    </svg>
+    {{ end -}}
   </svg>
 {{- end -}}