icons

src/assets/icons/components/IconAi.tsx

@@ -1,29 +1,22 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconAi = createIcon(<svg viewBox="0 0 21.916 21.916">
-    <g transform="translate(-285.792 -250.411)">
-        <g transform="translate(286.492 251.111)">
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M10.594,6H6.919A.919.919,0,0,0,6,6.92V10.6"
-                transform="translate(-6 -6)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M10.594,36.594H6.919A.919.919,0,0,1,6,35.675V32"
-                transform="translate(-6 -16.078)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M32,36.594h3.675a.919.919,0,0,0,.919-.919V32"
-                transform="translate(-16.078 -16.078)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M32,6h3.675a.919.919,0,0,1,.919.92V10.6"
-                transform="translate(-16.079 -6)" />
-        </g>
-        <g transform="translate(291.432 256.749)">
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M4471.314,754.778l3.792-8.764,3.857,8.764"
-                transform="translate(-4471.314 -746.015)" />
-            <path fill="none" stroke="#fff" stroke-width="1.4px"
-                d="M4473.049,754.619h5.048" transform="translate(-4471.853 -748.683)" />
-            <path stroke-linecap="round" fill="none" stroke="#fff" stroke-width="1.4px"
-                d="M4486.73,745.231v8.84" transform="translate(-4476.095 -745.231)" />
+export const IconAi = createIcon(<svg viewBox="0 0 28 28">
+    
+    <g transform="translate(-4498 -5210)">
+        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        <g transform="translate(4216.258 4963.639)">
+            <g transform="translate(286.492 251.111)">
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M10.25,6H6.85A.85.85,0,0,0,6,6.851v3.4" transform="translate(-6 -6)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M10.25,36.25H6.85A.85.85,0,0,1,6,35.4V32" transform="translate(-6 -17.749)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M32,36.25h3.4a.85.85,0,0,0,.85-.85V32" transform="translate(-17.749 -17.749)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M32,6h3.4a.85.85,0,0,1,.85.851v3.4" transform="translate(-17.749 -6)" />
+            </g>
+            <g transform="translate(290.823 256.096)">
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M4471.314,754.121l3.508-8.106,3.567,8.106"
+                    transform="translate(-4471.314 -746.015)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" d="M4473.049,754.619h4.67" transform="translate(-4471.942 -749.128)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M4486.73,745.231v8.177" transform="translate(-4476.892 -745.231)" />
+            </g>
         </g>
     </g>
 </svg>)

src/assets/icons/components/IconApplication.tsx

@@ -1,7 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconApplication = createIcon(<svg viewBox="0 0 1024 1024">
-    <path
-        d="M1008.302197 306.556735 789.691542 525.16739C769.561962 545.29697 736.950904 545.29697 716.821324 525.16739L498.2391 306.556735C478.10952 286.455586 478.10952 253.816097 498.2391 233.714948L716.821324 15.104293C736.950904-5.025287 769.561962-5.025287 789.691542 15.104293L1008.302197 233.714948C1028.431777 253.816097 1028.431777 286.455586 1008.302197 306.556735ZM753.668691 54.823253 537.958061 270.533884 753.668691 486.244515 969.379322 270.533884 753.668691 54.823253ZM369.841946 1023.971568 57.094228 1023.971568C25.677298 1023.971568 0.231007 998.525277 0.231007 967.108347L0.231007 654.360629C0.231007 622.972131 25.677298 597.497407 57.094228 597.497407L369.841946 597.497407C401.230445 597.497407 426.705168 622.972131 426.705168 654.360629L426.705168 967.108347C426.705168 998.525277 401.230445 1023.971568 369.841946 1023.971568ZM369.841946 654.360629 57.094228 654.360629 57.094228 967.108347 369.841946 967.108347 369.841946 654.360629ZM369.841946 512.202575 57.094228 512.202575C25.677298 512.202575 0.231007 486.756284 0.231007 455.339354L0.231007 142.591636C0.231007 111.203137 25.677298 85.728414 57.094228 85.728414L369.841946 85.728414C401.230445 85.728414 426.705168 111.203137 426.705168 142.591636L426.705168 455.339354C426.705168 486.756284 401.230445 512.202575 369.841946 512.202575ZM369.841946 142.591636 57.094228 142.591636 57.094228 455.339354 369.841946 455.339354 369.841946 142.591636ZM568.863221 597.497407 881.61094 597.497407C912.999438 597.497407 938.474161 622.972131 938.474161 654.360629L938.474161 967.108347C938.474161 998.525277 912.999438 1023.971568 881.61094 1023.971568L568.863221 1023.971568C537.446292 1023.971568 512 998.525277 512 967.108347L512 654.360629C512 622.972131 537.446292 597.497407 568.863221 597.497407ZM568.863221 967.108347 881.61094 967.108347 881.61094 654.360629 568.863221 654.360629 568.863221 967.108347Z"
-        fill="currentColor"></path>
-</svg>)
+export const IconApplication = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1490 -423)"><g transform="translate(-3008 -4787)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/></g><g transform="translate(1489.124 422.124)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M17,8.639,20.639,5l3.639,3.639-3.639,3.639Z" transform="translate(-5.762)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M17,32.639,20.639,29l3.639,3.639-3.639,3.639Z" transform="translate(-5.762 -11.525)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M29,20.639,32.639,17l3.639,3.639-3.639,3.639Z" transform="translate(-11.525 -5.762)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M5,20.639,8.639,17l3.639,3.639L8.639,24.277Z" transform="translate(0 -5.762)"/></g></g></svg>)

