Merge pull request #2345 from boltdesignsystem/feature/DS-653-update-…

…icon-element-HTML-demos DS 653 Update icon element HTML demos
boltdesignsystem · Oct 18, 2021 · 1fd339c · 1fd339c
2 parents 351bd95 + 608c164
commit 1fd339c
Show file tree

Hide file tree

Showing 84 changed files with 126 additions and 100 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/05-icon.twig b/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/05-icon.twig
@@ -121,7 +121,7 @@
 
 {% set html_markup %}
 {% verbatim %}
-<svg class="e-bolt-icon" aria-hidden="true">...</svg>
+<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon" aria-hidden="true">...</svg>
 {% endverbatim %}
 {% endset %}
 

diff --git a/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/10-icon-size.twig b/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/10-icon-size.twig
@@ -35,7 +35,7 @@
 
 {% set html_markup %}
 {% verbatim %}
-<svg class="e-bolt-icon e-bolt-icon--xlarge" aria-hidden="true">...</svg>
+<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon e-bolt-icon--xlarge" aria-hidden="true">...</svg>
 {% endverbatim %}
 {% endset %}
 

diff --git a/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/15-icon-color.twig b/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/15-icon-color.twig
@@ -37,7 +37,7 @@
 
 {% set html_markup %}
 {% verbatim %}
-<svg class="e-bolt-icon e-bolt-icon--navy" aria-hidden="true">...</svg>
+<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon e-bolt-icon--navy" aria-hidden="true">...</svg>
 {% endverbatim %}
 {% endset %}
 

diff --git a/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/20-icon-use-case-custom-svg.twig b/docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/20-icon-use-case-custom-svg.twig
@@ -15,23 +15,17 @@
     <bolt-li>
     Lastly:
     <bolt-ol>
