[Icons] Transpile icon SVGs with display name (Shopify#9871)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

For full context, read
[here](https://github.com/Shopify/web/pull/100163).

We are introducing a `displayName` prop to be able to dynamically read
the icon name when we have access only to the Polaris icon component
function:
```tsx
import {AbandondedCartMajor} from '@shopify/polaris-icons';

const iconName = AbandondedCartMajor.displayName;
/* Do something with displayName */

// This wouldn't work as the `name` gets minified
// const iconName = AbandonedCartMajor.name;
```

React components generally use the convention of `displayName` already
and we use this convention in [Polaris as
well](https://github.com/search?q=repo%3AShopify%2Fpolaris%20displayname&type=code).

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

For transpiling the SVG files, we use the
[svgr](https://github.com/gregberge/svgr) library. Ideally, this library
would by default add the `displayName` but this was [rejected by the
author](gregberge/svgr#328).

Instead, we can provide our [own
template](https://react-svgr.com/docs/migrate/#template) to be used by
the `svgr` library.
The only difference from the default template is the following file:
```
${componentName}.displayName = "${componentName.name.replace(/^Svg/g, '')}";
```

You can check the before and after of
`dist/icons/AbandondedCartMajor.svg.js` here:
<details>
<summary>Before</summary>

```tsx
'use strict';

var React = require('react');

var SvgAbandonedCartMajor = function SvgAbandonedCartMajor(props) {
  return /*#__PURE__*/React.createElement("svg", Object.assign({
    viewBox: "0 0 20 20"
  }, props), /*#__PURE__*/React.createElement("path", {
    d: "M3.25 3a.75.75 0 0 0 0 1.5h1.612a.25.25 0 0 1 .248.22l1.04 8.737a1.75 1.75 0 0 0 1.738 1.543h6.362a.75.75 0 0 0 0-1.5h-6.362a.25.25 0 0 1-.248-.22l-.093-.78h6.35a2.75 2.75 0 0 0 2.743-2.54l.358-4.652a.75.75 0 0 0-1.496-.116l-.358 4.654a1.25 1.25 0 0 1-1.246 1.154h-6.53l-.768-6.457a1.75 1.75 0 0 0-1.738-1.543h-1.612Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8.87 5.12a.75.75 0 0 0 0 1.06l1.32 1.32-1.32 1.32a.75.75 0 1 0 1.06 1.06l1.32-1.32 1.32 1.32a.75.75 0 0 0 1.06-1.06l-1.32-1.32 1.32-1.32a.75.75 0 0 0-1.06-1.06l-1.32 1.32-1.32-1.32a.75.75 0 0 0-1.06 0Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M15 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }));
};

exports.SvgAbandonedCartMajor = SvgAbandonedCartMajor;
```
</details>

<details>
<summary>After</summary>

```tsx
'use strict';

var React = require('react');

var SvgAbandonedCartMajor = function SvgAbandonedCartMajor(props) {
  return /*#__PURE__*/React.createElement("svg", Object.assign({
    viewBox: "0 0 20 20"
  }, props), /*#__PURE__*/React.createElement("path", {
    d: "M3.25 3a.75.75 0 0 0 0 1.5h1.612a.25.25 0 0 1 .248.22l1.04 8.737a1.75 1.75 0 0 0 1.738 1.543h6.362a.75.75 0 0 0 0-1.5h-6.362a.25.25 0 0 1-.248-.22l-.093-.78h6.35a2.75 2.75 0 0 0 2.743-2.54l.358-4.652a.75.75 0 0 0-1.496-.116l-.358 4.654a1.25 1.25 0 0 1-1.246 1.154h-6.53l-.768-6.457a1.75 1.75 0 0 0-1.738-1.543h-1.612Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M8.87 5.12a.75.75 0 0 0 0 1.06l1.32 1.32-1.32 1.32a.75.75 0 1 0 1.06 1.06l1.32-1.32 1.32 1.32a.75.75 0 0 0 1.06-1.06l-1.32-1.32 1.32-1.32a.75.75 0 0 0-1.06-1.06l-1.32 1.32-1.32-1.32a.75.75 0 0 0-1.06 0Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M10 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M15 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }));
};
SvgAbandonedCartMajor.displayName = "AbandonedCartMajor";

exports.SvgAbandonedCartMajor = SvgAbandonedCartMajor;
```

</details>

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

Add the following line to `Icon.stories.tsx`:
```
console.log(CirclePlusMinor.displayName);
```

When you open the story, the `displayName` should be printed.

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] ~Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)~
- [x] ~Updated the component's `README.md` with documentation changes~
- [x] ~[Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide~

.changeset/famous-rats-invent.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-icons': minor
+---
+
+Added displayName to transpiled icons

polaris-icons/.svgrrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: require('./icon-template.js'),
+};

polaris-icons/icon-template.js

@@ -0,0 +1,15 @@
+function defaultTemplate(
+  {template},
+  opts,
+  {imports, componentName, props, jsx, exports},
+) {
+  return template.ast`${imports}
+const ${componentName} = (${props}) => ${jsx}
+
+${componentName}.displayName = "${componentName.name.replace(/^Svg/g, '')}";
+
+${exports}
+`;
+}
+
+module.exports = defaultTemplate;