src/assets/icons/components/IconCombination.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconCombination = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>)

src/assets/icons/components/IconCube.tsx

@@ -1,3 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconCube = createIcon(<svg viewBox="0 0 16 16"><g transform="translate(-1638 -912)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(1638 912)"/><g transform="translate(-33.699 -8.514)"><path fill="none" stroke="#a9abaf" stroke-linejoin="round" d="M15.7,12l5.7,3.257v6.514l-5.7,3.257L10,21.771V15.257Z" transform="translate(1664 910)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M10,20l5.7,3.257L21.4,20" transform="translate(1664 905.257)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M24,28v6.514" transform="translate(1655.7 900.514)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" d="M18.55,16l2.85,1.628v3.257M12.85,16,10,17.628v3.257m2.85,4.885L15.7,27.4l2.85-1.628" transform="translate(1664 907.628)"/></g></g></svg>)
+export const IconCube = createIcon(<svg viewBox="0 0 28 28">
+
+    <g transform="translate(-4498 -5210)">
+        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        <path fill="currentColor" opacity="0.3" d="M1353.895-956.716l9.4,3.887-9.153,4.979-9.276-4.979h0Z"
+            transform="translate(3158 6171)" />
+        <g transform="translate(4503.013 5214.398)">
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" d="M14407.669,5203l9.054,4.69,8.89-4.69"
+                transform="translate(-14407.669 -5199.026)" />
+            <path stroke="currentColor" stroke-width="1.2px" d="M14418.156,5208.608v10.538"
+                transform="translate(-14409.155 -5199.943)" />
+            <path fill="none" stroke-width="1.2px" stroke="currentColor" stroke-linejoin="round"
+                d="M14416.628,5199.581l-8.927,3.922v11.262l8.927,3.653,9.017-3.653V5203.5Z"
+                transform="translate(-14407.67 -5199.581)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconImage.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconImage = createIcon(<svg viewBox="0 0 16 16"><g transform="translate(0 0.302)"><g transform="translate(1.771 1.772)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.141,6H7.013A1.013,1.013,0,0,0,6,7.013V17.141a1.013,1.013,0,0,0,1.013,1.013H17.141a1.013,1.013,0,0,0,1.013-1.013V7.013A1.013,1.013,0,0,0,17.141,6Z" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.688,16.376A1.688,1.688,0,1,0,13,14.688,1.688,1.688,0,0,0,14.688,16.376Z" transform="translate(-10.637 -10.637)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.154,29.376,14.44,26l-3.376,3.039L8.7,27.013,6,29.039" transform="translate(-6 -19.248)"/></g><rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 -0.302)"/></g></svg>)
+export const IconImage = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-4572 -5144)"><rect fill="none" width="28" height="28" transform="translate(4572 5144)"/><g transform="translate(4571.022 5143.024)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M22.5,6H7.5A1.5,1.5,0,0,0,6,7.5v15A1.5,1.5,0,0,0,7.5,24h15A1.5,1.5,0,0,0,24,22.5V7.5A1.5,1.5,0,0,0,22.5,6Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M15.493,17.986A2.493,2.493,0,1,0,13,15.493,2.493,2.493,0,0,0,15.493,17.986Z" transform="translate(-3.496 -3.496)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M21.879,25.817a1,1,0,0,1,1.617.026l4.375,6.275a1,1,0,0,1-.818,1.568H16Z" transform="translate(-4.965 -9.686)"/></g></g></svg>)