-      <bolt-li>If you choose a Twig usage:
-        <bolt-ul>
-          <bolt-li>Add the element relevant attributes <code>{% verbatim %}{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true"{% endverbatim %}</code> to the <code>&lt;svg&gt;</code> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the <code>custom_icon_path</code> prop.</bolt-li>
-        </bolt-ul>
+      <bolt-li>
+        <strong>If you choose Twig usage:</strong> Add the relevant attributes <code>{% verbatim %}{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true"{% endverbatim %}</code> to the <code>&lt;svg&gt;</code> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the <code>custom_icon_path</code> prop.
       </bolt-li>
-      <bolt-li>If you choose a HTML usage:
-        <bolt-ul>
-          <bolt-li>Add the element class <code>class="e-bolt-icon"</code> and relevant modifier classes, and add the attribute <code>aria-hidden="true"</code> to the <code>&lt;svg&gt;</code> HTML element. Then you can display the icon using the modified <code>&lt;svg&gt;</code> markup.</bolt-li>
-        </bolt-ul>
+      <bolt-li>
+        <strong>If you choose HTML usage:</strong> Add <code>class="e-bolt-icon"</code> along with relevant modifier class for each prop, and the attribute <code>aria-hidden="true"</code> to the <code>&lt;svg&gt;</code> HTML element. Then you can display the icon using the modified <code>&lt;svg&gt;</code> markup.
       </bolt-li>
     </bolt-ol>
 {% endset %}
 
 {% set demo %}
-<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true" viewBox="0 0 496 512">
-  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
-</svg>
+<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true"><path fill="#151619" d="m32 16c0 8.8-7.2 16-16 16s-16-7.2-16-16 7.2-16 16-16 16 7.2 16 16zm-3.1 0-1.7 1.4-4-3.8 1.1-5.4 2.2.2c-1.6-2.2-3.9-3.9-6.5-4.7l.9 2.1-4.9 2.7-4.8-2.7.8-2.1c-2.6.9-4.8 2.5-6.5 4.7l2.2-.2 1 5.4-4 3.8-1.6-1.4c0 2.8.9 5.4 2.5 7.6l.5-2.2 5.5.7 2.3 5-1.9 1.2c2.6.8 5.4.8 8 0l-1.9-1.1 2.3-5 5.5-.7.5 2.2c1.6-2.3 2.5-4.9 2.5-7.7zm-16 4.5-1.9-5.9 5-3.6 5 3.6-1.9 5.9z"/></svg>
 {% endset %}
 
 {% set twig_markup %}
@@ -44,9 +38,7 @@
 
 {% set html_markup %}
 {% verbatim %}
-<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true" viewBox="0 0 496 512">
-  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
-</svg>
+<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true"><path fill="#151619" d="m32 16c0 8.8-7.2 16-16 16s-16-7.2-16-16 7.2-16 16-16 16 7.2 16 16zm-3.1 0-1.7 1.4-4-3.8 1.1-5.4 2.2.2c-1.6-2.2-3.9-3.9-6.5-4.7l.9 2.1-4.9 2.7-4.8-2.7.8-2.1c-2.6.9-4.8 2.5-6.5 4.7l2.2-.2 1 5.4-4 3.8-1.6-1.4c0 2.8.9 5.4 2.5 7.6l.5-2.2 5.5.7 2.3 5-1.9 1.2c2.6.8 5.4.8 8 0l-1.9-1.1 2.3-5 5.5-.7.5 2.2c1.6-2.3 2.5-4.9 2.5-7.7zm-16 4.5-1.9-5.9 5-3.6 5 3.6-1.9 5.9z"/></svg>
 {% endverbatim %}
 {% endset %}
 

diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/icon-deprecated/-05-icon.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/icon-deprecated/-05-icon.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-icon-docs.twig' %}
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
+  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
 </bolt-banner>
 
 {% include "@bolt-components-icon/icon.twig" with {

diff --git a/...rc/pages/pattern-lab/_patterns/40-components/icon-deprecated/-10-icon-size-variation.twig b/...rc/pages/pattern-lab/_patterns/40-components/icon-deprecated/-10-icon-size-variation.twig
@@ -13,7 +13,7 @@
 <hr>
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon e-bolt-icon-small" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
+  <svg class="e-bolt-icon e-bolt-icon-small" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
 </bolt-banner>
 
 {% for size in sizes %}

diff --git a/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-10-icon-theme-variation.twig b/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-10-icon-theme-variation.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-icon-docs.twig' %}
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
+  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
 </bolt-banner>
 
 {% set schema = bolt.data.components["@bolt-components-icon"].schema %}

diff --git a/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-15-icon-color-variation.twig b/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-15-icon-color-variation.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-icon-docs.twig' %}
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
+  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. For adding a shape as a background of an icon please use the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Shape element</a>.</strong>
 </bolt-banner>
 
 {% set schema = bolt.data.components["@bolt-components-icon"].schema %}

diff --git a/...src/pages/pattern-lab/_patterns/40-components/icon-deprecated/-25-icon-custom-colors.twig b/...src/pages/pattern-lab/_patterns/40-components/icon-deprecated/-25-icon-custom-colors.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-icon-docs.twig' %}
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. Pass a theme class to the parent element to color a <a href="{{ link['visual-styles-theming-system'] }}" class="e-bolt-text-link"> Shape</a>. Reference the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Theming system</a> for all available themes.</strong>
+  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Colorful background shape has no equivlance in the Icon element. Now Icon and Shape are two different separate elements. Pass a theme class to the parent element to color a <a href="{{ link['visual-styles-theming-system'] }}" class="e-bolt-text-link"> Shape</a>. Reference the <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link"> Theming system</a> for all available themes.</strong>
 </bolt-banner>
 
 <p>Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.</p>

diff --git a/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-30-icon-name-variations.twig b/...c/pages/pattern-lab/_patterns/40-components/icon-deprecated/-30-icon-name-variations.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-icon-docs.twig' %}
 
 <bolt-banner status="error" align="start">
-  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Some of the icon names have changed. Please use the <a href="{{ link['viewall-elements-icon'] }}" class="e-bolt-text-link"> Icon element</a> for a reference.</strong>
+  <svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.1 18.1-3-3.1 3.1-3.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-3.1 3.1-3.1-3.1c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l3.1 3.1-3.1 3.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l3.1-3.1 3.1 3.1c.6.6 1.5.6 2.1 0 .5-.6.5-1.5-.1-2.1"/></g></svg><strong> Some of the icon names have changed. Please use the <a href="{{ link['viewall-elements-icon'] }}" class="e-bolt-text-link"> Icon element</a> for a reference.</strong>
 </bolt-banner>
 
 {% set schema = bolt.data.components['@bolt-components-icon'].schema %}

diff --git a/...pages/pattern-lab/_patterns/40-components/image-deprecated/-10-image-size-variations.twig b/...pages/pattern-lab/_patterns/40-components/image-deprecated/-10-image-size-variations.twig
@@ -1,7 +1,7 @@
 {% include '@pl/00-deprecated-image-docs.twig' %}
 
 <bolt-banner status="success" align="start">
-<svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m25.6 19.2h-14.9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1h14.9c.6 0 1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1zm3.2 5.3c0 .6-.4 1-.9 1.1h-.1-19.3c-.6 0-1-.4-1.1-.9v-.1-21.4c0-.6.4-1 .9-1.1h.1 19.2c.6 0 1 .4 1.1.9v.1 21.4zm0-24.5h-21.3c-1.2 0-2.2 1-2.2 2.1v23.5c0 1.2 1 2.1 2.1 2.1h21.3c1.2 0 2.1-1 2.1-2.1v-23.5c.1-1.1-.8-2.1-2-2.1zm-3.2 12.8h-14.9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1h14.9c.6 0 1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1zm-14.9-4.3h8.5c.6 0 1-.4 1.1-.9v-.1c0-.6-.4-1-.9-1.1h-.1-8.5c-.6 0-1 .4-1.1.9v.1c0 .6.4 1 .9 1.1zm-7.5-4.2c-1.2 0-2.1 1-2.1 2.1v23.5c0 1.1.9 2.1 2.1 2.1h23.5c1.2 0 2.1-1 2.1-2.1h-25.6z" fill="#151619" fill-rule="evenodd"></svg><strong> Please reference <a href="{{ link['elements-image-srcset-and-sizes'] }}" class="e-bolt-text-link"> element doc</a> instead.</strong>
+<svg class="e-bolt-icon" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path clip-rule="evenodd" d="m25.6 19.2h-14.9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1h14.9c.6 0 1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1zm3.2 5.3c0 .6-.4 1-.9 1.1h-.1-19.3c-.6 0-1-.4-1.1-.9v-.1-21.4c0-.6.4-1 .9-1.1h.1 19.2c.6 0 1 .4 1.1.9v.1 21.4zm0-24.5h-21.3c-1.2 0-2.2 1-2.2 2.1v23.5c0 1.2 1 2.1 2.1 2.1h21.3c1.2 0 2.1-1 2.1-2.1v-23.5c.1-1.1-.8-2.1-2-2.1zm-3.2 12.8h-14.9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1h14.9c.6 0 1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1zm-14.9-4.3h8.5c.6 0 1-.4 1.1-.9v-.1c0-.6-.4-1-.9-1.1h-.1-8.5c-.6 0-1 .4-1.1.9v.1c0 .6.4 1 .9 1.1zm-7.5-4.2c-1.2 0-2.1 1-2.1 2.1v23.5c0 1.1.9 2.1 2.1 2.1h23.5c1.2 0 2.1-1 2.1-2.1h-25.6z" fill="#151619" fill-rule="evenodd"></svg><strong> Please reference <a href="{{ link['elements-image-srcset-and-sizes'] }}" class="e-bolt-text-link"> element doc</a> instead.</strong>
 </bolt-banner>
 
 <h4>640x480 jpg</h4>