Strip out namespace attributes for inline SVGs

[Brian Cairns]

Clear and concise description of the problem

Namespace attributes (xmlns and xmlns:xlink) are not needed for SVGs that are inlined in text/html documents, so they are just adding unnecessary page weight.

It would be nice if this library featured an easy config option (perhaps even enabled by default) which would strip these out automatically for inline SVG output.

Suggested solution

A stripNamespaces (or similar) boolean option available in config (I would even suggest it could be defaulted to true), which removes xmlns and xmlns:xlink attributes for inline SVG output.

Alternative

We already process our icon set using Iconify dev tools and we could strip namespaces out at this stage, but this is not an ideal solution because some icons may not be inlined. It would be better to strip out namespaces only at the point of inline usage (ie when using this plugin).

This can already be accomplished nicely in the plugin config using transform. Eg:

Icons({
    ...
    transform(svg, collection, icon) {
        return svg.replace(/ xmlns(?::xlink)?=".*?"/g, '');
    },
    ...
})

A built-in config option would just make things easier for people and see this practice more universally adopted.

Additional context

The "downside" of inlining SVGs is sending the code over and over again (vs caching an external file), this can help reduce that issue somewhat.

References:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
• https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Anthony Fu]

Sounds good, PR welcome :)