src/assets/icons/components/IconLayers.tsx

@@ -0,0 +1,17 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconLayers = createIcon(<svg viewBox="0 0 28 28">
+    <g transform="translate(-1600 -1008)">
+        <g transform="translate(-2898 -4202)">
+            <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        </g>
+        <g transform="translate(-2898.094 -4203.081)">
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
+                d="M4512.337,5215.856l-9.461,4.887,9.461,4.7,9.1-4.7Z" transform="translate(0.005 0)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M4506.734,5223.192l-3.984,2.5,9.618,4.7,8.859-4.7-3.491-2.322" transform="translate(0 -0.65)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M4506.869,5223.146l-4.119,2.551,9.618,4.7,8.859-4.7-3.757-2.551" transform="translate(0 3.914)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconProfile.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconProfile = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(-4 1)"><g transform="translate(4457 4830)"><g fill="none" stroke="currentColor" stroke-width="1.2px" transform="translate(49 383)"><circle stroke="none" cx="10" cy="10" r="10"/><circle fill="none" cx="10" cy="10" r="9.4"/></g></g><path fill="none" stroke="currentColor" stroke-width="1.2px" d="M4960.146,465.195s6.448-6.193,14.209,0" transform="translate(-451.25 4764)"/><g fill="none" stroke="currentColor" stroke-width="1.2px" transform="translate(4513.5 5218)"><circle stroke="none" cx="2.5" cy="2.5" r="2.5"/><circle fill="none" cx="2.5" cy="2.5" r="3.1"/></g></g></g></svg>)

src/assets/icons/components/IconShape.tsx

@@ -1,13 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconShape = createIcon(<svg viewBox="0 0 28 28">
-    <g transform="translate(-4498 -5210)">
-        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
-        <g transform="translate(4497.25 5210.002)">
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
-                d="M12,18a7,7,0,1,1,7-7" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M31,18H18V31H31Z"
-                transform="translate(-6.5 -7)" />
-        </g>
-    </g>
-</svg>)
+export const IconShape = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(4497.25 5210.002)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M12,18a7,7,0,1,1,7-7"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M31,18H18V31H31Z" transform="translate(-6.5 -7)"/></g></g></svg>)

src/assets/icons/components/IconText.tsx

@@ -1,19 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconText = createIcon(<svg viewBox="0 0 16 16">
-    <g transform="translate(0 -0.078)">
-        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)" />
-        <g transform="translate(1.892 1.971)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" width="12" height="12" rx="1"
-                transform="translate(0.107 0.107)" />
-            <g transform="translate(2.764 2.367)">
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round"
-                    d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)" />
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59"
-                    transform="translate(-19.615 -26.845)" />
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36"
-                    transform="translate(-20.821 -17.205)" />
-            </g>
-        </g>
-    </g>
-</svg>)
+export const IconText = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1490 -423)"><g transform="translate(-3008 -4787)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/></g><g transform="translate(1493.624 426.624)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="18" height="18" rx="2" transform="translate(1.376 1.376)"/><g transform="translate(5.992 5.939)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M16,17.644V16h8.77v1.644" transform="translate(-16 -16)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M22,34h2.192" transform="translate(-18.711 -25.127)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M24,18v8.77" transform="translate(-19.616 -17.896)"/></g></g></g></svg>)

