From 48fbd87c6ff29698fcad800483172b77dcceea8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Fo=C5=99t?= <marek.fort@shopify.com>
Date: Wed, 2 Aug 2023 13:47:27 +0200
Subject: [PATCH] Transpile icon SVGs with display name

---
 .changeset/famous-rats-invent.md |  5 +++++
 polaris-icons/.svgrrc.js         |  3 +++
 polaris-icons/icon-template.js   | 15 +++++++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 .changeset/famous-rats-invent.md
 create mode 100644 polaris-icons/.svgrrc.js
 create mode 100644 polaris-icons/icon-template.js

diff --git a/.changeset/famous-rats-invent.md b/.changeset/famous-rats-invent.md
new file mode 100644
index 00000000000..bdf895d096e
--- /dev/null
+++ b/.changeset/famous-rats-invent.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-icons': minor
+---
+
+Added displayName to transpiled icons
diff --git a/polaris-icons/.svgrrc.js b/polaris-icons/.svgrrc.js
new file mode 100644
index 00000000000..276fcbb8490
--- /dev/null
+++ b/polaris-icons/.svgrrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  template: require('./icon-template.js'),
+};
diff --git a/polaris-icons/icon-template.js b/polaris-icons/icon-template.js
new file mode 100644
index 00000000000..e31f309550c
--- /dev/null
+++ b/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;