Twenty Seventeen: Social Menu creates code bloat

[madriverweb]

Theme: Twenty Seventeen
Version: current

The theme has an option to make a social menu.

The Bug
When using the social menu, 150+ lines of code (svg defs) are rendered in source code just above the closing body tag. This code is bloated with all the icons not selected, i.e. about 146 lines not needed when only two icons used.

Steps to replicate:
Add one or more custom links (Facebook) to social menu. Then look at rendered source code.

[iCaleb]

Looked into this a bit, and seems the SVG defs are always loaded, not only when a social menu is being used. This is because the svg icons are used for more than just social, a couple of examples are the search widget submit button and the left/right archive page arrows.

Reading up on <defs> a bit, this might not really be an issue.

Objects created inside a <defs> element are not rendered immediately; instead, think of them as templates or macros created for future use.

Source: ​https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

[sabernhardt]

The collection of SVGs is quite large for many sites, but this is not a bug.

A ​support topic shares code to try in a child theme. (If you copy it from the page, replace the curvy quotes with straight single quotes.)

Sites that do not include a social menu still would need at least some of these icons:

• 'arrow-left' (several places)
• 'arrow-right' (several places)
• 'search' (in 404 template, search widgets)
• 'bars' (mobile navigation toggle button)
• 'close' (mobile navigation toggle button)
• 'angle-down' (navigation dropdown menus)
• 'folder-open' (categories list)
• 'hashtag' (tags list)
• 'mail-reply' (comments reply)
• 'thumb-tack' (sticky posts)
• 'play' (video background)
• 'pause' (video background)
• 'quote-right' (posts with quote format)

I recommend leaving this as it is now.