fix(markdown-renderer): render callout icons as inline SVG instead of external asset

src/lib/markdown-renderer/Callout.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ThemeProvider } from '@vtex/brand-ui'
+import { Callout } from './components'
+
+const meta = {
+  title: 'Example/MarkdownRenderer/Callout',
+  component: Callout,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof Callout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: {
+    node: {},
+    icon: 'info',
+    children: 'This is an info callout.',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    node: {},
+    icon: 'warning',
+    children: 'This is a warning callout.',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    node: {},
+    icon: 'danger',
+    children: 'This is a danger callout.',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    node: {},
+    icon: 'success',
+    children: 'This is a success callout.',
+  },
+}

src/lib/markdown-renderer/components.tsx

@@ -56,7 +56,46 @@ const ObservableHeading = ({
   )
 }
 
-const Callout = ({ node, icon, ...props }: Component) => {
+const calloutColors: Record<string, string> = {
+  info: '#8C929D',
+  danger: '#DC5A41',
+  warning: '#FFB100',
+  success: '#80BE80',
+}
+
+const CalloutIcon = ({ type }: { type: string }) => (
+  <svg
+    className={styles.blockquoteIcon}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="10" r="10" fill={calloutColors[type] ?? calloutColors.info} />
+    {type === 'success' ? (
+      <path
+        d="M5.5 10.3L8.3 13L14.5 6.8"
+        stroke="white"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    ) : type === 'info' ? (
+      <>
+        <rect x="9.1" y="5" width="1.8" height="1.8" rx="0.9" fill="white" />
+        <rect x="9.1" y="8.2" width="1.8" height="6.8" rx="0.9" fill="white" />
+      </>
+    ) : (
+      <>
+        <rect x="9.1" y="5" width="1.8" height="7" rx="0.9" fill="white" />
+        <rect x="9.1" y="13.5" width="1.8" height="1.8" rx="0.9" fill="white" />
+      </>
+    )}
+  </svg>
+)
+
+export const Callout = ({ node, icon, ...props }: Component) => {
   const blockquoteType: string = icon ? icon : 'info'
   return (
     <blockquote
@@ -72,6 +111,7 @@ const Callout = ({ node, icon, ...props }: Component) => {
           : ''
       }`}
     >
+      <CalloutIcon type={blockquoteType} />
       <div {...props} />
     </blockquote>
   )

src/lib/markdown-renderer/styles.module.css

@@ -75,36 +75,22 @@ table .code {
   color: #c81e51;
 }
 
+.blockquoteIcon {
+  display: inline-block;
+  flex-shrink: 0;
+  grid-row: 1;
+}
+
 .blockquoteInfo {
   background: #f8f7fc;
   border: 1px solid #ccced8;
 }
 
-.blockquoteInfo:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/info.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteDanger {
   background: #fdefef;
   border: 1px solid #dc5a41;
 }
 
-.blockquoteDanger:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/danger.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteWarning {
   background: #fff2d4;
   border: 1px solid #ffb100;
@@ -118,31 +104,11 @@ table .code {
   background-color: unset;
 }
 
-.blockquoteWarning:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/warning.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteSuccess {
   background: #f3f8f3;
   border: 1px solid #80be80;
 }
 
-.blockquoteSuccess:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/success.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .flexWrap {
   flex-wrap: wrap;
   justify-content: space-between;