src/assets/icons/components/IconTpl.tsx

@@ -1,15 +1,13 @@
 
 import { createIcon } from '@queenjs/icons';
 export const IconTpl = createIcon(<svg viewBox="0 0 28 28">
+    
     <g transform="translate(-4498 -5210)">
         <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
-        <g transform="translate(4496 5208.055)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="20" height="20" rx="2"
-                transform="translate(6 5.945)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
-                d="M6,17H25.945" transform="translate(0 -4.906)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
-                d="M17,30.851V17" transform="translate(-4.906 -4.906)" />
+        <g transform="translate(4496.582 5208.637)">
+            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="18" height="18" rx="2" transform="translate(6.419 6.364)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M6,17H24" transform="translate(0.418 -5.263)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M17,29.626V17" transform="translate(-5.26 -5.263)" />
         </g>
     </g>
 </svg>)

src/assets/icons/components/IconVideo.tsx

@@ -1,14 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconVideo = createIcon(<svg viewBox="0 0 16 16">
-    <g transform="translate(-292 -40)">
-        <rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)" />
-        <g transform="translate(288 35.707)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" width="12"
-                height="12" rx="1" transform="translate(6 6.293)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round"
-                d="M18.5,18.845V16.206l2.285,1.319,2.285,1.319-2.285,1.319L18.5,21.484Z"
-                transform="translate(-8.268 -6.75)" />
-        </g>
-    </g>
-</svg>)
+export const IconVideo = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(4502.845 5215.267)"><rect fill="rgba(0,0,0,0)" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" width="18" height="18" rx="1" transform="translate(0.155 -0.267)"/><path fill="rgba(0,0,0,0)" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M18.5,19.86V16.206l3.165,1.827L24.83,19.86l-3.165,1.827L18.5,23.515Z" transform="translate(-12.271 -11.127)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -8,6 +8,7 @@ export * from "./components/IconAlignL";
 export * from "./components/IconAlignR";
 export * from "./components/IconApplication";
 export * from "./components/IconClear";
+export * from "./components/IconCombination";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
@@ -16,12 +17,14 @@ export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";
 export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
+export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
 export * from "./components/IconPlay";
 export * from "./components/IconPlay2";
+export * from "./components/IconProfile";
 export * from "./components/IconQueen";
 export * from "./components/IconResizeY";
 export * from "./components/IconRight";

src/assets/icons/svg/Tpl.svg

@@ -1,13 +1,11 @@
 <svg viewBox="0 0 28 28">
+    
     <g transform="translate(-4498 -5210)">
         <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
-        <g transform="translate(4496 5208.055)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="20" height="20" rx="2"
-                transform="translate(6 5.945)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
-                d="M6,17H25.945" transform="translate(0 -4.906)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
-                d="M17,30.851V17" transform="translate(-4.906 -4.906)" />
+        <g transform="translate(4496.582 5208.637)">
+            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="18" height="18" rx="2" transform="translate(6.419 6.364)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M6,17H24" transform="translate(0.418 -5.263)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M17,29.626V17" transform="translate(-5.26 -5.263)" />
         </g>
     </g>
 </svg>

src/assets/icons/svg/ai.svg

