Split Icon

Author: owjs3901

src/Element.ts

@@ -132,7 +132,6 @@ export class Element {
     else {
       this.additionalProps = {}
     }
-
     switch (this.node.type) {
       case 'ELLIPSE':
         this.additionalProps = {
@@ -172,6 +171,13 @@ export class Element {
         if (this.node.children.length > 1 && (await this.hasSpaceProps())) break
         // has instance type children, skip
         if (this.node.children.some((child) => child.type === 'INSTANCE')) break
+        // if child is square, It is an icon asset
+        if (
+          this.node.width !== this.node.height &&
+          this.node.children.length === 1 &&
+          this.node.children.some((child) => child.width === child.height)
+        )
+          break
         const res = await checkSvgImageChildrenType(this.node)
         if (res) {
           if (res.type === 'SVG' && res.fill) {

src/__tests__/Element.test.ts

@@ -146,25 +146,71 @@ describe('Element', () => {
         )
       })
 
+      it('should divide wrapper and icon asset when children is a square', async () => {
+        const element = createElement('FRAME', {
+          width: '100px',
+          height: '120px',
+          children: [createNode('VECTOR', { width: '60px', height: '60px' })],
+        })
+        expect(await element.getComponentType()).toEqual('Box')
+        expect(await element.render()).toEqual(
+          '<Box w="100px" h="120px">\n  <Image boxSize="60px" />\n</Box>',
+        )
+      })
+
       describe('Overlap', async () => {
         it('should render Image with overlap', async () => {
-          const element = createElement('INSTANCE', {
-            name: 'image',
-            width: '60px',
-            height: '60px',
-            children: [
-              createNode('VECTOR', {
-                fills: [],
-              }),
-              createNode('STAR', {
-                fills: [],
-              }),
-            ],
-          })
-          expect(await element.getComponentType()).toEqual('Image')
-          expect(await element.render()).toEqual(
-            '<Image boxSize="60px" src="image" />',
-          )
+          {
+            const element = createElement('INSTANCE', {
+              name: 'image',
+              width: '60px',
+              height: '60px',
+              children: [
+                createNode('VECTOR', {
+                  fills: [],
+                }),
+                createNode('STAR', {
+                  fills: [],
+                }),
+              ],
+            })
+            expect(await element.getComponentType()).toEqual('Image')
+            expect(await element.render()).toEqual(
+              '<Image boxSize="60px" src="image" />',
+            )
+          }
+          {
+            const element = createElement('FRAME', {
+              width: '100px',
+              height: '120px',
+              children: [
+                createNode('RECTANGLE', {
+                  width: '100px',
+                  fills: [],
+                  height: '120px',
+                  children: [
+                    createNode('FRAME', {
+                      name: 'image',
+                      width: '60px',
+                      height: '60px',
+                      children: [
+                        createNode('VECTOR', {
+                          fills: [],
+                        }),
+                        createNode('STAR', {
+                          fills: [],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            })
+            expect(await element.getComponentType()).toEqual('Box')
+            expect(await element.render()).toEqual(
+              '<Box w="100px" h="120px">\n  <Box w="100%" h="120px">\n    <Image boxSize="60px" src="image" />\n  </Box>\n</Box>',
+            )
+          }
         })
 
         it('should render Image with overlap', async () => {
@@ -450,7 +496,7 @@ describe('Element', () => {
             const element = createElement('RECTANGLE', {
               name: 'image',
               width: '60px',
-              height: '60px',
+              height: '68px',
               fills: [
                 {
                   type: 'IMAGE',
@@ -459,7 +505,7 @@ describe('Element', () => {
             })
             expect(await element.getComponentType()).toEqual('Image')
             expect(await element.render()).toEqual(
-              '<Image boxSize="60px" src="image" />',
+              '<Image w="60px" h="68px" src="image" />',
             )
           }
           {