@adobe-commerce/elsie 1.3.1-alpha014 → 1.3.1-alpha018

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.1-alpha014",
+  "version": "1.3.1-alpha018",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Icon/Icon.stories.tsx

@@ -90,7 +90,22 @@ export const Lazy: Story = {
 
 export const AllBuiltInIcons: Story = {
   argTypes: {
-    style: Object
+    style: Object,
+    url: {
+      table: {
+        disable: true
+      }
+    },
+    source: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
   },
   args: {
     style: {
@@ -119,6 +134,18 @@ export const AllBuiltInIcons: Story = {
 
 
 export const UrlExamples: Story = {
+  argTypes: {
+    source: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
+  },
   render: ({ url, ...args }: StoryIconProps) => (
     <div style={{ 
       display: 'grid', 
@@ -147,7 +174,7 @@ export const UrlExamples: Story = {
           margin: '0.5rem 0 0 0',
           wordBreak: 'break-all'
         }}>
-          {url ? `Displays icon from: ${url}` : 'Displays icon from SVG'}
+          {url ? `Displays icon from: ${url}` : `Displays icon from ${window.location.origin}/favicon.svg`}
         </p>
       </div>
       

package/src/components/Icon/Icon.tsx

@@ -121,13 +121,24 @@ function UrlSvgLoader({
       })
       .then(content => {
         // Check if content is valid SVG
-        if (!content.trim().toLowerCase().startsWith('<?xml') && 
-            !content.trim().toLowerCase().startsWith('<svg')) {
-          console.error(`[Icon] Invalid SVG content from ${url} - Content must be a valid SVG file`);
+        try {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(content, "image/svg+xml");
+          const svg = doc.querySelector('svg');
+          if (!svg) {
+            throw new Error("No <svg> element found");
+          }
+          // Success!
+        } catch(e: unknown) {
+          if (e instanceof Error ) {
+            console.error(`[Icon] Invalid SVG content from ${url}: ${e.message}`);
+          } else {
+            console.error(`[Icon] Invalid SVG content from ${url}: ${String(e)}`);
+          }
           setError(true);
           setLoading(false);
-          return;
         }
+        
 
         // Process SVG content to ensure proper sizing and accessibility
         let processedContent = content;
@@ -166,7 +177,11 @@ function UrlSvgLoader({
         setLoading(false);
       })
       .catch((error) => {
-        console.error(`[Icon] ${error.message}`);
+        if (error instanceof Error) {
+          console.error(`[Icon] ${error.message}`);
+        } else {
+          console.error(`[Icon] ${String(error)}`);
+        }
         setError(true);
         setLoading(false);
       });
@@ -177,12 +192,12 @@ function UrlSvgLoader({
   }
 
   return (
-    <div
+    <span
       className={props.className}
       style={{
         width: String(props.width),
         height: String(props.height),
-        display: 'inline-block',
+        display: 'inline-flex',
         lineHeight: 0,
       }}
       dangerouslySetInnerHTML={{ __html: svgContent }}