Enhancement: insert svg icons via JS

[khawkins98]

For vf-section-header--link why not use an actual SVG file via CSS?

Would make updates easier if/when the graphic changes.

vf-core/components/vf-section-header/vf-section-header.njk

Line 15 in cc8ac4a

<svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg>

[auto-comment]

Thank you for raising an issue. We will try and get back to you as soon as possible.
Please make sure you have given us as much context as possible.

[sturobson]

So, there's the HTTP request for one icon (or even the small set of icons we currently use if made into a sprite) that kinda swayed the decision here.

There's also the few requirements, like it needs to be easily controlled via CSS.

I'd expect, more often than not, that the nunjucks/WP template should be used (as a best practice), rather than copying and pasting. Which means inlining is fine.

[khawkins98]

Keep in mind that 11ty/WP will largely be used only for the corporate portion EMBL.org/EBI.ac.uk sites. Service teams will be using other solutions, so it will make changes to the icons hard to manage/enforce without inspecting source code.

[khawkins98]

What sort of CSS control do you mean? Positioning effects/transitions?

[khawkins98]

Thinking aloud typing: depending on the needs of that CSS control, we could make the inline an option when using the NJK template. So if you use the template you get the inline, if not you get the HTML fetch.

[khawkins98]

Picking up on #785 (comment)

The 'on this page' list needs an SVG icon -- We need to work out if inline is the best approach, or if we should be creating a sprite. We'd need to be able to style the SVG w/ CSS (at least)

Another option would be to use JS, where we need SVGs we could:

1. Add data-vf-add-this-icon-here
2. Component vf-icons-whatevername picks up on that data attribute
3. Injects the SVG inline

This would:

1. keep the HTML clean
2. not result in extra HTTP requests (the SVG inline code could be in the minified JS)
3. still allow CSS cascade styling
4. no faffing about with sprites

I think it would be a fair use of JS, as if/when it fails you don't get icons, which shouldn't be critical to your content. (right?)

[khawkins98]

We don't have the capacity to action this, it is being moved to the backlog #446