ISTWCMS-5572: fixing both background and inline svgs

src/patterns/04-components/icon/_icon.scss

@@ -6,10 +6,12 @@
   height: var(--size-3);
   line-height: normal;
   width: var(--size-3);
+
   svg {
     height: var(--size-3);
     width: var(--size-3);
   }
+
   // Fixes delayed transitions in Chrome.
   * {
     transition: none;

src/patterns/04-components/icon/icon--button/_icon--button.scss

@@ -20,6 +20,7 @@ $icon-font-size-small: var(--font-size-0) !default;
   line-height: normal;
   padding: 0 var(--size-1);
   transition: background 0.2s ease-in;
+
   .uw-icon {
     align-items: center;
     display: flex;
@@ -32,10 +33,12 @@ $icon-font-size-small: var(--font-size-0) !default;
   &.uw-icon-link {
     color: var(--uw-black);
     text-decoration: none;
+
     &:hover,
     &:focus {
       background: $button-background-color-hover;
       color: var(--uw-black) !important;
+
       .uw-icon {
         svg{
           fill: var(--uw-black);

src/patterns/04-components/svg/_svg-macro.twig

+{% macro get(icon) %}
+  {% include '@components/svg/icons/_' ~ icon ~ '.svg.twig' with {
+    'icon': icon
+  } only
+  %}
+{% endmacro %}

src/patterns/04-components/svg/_svg.twig

-<span class="uw-icon uw-svg uw-svg__{{ svg_name }}">
-{#  {% include '@components/svg/icons/_' ~ svg_name ~ '.svg.twig' %}#}
+{% import "@components/svg/_svg-macro.twig" as icons %}
 
-  {% include '@components/svg/icons/_instagram.svg.twig' %}
+{% if not svg_name %}
+  {% set svg_name = 'android' %}
+{% endif %}
 
-</span>
+<div class="uw-icon">
+  {{ icons.get(svg_name) }}
+</div>

src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig

-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>add-to-calendar</title>
-<path d="M9.573 10.021c0.735 0 1.332-0.597 1.332-1.333h-0.001v-4.362c0-0.736-0.597-1.332-1.332-1.332s-1.332 0.596-1.331 1.332v4.362c0 0.736 0.596 1.333 1.332 1.333zM21.908 10.021c0.735 0 1.331-0.597 1.331-1.333v-4.362c0-0.736-0.596-1.332-1.332-1.332-0.737 0-1.334 0.596-1.333 1.332v4.362c0 0.736 0.597 1.333 1.334 1.333zM29.001 21.571h-4.53v-4.531c0-0.002 0-0.002-0.006 0l-2.052 0.031c0 0-0.001-0.002-0.002 0l0.001 4.5h-4.37l0.030 2.062 4.34-0.004v4.34l2.060 0.033v-4.373h4.501l0.028-2.051c0.002-0.006 0.002-0.006 0-0.007zM29.517 17.527v-8.495c-0.001-1.741-1.302-3.149-2.907-3.149l-0-0h-2.619v2.69c0 1.15-0.932 2.084-2.083 2.084-0.575 0-1.097-0.232-1.474-0.612-0.376-0.377-0.611-0.9-0.611-1.473v-2.689h-8.167v2.69c0 1.15-0.931 2.084-2.082 2.084-0.574 0-1.096-0.232-1.474-0.612-0.376-0.377-0.61-0.899-0.61-1.472v-2.69h-2.56c-1.606 0-2.908 1.409-2.908 3.149v16.961c0 1.739 1.301 3.151 2.908 3.151h13.819c1.282 0.871 2.829 1.381 4.492 1.381 4.421 0 8.017-3.599 8.017-8.019 0-1.88-0.651-3.611-1.739-4.98zM23.489 29.11c-3.637 0-6.601-2.963-6.601-6.602s2.963-6.6 6.601-6.6c3.64 0 6.601 2.961 6.601 6.6s-2.96 6.602-6.601 6.602z"></path>
-</svg>

src/patterns/04-components/svg/svg.yml

----
-svg_name: android

src/patterns/04-components/svg/svgs.twig

+{% import "@components/svg/_svg-macro.twig" as icons %}
+
 {% for svg_name in svg_names %}
   <h3>{{ svg_name | capitalize }}</h3>
-  {% include '@components/svg/_svg.twig' with {
-    'svg_name': svg_name
-  } %}
-{% endfor %}
\ No newline at end of file
+  {{ icons.get(svg_name) }}
+{% endfor %}

src/patterns/04-components/svg/svgs.yml

@@ -82,3 +82,4 @@ svg_names:
   - yahoo
   - youtube
   - youtube-box
+svg_name: android