@@ -1,27 +1,20 @@
-<svg viewBox="0 0 21.916 21.916">
-    <g transform="translate(-285.792 -250.411)">
-        <g transform="translate(286.492 251.111)">
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M10.594,6H6.919A.919.919,0,0,0,6,6.92V10.6"
-                transform="translate(-6 -6)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M10.594,36.594H6.919A.919.919,0,0,1,6,35.675V32"
-                transform="translate(-6 -16.078)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M32,36.594h3.675a.919.919,0,0,0,.919-.919V32"
-                transform="translate(-16.078 -16.078)" />
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M32,6h3.675a.919.919,0,0,1,.919.92V10.6"
-                transform="translate(-16.079 -6)" />
-        </g>
-        <g transform="translate(291.432 256.749)">
-            <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
-                stroke-width="1.4px" d="M4471.314,754.778l3.792-8.764,3.857,8.764"
-                transform="translate(-4471.314 -746.015)" />
-            <path fill="none" stroke="#fff" stroke-width="1.4px"
-                d="M4473.049,754.619h5.048" transform="translate(-4471.853 -748.683)" />
-            <path stroke-linecap="round" fill="none" stroke="#fff" stroke-width="1.4px"
-                d="M4486.73,745.231v8.84" transform="translate(-4476.095 -745.231)" />
+<svg viewBox="0 0 28 28">
+    
+    <g transform="translate(-4498 -5210)">
+        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        <g transform="translate(4216.258 4963.639)">
+            <g transform="translate(286.492 251.111)">
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M10.25,6H6.85A.85.85,0,0,0,6,6.851v3.4" transform="translate(-6 -6)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M10.25,36.25H6.85A.85.85,0,0,1,6,35.4V32" transform="translate(-6 -17.749)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M32,36.25h3.4a.85.85,0,0,0,.85-.85V32" transform="translate(-17.749 -17.749)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M32,6h3.4a.85.85,0,0,1,.85.851v3.4" transform="translate(-17.749 -6)" />
+            </g>
+            <g transform="translate(290.823 256.096)">
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M4471.314,754.121l3.508-8.106,3.567,8.106"
+                    transform="translate(-4471.314 -746.015)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" d="M4473.049,754.619h4.67" transform="translate(-4471.942 -749.128)" />
+                <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M4486.73,745.231v8.177" transform="translate(-4476.892 -745.231)" />
+            </g>
         </g>
     </g>
 </svg>

src/assets/icons/svg/application.svg

@@ -1,5 +1 @@
-<svg viewBox="0 0 1024 1024">
-    <path
-        d="M1008.302197 306.556735 789.691542 525.16739C769.561962 545.29697 736.950904 545.29697 716.821324 525.16739L498.2391 306.556735C478.10952 286.455586 478.10952 253.816097 498.2391 233.714948L716.821324 15.104293C736.950904-5.025287 769.561962-5.025287 789.691542 15.104293L1008.302197 233.714948C1028.431777 253.816097 1028.431777 286.455586 1008.302197 306.556735ZM753.668691 54.823253 537.958061 270.533884 753.668691 486.244515 969.379322 270.533884 753.668691 54.823253ZM369.841946 1023.971568 57.094228 1023.971568C25.677298 1023.971568 0.231007 998.525277 0.231007 967.108347L0.231007 654.360629C0.231007 622.972131 25.677298 597.497407 57.094228 597.497407L369.841946 597.497407C401.230445 597.497407 426.705168 622.972131 426.705168 654.360629L426.705168 967.108347C426.705168 998.525277 401.230445 1023.971568 369.841946 1023.971568ZM369.841946 654.360629 57.094228 654.360629 57.094228 967.108347 369.841946 967.108347 369.841946 654.360629ZM369.841946 512.202575 57.094228 512.202575C25.677298 512.202575 0.231007 486.756284 0.231007 455.339354L0.231007 142.591636C0.231007 111.203137 25.677298 85.728414 57.094228 85.728414L369.841946 85.728414C401.230445 85.728414 426.705168 111.203137 426.705168 142.591636L426.705168 455.339354C426.705168 486.756284 401.230445 512.202575 369.841946 512.202575ZM369.841946 142.591636 57.094228 142.591636 57.094228 455.339354 369.841946 455.339354 369.841946 142.591636ZM568.863221 597.497407 881.61094 597.497407C912.999438 597.497407 938.474161 622.972131 938.474161 654.360629L938.474161 967.108347C938.474161 998.525277 912.999438 1023.971568 881.61094 1023.971568L568.863221 1023.971568C537.446292 1023.971568 512 998.525277 512 967.108347L512 654.360629C512 622.972131 537.446292 597.497407 568.863221 597.497407ZM568.863221 967.108347 881.61094 967.108347 881.61094 654.360629 568.863221 654.360629 568.863221 967.108347Z"
-        fill="currentColor"></path>
-</svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-1490 -423)"><g transform="translate(-3008 -4787)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/></g><g transform="translate(1489.124 422.124)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M17,8.639,20.639,5l3.639,3.639-3.639,3.639Z" transform="translate(-5.762)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M17,32.639,20.639,29l3.639,3.639-3.639,3.639Z" transform="translate(-5.762 -11.525)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M29,20.639,32.639,17l3.639,3.639-3.639,3.639Z" transform="translate(-11.525 -5.762)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M5,20.639,8.639,17l3.639,3.639L8.639,24.277Z" transform="translate(0 -5.762)"/></g></g></svg>

