From c4f154d6f4147d378b1e721e54aa7a8c324e95fe Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Tue, 7 Nov 2023 19:47:10 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=AD=F0=9F=90=98=20-=20Ensure=20size=20?=
 =?UTF-8?q?of=20SVG=20icons=20with=20no=20classes=20(#256)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/violet-flies-marry.md        | 5 +++++
 packages/myst-to-react/src/exercise.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/violet-flies-marry.md

diff --git a/.changeset/violet-flies-marry.md b/.changeset/violet-flies-marry.md
new file mode 100644
index 000000000..c4600dfbe
--- /dev/null
+++ b/.changeset/violet-flies-marry.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Ensure icon is correct size without styles
diff --git a/packages/myst-to-react/src/exercise.tsx b/packages/myst-to-react/src/exercise.tsx
index 1b87b491d..d3482029e 100644
--- a/packages/myst-to-react/src/exercise.tsx
+++ b/packages/myst-to-react/src/exercise.tsx
@@ -86,7 +86,7 @@ export function Callout({
   children: React.ReactNode;
   dropdown?: boolean;
   identifier?: string;
-  Icon?: (props: { className?: string }) => JSX.Element;
+  Icon?: (props: { width?: string; height?: string; className?: string }) => JSX.Element;
 }) {
   return (
     <WrapperElement
@@ -127,8 +127,10 @@ export function Callout({
       >
         {Icon && (
           <Icon
+            width="2rem"
+            height="2rem"
             className={classNames(
-              'h-8 w-8 inline-block pl-2 mr-2 self-center flex-none',
+              'inline-block pl-2 mr-2 self-center flex-none',
               classNames({
                 'text-gray-600': !color || color === 'gray',
                 'text-blue-600': color === 'blue',