Add responsive scaling to Icon component

Shopify · Jan 28, 2024 · 27cb6b4 · 27cb6b4
1 parent 825fe1b
commit 27cb6b4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/chilly-dogs-act.md b/.changeset/chilly-dogs-act.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-icons': minor
+'@shopify/polaris': minor
+---
+
+Added responsive scaling to icons used with the `Icon` component
diff --git a/polaris-react/src/components/Icon/Icon.module.scss b/polaris-react/src/components/Icon/Icon.module.scss
@@ -11,6 +11,15 @@
 
 .Icon svg {
   fill: currentColor;
+  height: 20px;
+  width: 20px;
+
+  @media (--p-breakpoints-md-up) {
+    box-sizing: content-box;
+    padding: var(--p-space-050);
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .toneInherit svg {

diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
@@ -113,9 +113,13 @@ $nav-animation-variables: (
   margin-bottom: var(--p-space-200);
 
   @media (--p-breakpoints-md-up) {
+    box-sizing: content-box;
     margin-top: var(--p-space-100);
     margin-right: var(--p-space-200);
     margin-bottom: var(--p-space-100);
+    padding: var(--p-space-050);
+    width: 16px;
+    height: 16px;
   }
 
   svg {