src/assets/icons/svg/combination.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>

src/assets/icons/svg/cube.svg

@@ -1 +1,17 @@
-<svg viewBox="0 0 16 16"><g transform="translate(-1638 -912)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(1638 912)"/><g transform="translate(-33.699 -8.514)"><path fill="none" stroke="#a9abaf" stroke-linejoin="round" d="M15.7,12l5.7,3.257v6.514l-5.7,3.257L10,21.771V15.257Z" transform="translate(1664 910)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M10,20l5.7,3.257L21.4,20" transform="translate(1664 905.257)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M24,28v6.514" transform="translate(1655.7 900.514)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" d="M18.55,16l2.85,1.628v3.257M12.85,16,10,17.628v3.257m2.85,4.885L15.7,27.4l2.85-1.628" transform="translate(1664 907.628)"/></g></g></svg>
+<svg viewBox="0 0 28 28">
+
+    <g transform="translate(-4498 -5210)">
+        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        <path fill="currentColor" opacity="0.3" d="M1353.895-956.716l9.4,3.887-9.153,4.979-9.276-4.979h0Z"
+            transform="translate(3158 6171)" />
+        <g transform="translate(4503.013 5214.398)">
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" d="M14407.669,5203l9.054,4.69,8.89-4.69"
+                transform="translate(-14407.669 -5199.026)" />
+            <path stroke="currentColor" stroke-width="1.2px" d="M14418.156,5208.608v10.538"
+                transform="translate(-14409.155 -5199.943)" />
+            <path fill="none" stroke-width="1.2px" stroke="currentColor" stroke-linejoin="round"
+                d="M14416.628,5199.581l-8.927,3.922v11.262l8.927,3.653,9.017-3.653V5203.5Z"
+                transform="translate(-14407.67 -5199.581)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/image.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16"><g transform="translate(0 0.302)"><g transform="translate(1.771 1.772)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.141,6H7.013A1.013,1.013,0,0,0,6,7.013V17.141a1.013,1.013,0,0,0,1.013,1.013H17.141a1.013,1.013,0,0,0,1.013-1.013V7.013A1.013,1.013,0,0,0,17.141,6Z" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.688,16.376A1.688,1.688,0,1,0,13,14.688,1.688,1.688,0,0,0,14.688,16.376Z" transform="translate(-10.637 -10.637)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.154,29.376,14.44,26l-3.376,3.039L8.7,27.013,6,29.039" transform="translate(-6 -19.248)"/></g><rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 -0.302)"/></g></svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-4572 -5144)"><rect fill="none" width="28" height="28" transform="translate(4572 5144)"/><g transform="translate(4571.022 5143.024)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M22.5,6H7.5A1.5,1.5,0,0,0,6,7.5v15A1.5,1.5,0,0,0,7.5,24h15A1.5,1.5,0,0,0,24,22.5V7.5A1.5,1.5,0,0,0,22.5,6Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M15.493,17.986A2.493,2.493,0,1,0,13,15.493,2.493,2.493,0,0,0,15.493,17.986Z" transform="translate(-3.496 -3.496)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2px" d="M21.879,25.817a1,1,0,0,1,1.617.026l4.375,6.275a1,1,0,0,1-.818,1.568H16Z" transform="translate(-4.965 -9.686)"/></g></g></svg>

