Trim spaces and line breaks beside icons

[precious-onyenaucheya-ons]

What is the context of this PR?

Fixes #2873
Currently there extra spaces beside icons in the Design System. Following the suggestion made in the issue linked, I made use of the -- syntax in Nunjucks to trim any trailing whitespace or line breaks.

I have also updated the external link component to use the onsIcon rather than <svg>. Tests to cover this scenario have been added as well.

How to review this PR

Check components which include an icon if there is an extra white space. Use the image in the issue linked to the PR as a reference

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	07f611e
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6560ace6d02da600087a8ea3
😎 Deploy Preview	https://deploy-preview-2958--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	d9a0c67
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6572e81177f87c0007fd2240
😎 Deploy Preview	https://deploy-preview-2958--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rmccar]

The padding around the pagination component and breadcrumbs component now needs updating. As this issue only affects places where an SVG is placed after text and not before the padding is no longer consistent between the two.

I also think we need to run these changes past Dina to see if shes happy with the padding or prefers the padding before the change. If she prefers that latter than I still think we should fix this but just increase the actual margin.

Also we are no longer minifying the HTML, just removing line breaks before svg elements so the PR title and description should be updated.

There are other benefits to minification are we happy to not minify? We need to research and discuss this because we could easily have the minification you had before alongside the regex which could be the best of both.

[rmccar]

In the Icon macro the dash syntax has been added in too many places, we only need the change before and after the icons. It can be removed from the classes.

Also the pagination component still has some space in it

[rmccar]

As part of this PR the external link component can now be updated to use the icon component instead of hardcoding the svg. The external link icon might need to be added to the icon macro to do that

[rmccar]

The changes seem to have increased the space between the external link icon and the link itself

[precious-onyenaucheya-ons]

The changes seem to have increased the space between the external link icon and the link itself

This is because of the span that contains   which was added. So I'd imagine the space is expected

[rmccar]

The changes seem to have increased the space between the external link icon and the link itself

This is because of the span that contains   which was added. So I'd imagine the space is expected

Yes but the space has increased which is not what we want to happen. The &nbsp has always been there to stop the line breaking at that point. Ideally we want the space to stay the same including keeping the &nbsp but use the icon component. The other option is to look into other ways of stopping the line breaking at that point. But overall we don't want the space between the icon and text to increase

[rmccar]

Couple of minor things