Add square css class

What does this MR do?

This MR introduces a square css class (originally svg-wrapper) which allows any element to use the svg s classes.

This is helpful when needing to wrap the size of an svg with an empty container. Example:

<div class="square s32 d-flex-center">
  <svg class="s16">...</svg>
</div>

When have we needed to do this?

In the MR widget, sometimes we want an icon to be rendered smaller but inline with the bigger sized icons. This was needed for the upcoming MR's:

• https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24724/diffs#fe30d53093527d8f4caf15a58c1f6c02a94ef262_0_78
• https://gitlab.com/gitlab-org/gitlab-ee/commit/c8d707be749a0726d4005063334cefd74939acdb#7336f3b8f00712e5da6b9a78a54a825fa9db4e9f_0_63 (Which contains this change under the old name svg-wrapper and shows how we can use this class)

What are the relevant issue numbers?

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated via this MR
• Documentation reviewed by technical writer or follow-up review issue created
• Tests added for this feature/bug
• Tested in all supported browsers
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides
• Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process.
• Security reports checked/validated by reviewer