src/assets/icons/svg/layers.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 28 28">
+    <g transform="translate(-1600 -1008)">
+        <g transform="translate(-2898 -4202)">
+            <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
+        </g>
+        <g transform="translate(-2898.094 -4203.081)">
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round"
+                d="M4512.337,5215.856l-9.461,4.887,9.461,4.7,9.1-4.7Z" transform="translate(0.005 0)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M4506.734,5223.192l-3.984,2.5,9.618,4.7,8.859-4.7-3.491-2.322" transform="translate(0 -0.65)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M4506.869,5223.146l-4.119,2.551,9.618,4.7,8.859-4.7-3.757-2.551" transform="translate(0 3.914)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/profile.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(-4 1)"><g transform="translate(4457 4830)"><g fill="none" stroke="currentColor" stroke-width="1.2px" transform="translate(49 383)"><circle stroke="none" cx="10" cy="10" r="10"/><circle fill="none" cx="10" cy="10" r="9.4"/></g></g><path fill="none" stroke="currentColor" stroke-width="1.2px" d="M4960.146,465.195s6.448-6.193,14.209,0" transform="translate(-451.25 4764)"/><g fill="none" stroke="currentColor" stroke-width="1.2px" transform="translate(4513.5 5218)"><circle stroke="none" cx="2.5" cy="2.5" r="2.5"/><circle fill="none" cx="2.5" cy="2.5" r="3.1"/></g></g></g></svg>

src/assets/icons/svg/shape.svg

@@ -1,11 +1 @@
-<svg viewBox="0 0 28 28">
-    <g transform="translate(-4498 -5210)">
-        <rect fill="none" width="28" height="28" transform="translate(4498 5210)" />
-        <g transform="translate(4497.25 5210.002)">
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
-                d="M12,18a7,7,0,1,1,7-7" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M31,18H18V31H31Z"
-                transform="translate(-6.5 -7)" />
-        </g>
-    </g>
-</svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(4497.25 5210.002)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M12,18a7,7,0,1,1,7-7"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M31,18H18V31H31Z" transform="translate(-6.5 -7)"/></g></g></svg>

src/assets/icons/svg/text.svg

@@ -1,17 +1 @@
-<svg viewBox="0 0 16 16">
-    <g transform="translate(0 -0.078)">
-        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)" />
-        <g transform="translate(1.892 1.971)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" width="12" height="12" rx="1"
-                transform="translate(0.107 0.107)" />
-            <g transform="translate(2.764 2.367)">
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round"
-                    d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)" />
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59"
-                    transform="translate(-19.615 -26.845)" />
-                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36"
-                    transform="translate(-20.821 -17.205)" />
-            </g>
-        </g>
-    </g>
-</svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-1490 -423)"><g transform="translate(-3008 -4787)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/></g><g transform="translate(1493.624 426.624)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" width="18" height="18" rx="2" transform="translate(1.376 1.376)"/><g transform="translate(5.992 5.939)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M16,17.644V16h8.77v1.644" transform="translate(-16 -16)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M22,34h2.192" transform="translate(-18.711 -25.127)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M24,18v8.77" transform="translate(-19.616 -17.896)"/></g></g></g></svg>

src/assets/icons/svg/video.svg

