Fix/1.x/705 lgd icon doesnt use theme variable

[ctorgalson]

What does this change?

The PR adds the following to localgov_base:icon:

1. use the theme variable to namespace the path to the icon file if icon_path does not begin with @,
2. document that the theme variable exists in icon.component.yml (it was already documented in code),
3. adds a |default('includes/icons') to the icon_path variable to make the SDC behave as described in comments

How to test

1. create a child theme, lgdtest,
2. add an icon like web/themes/custom/lgdtest/assets/icons/someIcon.svg (preferably different from any icon in localgov_base),
3. include the localgov_base:icon component in the new child theme in each of the following ways:

   {# Test icon from another theme, using 'theme' var #}
   {% include 'localgov_base:icon' with {
     theme: 'lgdtest',
     icon_path: 'assets/icons',
     icon_name: 'someIcon',
   } %}
   
   {# Test icon from another theme, namespacing 'icon_path' var (note: `theme` var will be ignored) #}
   {% include 'localgov_base:icon' with {
     theme: 'lgdtest',
     icon_path: '@lgdtest/assets/icons',
     icon_name: 'someIcon',
   } %}
   
   {# Test icon from localgov_base, using 'theme' var #}
   {% include 'localgov_base:icon' with {
     theme: 'localgov_base',
     icon_name: 'arrow-down',
   } %}
   
   {# Test icon from localgov_base, namespacing 'icon_path' var (note: `theme` var will be ignored) #}
   {% include 'localgov_base:icon' with {
     theme: 'localgov_base',
     icon_path: '@localgov_base/includes/icons',
     icon_name: 'arrow-down',
   } %}
   
   {# Test icon from localgov_base, using *only* icon_name var #}
   {% include 'localgov_base:icon' with {
     icon_name: 'arrow-down',
   } %}

4. verify that the expected icons all appear.

How can we measure success?

• check that existing consumers of localgov_base:icon (i.e. localgov_base:prev-next)work as expected
• verify all the anticipated modes (above) render correctly
• this should leave existing implementations untouched

Have we considered potential risks?

• the potential risks are wsod on templates making use of the localgov_base:icon SDC, so testing matters :)

Images

n/a

Accessibility

n/a

[markconroy]

Looks good to me. I've added a small suggestion that we can accept or reject, it won't make much of a difference either way.

[markconroy]

I think we can remove the {% set ... %} here then replace line 49 later with line 39 from here.

[markconroy]

Let's change this line to
{% if icon_path|first != '@' %}@{{ theme }}/{% endif %}{{ icon_path|default('includes/icons') }}/{{ icon_name }}.svg

after we remove the set from above, like so:

<{{ icon_wrapper_element }}{{ attributes }}>
  {% if icon_path|first != '@' %}@{{ theme }}/{% endif %}{{ icon_path|default('includes/icons') }}/{{ icon_name }}.svg
</{{ icon_wrapper_element }}>

[ctorgalson]

That will be nicer. I'll do that this afternoon.

[finnlewis]

@ctorgalson I think if you merge 1.x back to your forked branch, the eslint checks will pass.