@@ -1,12 +1 @@
-<svg viewBox="0 0 16 16">
-    <g transform="translate(-292 -40)">
-        <rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)" />
-        <g transform="translate(288 35.707)">
-            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" width="12"
-                height="12" rx="1" transform="translate(6 6.293)" />
-            <path fill="none" stroke="currentColor" stroke-linejoin="round"
-                d="M18.5,18.845V16.206l2.285,1.319,2.285,1.319-2.285,1.319L18.5,21.484Z"
-                transform="translate(-8.268 -6.75)" />
-        </g>
-    </g>
-</svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-4498 -5210)"><rect fill="none" width="28" height="28" transform="translate(4498 5210)"/><g transform="translate(4502.845 5215.267)"><rect fill="rgba(0,0,0,0)" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" width="18" height="18" rx="1" transform="translate(0.155 -0.267)"/><path fill="rgba(0,0,0,0)" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M18.5,19.86V16.206l3.165,1.827L24.83,19.86l-3.165,1.827L18.5,23.515Z" transform="translate(-12.271 -11.127)"/></g></g></svg>

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -1,18 +1,20 @@
-import { CloudUploadOutlined } from "@ant-design/icons-vue";
-import { css, cx } from "@linaria/core";
+import { cx } from "@linaria/core";
 import { Button, Tooltip } from "ant-design-vue";
 import { computed, reactive } from "vue";
 
 import {
   IconAi,
   IconApplication,
+  IconCombination,
+  IconCube,
   IconImage,
+  IconLayers,
+  IconProfile,
   IconShape,
   IconText,
   IconTpl,
   IconVideo,
 } from "@/assets/icons";
-import { IconCube, IconLayers } from "@queenjs/icons";
 import { defineUI } from "queenjs";
 import { CompTree } from "../SliderRight/CompTree";
 import AiText from "./AiText";
@@ -32,7 +34,7 @@ const tabs = [
   },
   {
     title: "组合",
-    icon: IconCube,
+    icon: IconCombination,
     content: [
       {
         title: "平台",
@@ -46,6 +48,11 @@ const tabs = [
       },
     ],
   },
+  {
+    title: "组件",
+    icon: IconApplication,
+    component: Application,
+  },
   {
     title: "文字",
     icon: IconText,
@@ -57,30 +64,25 @@ const tabs = [
     component: Sources,
     props: { sourceType: "Image", sourceFrom: "system" },
   },
-  {
-    title: "形状",
-    icon: IconShape,
-    component: Shapes,
-  },
   {
     title: "视频",
     icon: IconVideo,
     component: Sources,
     props: { sourceType: "Video", sourceFrom: "system" },
   },
-  {
-    title: "组件",
-    icon: IconApplication,
-    component: Application,
-  },
   {
     title: "3D",
     icon: IconCube,
     component: Comp3d,
   },
   {
-    title: "已上传",
-    icon: CloudUploadOutlined,
+    title: "形状",
+    icon: IconShape,
+    component: Shapes,
+  },
+  {
+    title: "我的",
+    icon: IconProfile,
     content: [
       {
         title: "图片",
@@ -101,7 +103,7 @@ const tabs = [
   },
   {
     title: "图层",
-    icon: () => <IconLayers class="text-24px transform scale-170" />,
+    icon: IconLayers,
     component: CompTree,
   },
 ];
@@ -128,7 +130,7 @@ export default defineUI({
 
       return (
         <div class="h-full flex">
-          <div class="flex flex-col w-70px py-10px border-right !border-2px overflow-hidden">
+          <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-hidden">
             {tabs.map((record, index) => {
               return (
                 <>
@@ -136,14 +138,13 @@ export default defineUI({
                   <div
                     key={index}
                     class={cx(
-                      tabItem,
-                      "relative my-5px text-center cursor-pointer text-light-50 transition",
-                      state.tabIndex == index && "active"
+                      "my-2px rounded cursor-pointer text-light-50 transition hover:(bg-[#1F1F1F] text-orange)",
+                      state.tabIndex == index && "bg-[#1F1F1F] text-orange"
                     )}
                     onClick={() => (state.tabIndex = index)}
                   >
                     <Tooltip title={record.title} placement="right">
-                      <record.icon class="text-28px p-10px" />
+                      <record.icon class="px-15px py-10px text-28px" />
                     </Tooltip>
                   </div>
                 </>
@@ -179,25 +180,3 @@ export default defineUI({
     };
   },
 });
-
-const tabItem = css`
-  &:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 3px;
-    background-color: transparent;
-    transition: all 0.3s ease-in-out;
-  }
-  &.active,
-  &:hover {
-    color: @inf-primary-color;
-  }
-  &.active {
-    &:before {
-      background-color: @inf-primary-color;
-    }
-  }
-`;