fix(all): 新增icon-v2图标合集, 修改material算法配置组件

feat: 添加新icon

See merge request web-project/zhst-lambo!70

packages/icon-v2/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zhst/icon-v2
 
+## 0.4.0
+
+### Minor Changes
+
+- 新增 icon-v2 图标合集, 修改 material 算法配置组件
+
 ## 0.3.0
 
 ### Minor Changes

packages/icon-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/icon-v2",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "图标库",
   "keywords": [
     "icon",

packages/icon-v2/src/demo/basic.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Add } from '@zhst/icon-v2';
-import { message } from '@zhst/meta';
+import { Button, message } from '@zhst/meta';
 
 const demo = () => {
 
   return (
     <div>
-      <Add style={{color: 'red',fontSize: 30}} onClick={()=>{message.success('触发onClick事件成功')}}></Add>
+      <Button style={{ width: 150, height: 36 }} icon={<Add></Add>} onClick={()=>{message.success('触发onClick事件成功')}}>icon居中</Button>
     </div>
   );
 };

packages/icon-v2/src/icons/Add.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Add = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1c1.933 0 3.683.784 4.95 2.05A6.978 6.978 0 0 1 15 8a6.978 6.978 0 0 1-2.05 4.95A6.978 6.978 0 0 1 8 15a6.978 6.978 0 0 1-4.95-2.05A6.978 6.978 0 0 1 1 8c0-1.933.784-3.683 2.05-4.95A6.978 6.978 0 0 1 8 1Zm0 1a5.977 5.977 0 0 0-4.243 1.757A5.977 5.977 0 0 0 2 8c0 1.614.639 3.124 1.757 4.243A5.977 5.977 0 0 0 8 14a5.977 5.977 0 0 0 4.243-1.757A5.977 5.977 0 0 0 14 8a5.977 5.977 0 0 0-1.757-4.243A5.977 5.977 0 0 0 8 2Zm0 2a.5.5 0 0 1 .5.5v3h3a.5.5 0 1 1 0 1h-3v3a.5.5 0 1 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Add;

packages/icon-v2/src/icons/Add2.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Add2 = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="add2__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M512 128a32 32 0 0 1 32 32v320h320a32 32 0 1 1 0 64H544v320a32 32 0 1 1-64 0V544H160a32 32 0 0 1 0-64h320V160a32 32 0 0 1 32-32z" />
+    </svg>
+</span>
+);
+export default Add2;

packages/icon-v2/src/icons/Addvideo.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Addvideo = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M12.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H13v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 1 1 0-1H12v-1.5a.5.5 0 0 1 .5-.5Zm.5-8a2 2 0 0 1 2 2v4.5a.5.5 0 1 1-1 0V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h5.5a.5.5 0 1 1 0 1H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10ZM7 5.402a1 1 0 0 1 .53.152l2.557 1.598a1 1 0 0 1 0 1.696L7.53 10.446A1 1 0 0 1 6 9.598V6.402a1 1 0 0 1 1-1Zm0 1v3.196l2.555-1.599L7 6.402Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Addvideo;

packages/icon-v2/src/icons/Ai.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Ai = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M1.81 8.5a1.5 1.5 0 0 1 1.025 2.595l.016-.015a6.002 6.002 0 0 0 10.86-1.235.5.5 0 1 1 .951.308 7.002 7.002 0 0 1-12.73 1.341l-.122.006-.144-.007A1.5 1.5 0 0 1 1.81 8.5ZM10.5 5a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5Zm-3.536.314 2 5a.5.5 0 1 1-.928.372L7.56 9.5H5.438l-.474 1.186a.5.5 0 0 1-.563.304l-.087-.026a.5.5 0 0 1-.278-.65l2-5a.5.5 0 0 1 .928 0ZM1.81 9.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1ZM6.5 6.846 5.838 8.5h1.323L6.5 6.846ZM8 1a7.003 7.003 0 0 1 6.067 3.505l.123-.005.144.007a1.5 1.5 0 1 1-1.17.398l-.015.015A6.002 6.002 0 0 0 2.29 6.154a.5.5 0 0 1-.951-.308A7.002 7.002 0 0 1 8 1Zm6.19 4.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Ai;

packages/icon-v2/src/icons/Algorithmfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Algorithmfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="nonzero"
-      d="M8 1a1.5 1.5 0 0 1 1.484 1.278l3.712 2.145a1 1 0 0 1 .5.866l.001 4.287a1.5 1.5 0 0 1-1.483 2.57L8.5 14.289a1 1 0 0 1-1 0l-3.713-2.143a1.5 1.5 0 0 1-1.484-2.57V5.289a1 1 0 0 1 .5-.866l3.713-2.145A1.5 1.5 0 0 1 8 1Zm2.165 8.827L8.25 10.933a.5.5 0 0 1-.5 0L5.835 9.827l-1.123.65c.061.331.008.67-.144.965L8 13.422l3.432-1.98a1.504 1.504 0 0 1-.144-.966l-1.123-.649ZM6.736 3.308l-3.432 1.98v3.963c.33.016.651.14.907.358l1.124-.649V6.75a.5.5 0 0 1 .178-.382l.072-.051L7.5 5.21V3.914a1.504 1.504 0 0 1-.764-.606Zm2.528 0a1.504 1.504 0 0 1-.763.606L8.5 5.21l1.915 1.107a.5.5 0 0 1 .242.345l.008.088v2.21l1.124.649c.256-.218.576-.342.907-.358V5.29Z"
-    />
-  </svg>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="nonzero"
+        d="M8 1a1.5 1.5 0 0 1 1.484 1.278l3.712 2.145a1 1 0 0 1 .5.866l.001 4.287a1.5 1.5 0 0 1-1.483 2.57L8.5 14.289a1 1 0 0 1-1 0l-3.713-2.143a1.5 1.5 0 0 1-1.484-2.57V5.289a1 1 0 0 1 .5-.866l3.713-2.145A1.5 1.5 0 0 1 8 1Zm2.165 8.827L8.25 10.933a.5.5 0 0 1-.5 0L5.835 9.827l-1.123.65c.061.331.008.67-.144.965L8 13.422l3.432-1.98a1.504 1.504 0 0 1-.144-.966l-1.123-.649ZM6.736 3.308l-3.432 1.98v3.963c.33.016.651.14.907.358l1.124-.649V6.75a.5.5 0 0 1 .178-.382l.072-.051L7.5 5.21V3.914a1.504 1.504 0 0 1-.764-.606Zm2.528 0a1.504 1.504 0 0 1-.763.606L8.5 5.21l1.915 1.107a.5.5 0 0 1 .242.345l.008.088v2.21l1.124.649c.256-.218.576-.342.907-.358V5.29Z"
+      />
+    </svg> 
+</span>
 );
 
 export default Algorithmfilled;

packages/icon-v2/src/icons/Analysis.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Analysis = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10Zm0 1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Zm-.146 2.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.631.062l-2.66-1.773-2.71 2.71a.5.5 0 0 1-.637.058l-.07-.057a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .631-.062l2.659 1.772 2.71-2.71a.5.5 0 0 1 .708 0ZM4.5 14h7a.5.5 0 1 1 0 1h-7a.5.5 0 1 1 0-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Analysis;

packages/icon-v2/src/icons/Analysissel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Analysissel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="nonzero">
       <path
         fill="currentColor"
@@ -13,7 +15,8 @@ const Analysissel = (props: CustomSVGProps) => (
         d="M12.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.631.062l-2.66-1.773-2.71 2.71a.5.5 0 0 1-.637.058l-.07-.057a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .631-.062l2.659 1.772 2.71-2.71Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Analysissel;

packages/icon-v2/src/icons/Application.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Application = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="application__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M832 96H640a96 96 0 0 0-96 96v192a96 96 0 0 0 96 96h192a96 96 0 0 0 96-96V192a96 96 0 0 0-96-96zm0 64a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H640a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h192zM384 96H192a96 96 0 0 0-96 96v192a96 96 0 0 0 96 96h192a96 96 0 0 0 96-96V192a96 96 0 0 0-96-96zm0 64a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h192zm448 384H640a96 96 0 0 0-96 96v192a96 96 0 0 0 96 96h192a96 96 0 0 0 96-96V640a96 96 0 0 0-96-96zm0 64a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H640a32 32 0 0 1-32-32V640a32 32 0 0 1 32-32h192zm-448-64H192a96 96 0 0 0-96 96v192a96 96 0 0 0 96 96h192a96 96 0 0 0 96-96V640a96 96 0 0 0-96-96zm0 64a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V640a32 32 0 0 1 32-32h192z" />
+    </svg>
+</span>
+);
+export default Application;

packages/icon-v2/src/icons/Arrowdown.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Arrowdown = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3.646 5.646a.5.5 0 0 1 .708 0L8 9.293l3.646-3.647a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Arrowdown;

packages/icon-v2/src/icons/Arrowdown2.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Arrowdown2 = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="arrow-down2__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="m726.4 435.968-189.44 236.8a32 32 0 0 1-49.92 0l-189.44-236.8A32 32 0 0 1 322.56 384h378.88a32 32 0 0 1 24.96 51.968z" />
+    </svg>
+</span>
+);
+export default Arrowdown2;

packages/icon-v2/src/icons/Arrowleft.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Arrowleft = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.354 3.646a.5.5 0 0 1 0 .708L6.707 8l3.647 3.646a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Arrowleft;

packages/icon-v2/src/icons/Arrowright.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Arrowright = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M5.646 3.646a.5.5 0 0 0 0 .708L9.293 8l-3.647 3.646a.5.5 0 0 0-.057.638l.057.07a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Arrowright;

packages/icon-v2/src/icons/Arrowul.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Arrowul = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="arrow-ul__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M672 128a32 32 0 1 1 0 64H237.248l649.408 649.344a32 32 0 0 1-45.312 45.312L192 237.248V672a32 32 0 0 1-26.24 31.488L160 704a32 32 0 0 1-32-32V159.36c0-1.408.128-2.752.32-4.096L128 160l.192-3.392.896-4.8 1.28-4.032 2.56-4.864 2.56-3.52 1.92-2.048 2.624-2.368 3.968-2.688 3.84-1.92 3.968-1.28 3.456-.768 2.048-.192L672 128z" />
+    </svg>
+</span>
+);
+export default Arrowul;

packages/icon-v2/src/icons/Arrowup.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Arrowup = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3.646 10.354a.5.5 0 0 0 .708 0L8 6.707l3.646 3.647a.5.5 0 0 0 .638.057l.07-.057a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Arrowup;

packages/icon-v2/src/icons/Attachment.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Attachment = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M12.95 2.172a4 4 0 0 1 0 5.656l-6.718 6.718a.5.5 0 1 1-.707-.707l6.718-6.718A3 3 0 1 0 8 2.88l-4.95 4.95a2 2 0 1 0 2.829 2.828l4.242-4.243A1 1 0 1 0 8.707 5L4.818 8.89a.5.5 0 0 1-.707-.708L8 4.292a2 2 0 1 1 2.828 2.83l-4.242 4.242a3 3 0 1 1-4.243-4.243l4.95-4.95a4 4 0 0 1 5.657 0Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Attachment;

packages/icon-v2/src/icons/Back.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Back = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M5.854 3.646a.5.5 0 0 1 0 .708L2.706 7.5H14.5a.5.5 0 1 1 0 1H2.706l3.148 3.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Back;

packages/icon-v2/src/icons/Bike.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Bike = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11.5 2a.5.5 0 0 1 .496.438l.697 5.57a2.5 2.5 0 1 1-2.396 1.309L6.628 6.258 5.189 8.657a2.5 2.5 0 1 1-.858-.515L5.617 6H4.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .28.915l3.158 2.633c.225-.18.483-.323.762-.417L11.058 3H8.5a.5.5 0 0 1-.492-.41L8 2.5a.5.5 0 0 1 .5-.5h3Zm-8 7a1.5 1.5 0 1 0 1.156.544l-.727 1.213a.5.5 0 0 1-.605.211l-.081-.04a.5.5 0 0 1-.172-.685l.727-1.213A1.507 1.507 0 0 0 3.5 9Zm9.322.035.174 1.403a.5.5 0 1 1-.992.124l-.175-1.404a1.5 1.5 0 1 0 .993-.123Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Bike;

packages/icon-v2/src/icons/Bikefilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Bikefilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11.5 2a.5.5 0 0 1 .496.438l.697 5.57a2.5 2.5 0 1 1-2.396 1.309L6.628 6.258 5.189 8.657a2.5 2.5 0 1 1-.858-.515L5.617 6H4.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .28.915l3.158 2.633c.225-.18.483-.323.762-.417L11.058 3H8.5a.5.5 0 0 1-.492-.41L8 2.5a.5.5 0 0 1 .5-.5h3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Bikefilled;

packages/icon-v2/src/icons/Bikesel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Bikesel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="currentColor"
@@ -11,7 +13,8 @@ const Bikesel = (props: CustomSVGProps) => (
       />
       <rect width={4} height={1} x={4} y={5} fill="#09F" rx={0.5} />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Bikesel;

packages/icon-v2/src/icons/Briefcase.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Briefcase = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10 1a2 2 0 0 1 2 2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2-2ZM2 7.527V12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.524l-.361.116c-1.212.37-2.425.62-3.639.752V9a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-.608a19.828 19.828 0 0 1-4-.865ZM9 7H7v2h2V7Zm1-5H6a1 1 0 0 0-1 1h6a1 1 0 0 0-.883-.993L10 2Zm0 5.386a18.92 18.92 0 0 0 3.842-.86A.5.5 0 0 1 14 6.5V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1.5a.5.5 0 0 1 .158.026A18.92 18.92 0 0 0 6 7.386V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v.386Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Briefcase;

packages/icon-v2/src/icons/Browser.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Browser = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1c1.907 0 3.637.763 4.9 2l-.222-.207a7.043 7.043 0 0 1 .71.738l.014.016A6.971 6.971 0 0 1 15 8a6.972 6.972 0 0 1-1.611 4.468l-.051.061a7.04 7.04 0 0 1-.118.135l.17-.196a7.213 7.213 0 0 1-.52.56A6.977 6.977 0 0 1 8 15a6.977 6.977 0 0 1-4.901-2.002l-.026-.026-.023-.022a7.043 7.043 0 0 1-.439-.482l-.152-.19A6.97 6.97 0 0 1 1 8c0-1.81.687-3.46 1.814-4.702l-.202.235A6.752 6.752 0 0 1 3.101 3 6.977 6.977 0 0 1 8 1Zm0 11c-.485 0-.958.034-1.416.098C6.967 13.271 7.491 14 8 14c.51 0 1.033-.729 1.416-1.9A9.976 9.976 0 0 0 8 12Zm-2.407.292-.275.072c-.355.1-.697.219-1.023.356.57.447 1.22.794 1.928 1.013a6.867 6.867 0 0 1-.63-1.441Zm4.815-.001-.055.166a6.587 6.587 0 0 1-.577 1.275 5.971 5.971 0 0 0 1.928-1.011 8.834 8.834 0 0 0-1.296-.43ZM13.979 8.5h-2.986a15.308 15.308 0 0 1-.329 2.827c.647.16 1.26.38 1.828.65A5.974 5.974 0 0 0 13.98 8.5Zm-8.972 0H2.02a5.976 5.976 0 0 0 1.487 3.478c.568-.27 1.18-.49 1.827-.653-.186-.851-.3-1.81-.328-2.825Zm4.985 0H6.008c.03.96.143 1.853.314 2.629a11.121 11.121 0 0 1 3.356-.002c.17-.774.285-1.667.314-2.627ZM3.508 4.023l-.036.04A5.975 5.975 0 0 0 2.02 7.5h2.986c.028-1.015.142-1.973.328-2.825a9.77 9.77 0 0 1-1.827-.651Zm6.17.848-.183.029a11.149 11.149 0 0 1-3.173-.026c-.17.774-.285 1.666-.314 2.625h3.984c-.03-.96-.143-1.852-.314-2.628Zm2.813-.85-.278.128a9.942 9.942 0 0 1-1.548.526c.186.85.3 1.808.328 2.824h2.986a5.976 5.976 0 0 0-1.488-3.478ZM8 2l-.084.006c-.482.075-.97.787-1.332 1.894a10.171 10.171 0 0 0 2.832.001C9.033 2.73 8.509 2 8 2Zm-1.776.268-.161.052c-.645.22-1.24.546-1.766.959a8.76 8.76 0 0 0 1.295.43 6.832 6.832 0 0 1 .632-1.441Zm3.553 0 .015.026c.237.398.443.875.615 1.414a8.846 8.846 0 0 0 1.298-.428 5.977 5.977 0 0 0-1.928-1.013Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Browser;

packages/icon-v2/src/icons/Calendar.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Calendar = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11.5 1a.5.5 0 0 1 .5.5V2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1v-.5a.5.5 0 0 1 1 0V2h6v-.5a.5.5 0 0 1 .5-.5ZM4 3H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-1v.5a.5.5 0 1 1-1 0V3H5v.5a.5.5 0 0 1-1 0V3Zm1.4 6.6c.11 0 .2.09.2.2V11a.2.2 0 0 1-.2.2H4.2A.2.2 0 0 1 4 11V9.8c0-.11.09-.2.2-.2h1.2Zm3.2 0c.11 0 .2.09.2.2V11a.2.2 0 0 1-.2.2H7.4a.2.2 0 0 1-.2-.2V9.8c0-.11.09-.2.2-.2h1.2Zm3.2 0c.11 0 .2.09.2.2V11a.2.2 0 0 1-.2.2h-1.2a.2.2 0 0 1-.2-.2V9.8c0-.11.09-.2.2-.2h1.2Zm-6.4-4c.11 0 .2.09.2.2V7a.2.2 0 0 1-.2.2H4.2A.2.2 0 0 1 4 7V5.8c0-.11.09-.2.2-.2h1.2Zm3.2 0c.11 0 .2.09.2.2V7a.2.2 0 0 1-.2.2H7.4a.2.2 0 0 1-.2-.2V5.8c0-.11.09-.2.2-.2h1.2Zm3.2 0c.11 0 .2.09.2.2V7a.2.2 0 0 1-.2.2h-1.2a.2.2 0 0 1-.2-.2V5.8c0-.11.09-.2.2-.2h1.2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Calendar;

packages/icon-v2/src/icons/Camera.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Camera = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.382 1a1.5 1.5 0 0 1 1.342.83L12.309 3H13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h.69l.586-1.17a1.5 1.5 0 0 1 1.201-.823L5.618 1ZM13 4H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1ZM8 6a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm0 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm2.382-5H5.618a.5.5 0 0 0-.447.276L4.808 3h6.383l-.362-.724a.5.5 0 0 0-.354-.267L10.382 2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Camera;

packages/icon-v2/src/icons/Camera2.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Camera2 = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1a6 6 0 0 1 3.2 11.076l1.69 2.112a.5.5 0 0 1-.39.812h-9a.5.5 0 0 1-.39-.812l1.69-2.112A6 6 0 0 1 8 1Zm0 12a5.982 5.982 0 0 1-2.296-.455L4.54 14h6.919l-1.163-1.455A5.982 5.982 0 0 1 8 13ZM8 2a5 5 0 1 0 0 10A5 5 0 0 0 8 2Zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Camera2;

packages/icon-v2/src/icons/Camerafilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Camerafilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.382 1a1.5 1.5 0 0 1 1.342.83L12.309 3H13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h.69l.586-1.17a1.5 1.5 0 0 1 1.201-.823L5.618 1h4.764ZM8 6a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm0 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5-3h-1a.5.5 0 1 0 0 1h1a.5.5 0 1 0 0-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Camerafilled;

packages/icon-v2/src/icons/Car.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Car = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.938 2a2.5 2.5 0 0 1 2.426 1.894l.588 2.351.316.316a2.5 2.5 0 0 1 .724 1.57l.008.197V10.5c0 .62-.378 1.158-.94 1.387l-.06.02v.343a1.75 1.75 0 0 1-1.606 1.744L12.25 14a1.75 1.75 0 0 1-1.75-1.75V12h-5v.25a1.75 1.75 0 0 1-1.606 1.744L3.75 14A1.75 1.75 0 0 1 2 12.25v-.337l-.052-.018a1.501 1.501 0 0 1-.941-1.25L1 10.5V8.328a2.5 2.5 0 0 1 .732-1.767l.315-.316.59-2.351A2.5 2.5 0 0 1 4.89 2.006L5.06 2h5.877Zm2.355 5H2.706l-.267.268A1.5 1.5 0 0 0 2 8.328V10.5a.5.5 0 0 0 .5.5l.09.008A.5.5 0 0 1 3 11.5v.75a.75.75 0 1 0 1.5 0v-.75A.5.5 0 0 1 5 11h6a.5.5 0 0 1 .5.5v.75a.75.75 0 1 0 1.5 0v-.75a.5.5 0 0 1 .471-.5l.088-.003A.5.5 0 0 0 14 10.5V8.328a1.5 1.5 0 0 0-.44-1.06L13.294 7ZM4.8 8a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Zm6.4 0a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Zm-.262-5H5.062a1.5 1.5 0 0 0-1.456 1.136L3.14 6h9.719l-.465-1.864A1.5 1.5 0 0 0 10.938 3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Car;

packages/icon-v2/src/icons/Carfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Carfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.938 2a2.5 2.5 0 0 1 2.426 1.894l.588 2.351.316.316a2.5 2.5 0 0 1 .724 1.57l.008.197V10.5c0 .62-.378 1.158-.94 1.387l-.06.02v.343a1.75 1.75 0 0 1-1.606 1.744L12.25 14a1.75 1.75 0 0 1-1.75-1.75V12h-5v.25a1.75 1.75 0 0 1-1.606 1.744L3.75 14A1.75 1.75 0 0 1 2 12.25v-.337l-.052-.018a1.501 1.501 0 0 1-.941-1.25L1 10.5V8.328a2.5 2.5 0 0 1 .732-1.767l.315-.316.59-2.351A2.5 2.5 0 0 1 4.89 2.006L5.06 2ZM4.5 12H3v.25c0 .38.282.693.648.743L3.75 13a.75.75 0 0 0 .75-.75V12Zm8.5 0h-1.5v.25c0 .38.282.693.648.743l.102.007a.75.75 0 0 0 .75-.75V12ZM4.8 8a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6Zm6.4 0a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6Zm-.262-5H5.062a1.5 1.5 0 0 0-1.456 1.136L3.14 6h9.719l-.465-1.864a1.5 1.5 0 0 0-1.32-1.13L10.939 3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Carfilled;

packages/icon-v2/src/icons/Carsel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Carsel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Carsel = (props: CustomSVGProps) => (
         d="M10.938 2H5.062l-.171.006a2.5 2.5 0 0 0-2.255 1.888l-.589 2.351-.315.316A2.5 2.5 0 0 0 1 8.328V10.5l.007.144c.054.57.428 1.048.941 1.251l.052.018v.337c0 .966.784 1.75 1.75 1.75l.144-.006A1.75 1.75 0 0 0 5.5 12.25V12h5v.25c0 .966.784 1.75 1.75 1.75l.144-.006A1.75 1.75 0 0 0 14 12.25v-.343l.06-.02c.562-.229.94-.767.94-1.387V8.328l-.008-.198a2.5 2.5 0 0 0-.724-1.57l-.316-.315-.588-2.351A2.5 2.5 0 0 0 10.938 2Zm0 1a1.5 1.5 0 0 1 1.456 1.136l.62 2.485a.5.5 0 0 0 .132.233l.415.414A1.5 1.5 0 0 1 14 8.328V10.5a.5.5 0 0 1-.441.497L13.47 11A.5.5 0 0 0 13 11.5v.75a.75.75 0 1 1-1.5 0v-.75a.5.5 0 0 0-.5-.5H5a.5.5 0 0 0-.5.5v.75a.75.75 0 1 1-1.5 0v-.75a.5.5 0 0 0-.41-.492L2.5 11a.5.5 0 0 1-.5-.5V8.328c0-.397.158-.779.44-1.06l.414-.414a.5.5 0 0 0 .131-.233l.621-2.485A1.5 1.5 0 0 1 5.062 3h5.876Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Carsel;

packages/icon-v2/src/icons/Circle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Circle = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="circle__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768z" />
+    </svg>
+</span>
+);
+export default Circle;

packages/icon-v2/src/icons/Close.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Close = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M2.854 2.146 8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 1 1 .708-.708Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Close;

packages/icon-v2/src/icons/Configure.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Configure = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11 7.711a1 1 0 0 1 1 0l2.531 1.462a1 1 0 0 1 .5.866v2.922a1 1 0 0 1-.5.866L12 15.29a1 1 0 0 1-1 0l-2.531-1.462a1 1 0 0 1-.5-.866V10.04a1 1 0 0 1 .5-.866Zm.5.866L8.969 10.04v2.922l2.531 1.462 2.531-1.462V10.04L11.5 8.577ZM15 7.5a.5.5 0 1 1-1 0V6H2v6a1 1 0 0 0 1 1h3.5a.5.5 0 1 1 0 1H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3.5Zm-3.5 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM13 3H3a1 1 0 0 0-1 1v1h12V4a1 1 0 0 0-1-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Configure;

packages/icon-v2/src/icons/Day.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Day = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3.757 12.243a.5.5 0 0 1 0 .707l-.707.707a.5.5 0 1 1-.707-.707l.707-.707a.5.5 0 0 1 .707 0Zm9.193 0 .707.707a.5.5 0 1 1-.707.707l-.707-.707a.5.5 0 1 1 .707-.707ZM8 3c1.38 0 2.63.56 3.536 1.464A4.984 4.984 0 0 1 13 8c0 1.38-.56 2.63-1.464 3.536A4.984 4.984 0 0 1 8 13c-1.38 0-2.63-.56-3.536-1.464A4.984 4.984 0 0 1 3 8c0-1.38.56-2.63 1.464-3.536A4.984 4.984 0 0 1 8 3Zm0 1a3.984 3.984 0 0 0-2.828 1.172A3.984 3.984 0 0 0 4 8c0 1.076.426 2.082 1.172 2.828A3.984 3.984 0 0 0 8 12a3.984 3.984 0 0 0 2.828-1.172A3.984 3.984 0 0 0 12 8a3.984 3.984 0 0 0-1.172-2.828A3.984 3.984 0 0 0 8 4Zm5.657-1.657a.5.5 0 0 1 0 .707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707a.5.5 0 0 1 .707 0Zm-10.607 0 .707.707a.5.5 0 1 1-.707.707l-.707-.707a.5.5 0 1 1 .707-.707ZM8 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 0Zm0 14a.5.5 0 0 1 .5.5v1a.5.5 0 1 1-1 0v-1A.5.5 0 0 1 8 14ZM0 8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1A.5.5 0 0 1 0 8Zm14 0a.5.5 0 0 1 .5-.5h1a.5.5 0 1 1 0 1h-1A.5.5 0 0 1 14 8Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Day;

packages/icon-v2/src/icons/Delete.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Delete = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10 1a1 1 0 0 1 1 1v1h3.5a.5.5 0 1 1 0 1h-.544l-.834 9.18a2 2 0 0 1-1.992 1.819H4.87a2 2 0 0 1-1.992-1.82L2.043 4H1.5a.5.5 0 0 1 0-1H5V2a1 1 0 0 1 1-1h4Zm2.952 3H3.047l.827 9.09a1 1 0 0 0 .996.909h6.26a1 1 0 0 0 .996-.91L12.952 4ZM6.5 6a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5Zm3 0a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5Zm.5-4H6v1h4V2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Delete;

packages/icon-v2/src/icons/Diagnose.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Diagnose = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M7.5 1a6.5 6.5 0 0 1 4.936 10.729l2.418 2.417a.5.5 0 0 1-.708.708l-2.417-2.418A6.5 6.5 0 1 1 7.5 1Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm-.536 2.814L8.59 8.88l.981-1.636a.5.5 0 0 1 .343-.235L10 7h1.5a.5.5 0 1 1 0 1h-1.218l-1.353 2.258a.5.5 0 0 1-.852.011l-.041-.082L6.409 6.12l-.982 1.637a.5.5 0 0 1-.342.235L4.998 8H3.5a.5.5 0 1 1 0-1h1.214l1.357-2.257a.5.5 0 0 1 .893.071Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Diagnose;

packages/icon-v2/src/icons/Digicam.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Digicam = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11 3a2 2 0 0 1 1.99 1.803l.79-.79A1.3 1.3 0 0 1 16 4.93v6.138a1.3 1.3 0 0 1-2.22.919l-.79-.791A2 2 0 0 1 11 13H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8Zm0 1H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm3.912.72a.3.3 0 0 0-.424 0L13 6.205v3.587l1.488 1.488a.3.3 0 0 0 .153.082l.059.006a.3.3 0 0 0 .3-.3V4.93a.3.3 0 0 0-.088-.212ZM6.5 5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Digicam;

packages/icon-v2/src/icons/Digicamdisablefilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Digicamdisablefilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="digicam-disable-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="m106.24 104.704 769.344 769.28a32 32 0 0 1-45.248 45.312l-91.968-91.968C727.424 830.4 715.904 832 704 832H192A128 128 0 0 1 64 704V320c0-45.376 23.616-85.184 59.2-107.968l-62.144-62.08a32 32 0 1 1 45.248-45.248zM704 192a128 128 0 0 1 127.36 115.392l50.56-50.56A83.2 83.2 0 0 1 1024 315.52v392.832a83.2 83.2 0 0 1-142.08 58.816l-50.56-50.624a125.75 125.75 0 0 1-10.688 40.064L256 192h448z" />
+    </svg>
+</span>
+);
+export default Digicamdisablefilled;

packages/icon-v2/src/icons/Dispatch.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Dispatch = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M7 1a2 2 0 0 1 2 0l4.562 2.634a2 2 0 0 1 1 1.732v5.268a2 2 0 0 1-1 1.732L9 15a2 2 0 0 1-2 0l-4.562-2.634a2 2 0 0 1-1-1.732V5.366a2 2 0 0 1 1-1.732Zm1.5.866a1 1 0 0 0-1 0L2.938 4.5a1 1 0 0 0-.5.866v5.268a1 1 0 0 0 .5.866L7.5 14.134a1 1 0 0 0 1 0l4.562-2.634a1 1 0 0 0 .5-.866V5.366a1 1 0 0 0-.5-.866ZM8 5a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5A.5.5 0 0 1 8 5ZM5.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v3a.5.5 0 1 1-1 0v-3a.5.5 0 0 1 .5-.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Dispatch;

packages/icon-v2/src/icons/Dispatchsel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Dispatchsel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Dispatchsel = (props: CustomSVGProps) => (
         d="M7 1a2 2 0 0 1 2 0l4.562 2.634a2 2 0 0 1 1 1.732v5.268a2 2 0 0 1-1 1.732L9 15a2 2 0 0 1-2 0l-4.562-2.634a2 2 0 0 1-1-1.732V5.366a2 2 0 0 1 1-1.732L7 1Zm1.5.866a1 1 0 0 0-1 0L2.938 4.5a1 1 0 0 0-.5.866v5.268a1 1 0 0 0 .5.866L7.5 14.134a1 1 0 0 0 1 0l4.562-2.634a1 1 0 0 0 .5-.866V5.366a1 1 0 0 0-.5-.866L8.5 1.866ZM8 5a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5A.5.5 0 0 1 8 5Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Dispatchsel;

packages/icon-v2/src/icons/Distance.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Distance = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="distance__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M928 64a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32H813.184L256 813.184V928a32 32 0 0 1-26.24 31.488L224 960H96a32 32 0 0 1-32-32V800a32 32 0 0 1 32-32h114.688L768 210.688V96a32 32 0 0 1 26.24-31.488L800 64h128zM192 832h-64v64h64v-64zm704-704h-64v64h64v-64z" />
+    </svg>
+</span>
+);
+export default Distance;

packages/icon-v2/src/icons/Document.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Document = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M12 1a2 2 0 0 1 2 2v7a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1V3a2 2 0 0 1 2-2h8ZM5.086 11H2v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2h-3.087l-.018.052A1.5 1.5 0 0 1 9.5 12h-3a1.5 1.5 0 0 1-1.395-.948L5.086 11ZM12 2H4a1 1 0 0 0-1 1v7h2.5a.5.5 0 0 1 .492.41l.016.18A.5.5 0 0 0 6.5 11h3a.5.5 0 0 0 .492-.41l.016-.18A.5.5 0 0 1 10.5 10H13V3a1 1 0 0 0-1-1Zm-1.5 5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1h5Zm0-3a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1h5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Document;

packages/icon-v2/src/icons/Download.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Download = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M14.5 10a.5.5 0 0 1 .5.5V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2.5a.5.5 0 1 1 1 0V13h12v-2.5a.5.5 0 0 1 .5-.5Zm-6.854 1.854a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0 0-.708l-.07-.057a.5.5 0 0 0-.638.057L8.5 10.294V1.5a.5.5 0 0 0-1 0v8.794L4.854 7.646a.5.5 0 0 0-.638-.057l-.07.057a.5.5 0 0 0 0 .708l3.5 3.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Download;

packages/icon-v2/src/icons/Edit.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Edit = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13.5 13a.5.5 0 1 1 0 1h-4a.5.5 0 1 1 0-1h4ZM10.387 1.778a1 1 0 0 1 1.414 0l2.122 2.121a1 1 0 0 1 0 1.414l-7.21 7.211a1.5 1.5 0 0 1-.767.41l-2.503.5a1 1 0 0 1-1.177-1.176l.5-2.503a1.5 1.5 0 0 1 .41-.767l7.211-7.21Zm-.666 2.079L3.884 9.696a.5.5 0 0 0-.137.255l-.5 2.503 2.503-.5a.5.5 0 0 0 .255-.137l5.837-5.838-2.12-2.122Zm1.373-1.372-.666.665 2.121 2.122.667-.666-2.122-2.121Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Edit;

packages/icon-v2/src/icons/Errorfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Errorfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="evenodd"
       d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm2.575 4.098a.387.387 0 0 0-.547.032L8 7.416 5.956 5.113a.387.387 0 0 0-.548 0l-.31.312a.387.387 0 0 0 .032.547l2.286 2.027-2.294 2.037-.053.062a.387.387 0 0 0 .044.494l.304.303.064.049a.387.387 0 0 0 .491-.074L8 8.582l2.036 2.296.062.053c.15.105.36.09.494-.044l.31-.312a.387.387 0 0 0-.032-.547L8.582 8l2.305-2.044a.387.387 0 0 0 0-.548l-.312-.31Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Errorfilled;

packages/icon-v2/src/icons/Exchange.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Exchange = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M10.146 3.146a.5.5 0 0 1 .708 0l3 3A.5.5 0 0 1 13.5 7h-12a.5.5 0 0 1 0-1h10.793l-2.147-2.146a.5.5 0 0 1-.057-.638l.057-.07Zm-5.291 9.708a.5.5 0 0 1-.708 0l-3-3A.5.5 0 0 1 1.501 9h12a.5.5 0 1 1 0 1H2.708l2.147 2.146a.5.5 0 0 1 .057.638l-.057.07Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Exchange;

packages/icon-v2/src/icons/Export.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Export = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M7 1.5a.5.5 0 0 1 0 1H3.5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9a.5.5 0 1 1 1 0v3.5a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2H7Zm7.3 0c.11 0 .2.09.2.2v3.317a.2.2 0 0 1-.341.142l-1.306-1.306-2.5 2.5a.5.5 0 0 1-.707-.707l2.5-2.5-1.305-1.305a.2.2 0 0 1 .142-.341H14.3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Export;

packages/icon-v2/src/icons/Failurefilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Failurefilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="evenodd"
       d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm0 9.5a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8ZM8 4l-.067.002a.93.93 0 0 0-.86.995l.283 3.905a.645.645 0 0 0 1.288 0l.283-3.905.003-.067A.93.93 0 0 0 8 4Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Failurefilled;

packages/icon-v2/src/icons/Fightfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Fightfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="fight-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M640 640a128 128 0 0 1 128 128v96a32 32 0 0 1-32 32H288a32 32 0 0 1-32-32v-96a128 128 0 0 1 128-128h256zM512 320a160 160 0 1 1 0 320 160 160 0 0 1 0-320zm301.12-190.144 1.152 2.112 156.224 321.28a66.368 66.368 0 0 1-114.624 66.176L657.92 226.944a91.584 91.584 0 0 1 24.576-127.168L688 96.32a91.584 91.584 0 0 1 125.12 33.536zM720 151.744l-5.504 4.16a27.584 27.584 0 0 0-3.52 35.2l197.888 292.48a2.368 2.368 0 0 0 4.096-2.368l-155.264-319.36A27.584 27.584 0 0 0 720 151.744zm-601.344 49.6 128 128a32 32 0 1 1-45.312 45.312l-128-128a32 32 0 1 1 45.312-45.312zm199.68-115.456 64 192a32 32 0 1 1-60.672 20.224l-64-192a32 32 0 1 1 60.672-20.224z" />
+    </svg>
+</span>
+);
+export default Fightfilled;

packages/icon-v2/src/icons/Files.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Files = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M6 1a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 6 15H3.5A1.5 1.5 0 0 1 2 13.5v-11A1.5 1.5 0 0 1 3.5 1H6Zm.5 11H3v1.5a.5.5 0 0 0 .41.492L3.5 14H6a.5.5 0 0 0 .5-.5V12ZM6 2H3.5a.5.5 0 0 0-.5.5V11h3.5V2.5a.5.5 0 0 0-.41-.492L6 2ZM5 5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 5 5Zm7.5-4A1.5 1.5 0 0 1 14 2.5v11a1.5 1.5 0 0 1-1.5 1.5H10a1.5 1.5 0 0 1-1.5-1.5v-11A1.5 1.5 0 0 1 10 1h2.5Zm.5 11H9.5v1.5a.5.5 0 0 0 .41.492L10 14h2.5a.5.5 0 0 0 .5-.5V12Zm-.5-10H10a.5.5 0 0 0-.5.5V11H13V2.5a.5.5 0 0 0-.41-.492L12.5 2ZM11 5a.5.5 0 0 1 .5.5v2a.5.5 0 1 1-1 0v-2A.5.5 0 0 1 11 5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Files;

packages/icon-v2/src/icons/Filessel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Filessel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Filessel = (props: CustomSVGProps) => (
         d="M6 1a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 6 15H3.5A1.5 1.5 0 0 1 2 13.5v-11A1.5 1.5 0 0 1 3.5 1H6Zm.5 11H3v1.5a.5.5 0 0 0 .41.492L3.5 14H6a.5.5 0 0 0 .5-.5V12ZM6 2H3.5a.5.5 0 0 0-.5.5V11h3.5V2.5a.5.5 0 0 0-.41-.492L6 2Zm8 11.5a1.5 1.5 0 0 1-1.5 1.5H10a1.5 1.5 0 0 1-1.5-1.5v-11A1.5 1.5 0 0 1 10 1h2.5A1.5 1.5 0 0 1 14 2.5v11ZM13 12H9.5v1.5a.5.5 0 0 0 .41.492L10 14h2.5a.5.5 0 0 0 .5-.5V12Zm-.5-10H10a.5.5 0 0 0-.5.5V11H13V2.5a.5.5 0 0 0-.41-.492L12.5 2Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Filessel;

packages/icon-v2/src/icons/Filter.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Filter = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M12 1H4a2 2 0 0 0-2 2v1.965c0 .501.25.97.668 1.248l2.11 1.406A.5.5 0 0 1 5 8.035v4.221a1.5 1.5 0 0 0 1.069 1.437l4.287 1.286A.5.5 0 0 0 11 14.5V8.035a.5.5 0 0 1 .223-.416l2.11-1.406A1.5 1.5 0 0 0 14 4.965V3a2 2 0 0 0-2-2Zm0 1a1 1 0 0 1 1 1v1.965a.5.5 0 0 1-.223.416l-2.11 1.406-.12.09A1.5 1.5 0 0 0 10 8.034v5.793l-3.644-1.093A.5.5 0 0 1 6 12.256v-4.22a1.5 1.5 0 0 0-.668-1.249l-2.11-1.406A.5.5 0 0 1 3 4.965V3a1 1 0 0 1 1-1h8Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Filter;

packages/icon-v2/src/icons/Firefilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Firefilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="fire-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M347.008 960c-59.712-124.288-27.904-195.456 17.984-262.528C415.232 624 428.16 551.296 428.16 551.296s39.552 51.328 23.744 131.648c69.76-77.696 82.944-201.472 72.448-248.896C682.112 544.32 749.568 783.04 658.624 960c483.392-273.472 120.32-682.624 57.024-728.768 21.12 46.08 25.088 124.16-17.472 162.048C626.112 120 447.936 64 447.936 64c21.12 140.928-76.352 295.04-170.304 410.176-3.328-56.256-6.848-94.976-36.416-148.736-6.592 102.016-84.608 185.216-105.728 287.552C106.88 751.488 156.864 852.864 347.008 960z" />
+    </svg>
+</span>
+);
+export default Firefilled;

packages/icon-v2/src/icons/Folder.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Folder = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M5.879 2a2 2 0 0 1 1.414.586l1.121 1.121A1 1 0 0 0 9.121 4H13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h2.879Zm0 1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H9.121a2 2 0 0 1-1.414-.586L6.586 3.293A1 1 0 0 0 5.879 3ZM7.5 7a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Folder;

packages/icon-v2/src/icons/Folderfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Folderfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M5.879 2a2 2 0 0 1 1.414.586l1.121 1.121A1 1 0 0 0 9.121 4H13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h2.879ZM7.5 7h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Folderfilled;

packages/icon-v2/src/icons/Frame.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Frame = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3.5 1a.5.5 0 0 1 .5.5V2h8v-.5a.5.5 0 0 1 .41-.492L12.5 1h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H14v8h.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5V14H4v.5a.5.5 0 0 1-.41.492L3.5 15h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5H2V4h-.5a.5.5 0 0 1-.492-.41L1 3.5v-2a.5.5 0 0 1 .5-.5h2ZM3 13H2v1h1v-1Zm11 0h-1v1h1v-1ZM12 3H4v.5a.5.5 0 0 1-.41.492L3.5 4H3v8h.5a.5.5 0 0 1 .5.5v.5h8v-.5a.5.5 0 0 1 .41-.492L12.5 12h.5V4h-.5a.5.5 0 0 1-.492-.41L12 3.5V3ZM3 2H2v1h1V2Zm11 0h-1v1h1V2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Frame;

packages/icon-v2/src/icons/Fullscreen.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Fullscreen = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10Zm0 1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1ZM3.5 9a.5.5 0 0 1 .5.5v1.792l2.146-2.146a.5.5 0 1 1 .708.708L4.706 12H6.5a.5.5 0 0 1 .492.41L7 12.5a.5.5 0 0 1-.5.5h-3l-.053-.003-.075-.014-.063-.02-.076-.04-.055-.04-.032-.03-.037-.041-.042-.062-.03-.06-.02-.062-.012-.054-.003-.031L3 9.5a.5.5 0 0 1 .5-.5Zm6-6h3.012c.02 0 .041.002.062.005L12.5 3l.053.003.075.014.063.02.076.04.055.04.032.03.037.041.042.062.03.06.02.062.012.056L13 3.5v3a.5.5 0 1 1-1 0V4.706L9.854 6.854a.5.5 0 1 1-.708-.708L11.292 4H9.5a.5.5 0 0 1-.492-.41L9 3.5a.5.5 0 0 1 .5-.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Fullscreen;

packages/icon-v2/src/icons/Fullscreenexit.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Fullscreenexit = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10Zm0 1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-.5 7a.5.5 0 0 1 .5.5l-.008.09a.5.5 0 0 1-.492.41h-1.793l2.147 2.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L10 10.707V12.5a.5.5 0 0 1-.41.492L9.5 13a.5.5 0 0 1-.5-.5l.002-3.042.015-.086.02-.063.04-.076.04-.055.06-.06.038-.03.074-.041.083-.03.023-.006A.498.498 0 0 1 9.5 9l-.074.005.032-.003L12.5 9Zm-6-6a.5.5 0 0 1 .5.5v3.02l-.008.069-.03.102-.04.076-.04.055-.06.06-.037.03-.074.041-.083.03-.082.015L6.5 7h-3a.5.5 0 0 1-.5-.5l.008-.09A.5.5 0 0 1 3.5 6h1.793L3.146 3.854a.5.5 0 0 1-.057-.638l.057-.07a.5.5 0 0 1 .708 0L6 5.293V3.5a.5.5 0 0 1 .41-.492L6.5 3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Fullscreenexit;

packages/icon-v2/src/icons/Gatherfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Gatherfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="gather-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M899.392 764.224C957.504 789.504 992 821.952 992 863.808c0 99.072-213.248 160-480 160s-480-60.928-480-160c0-41.856 34.496-74.24 92.608-99.584a32 32 0 0 1 25.536 58.752C113.024 839.04 96 855.104 96 863.808c0 42.304 187.904 96 416 96s416-53.696 416-96c0-8.704-17.024-24.768-54.144-40.832a32 32 0 0 1 25.536-58.752zM556.672 320a64 64 0 0 1 62.464 50.112l45.952 206.656A25.664 25.664 0 0 1 640 608h-20.544a12.8 12.8 0 0 0-12.736 11.392L579.2 867.52A32 32 0 0 1 547.328 896h-70.656a32 32 0 0 1-31.808-28.48L417.28 619.392A12.8 12.8 0 0 0 404.48 608H384a25.664 25.664 0 0 1-25.088-31.232l45.952-206.656A64 64 0 0 1 467.328 320h89.344zm-220.928 64a64 64 0 0 1 13.312 1.408l-40.064 180.224a76.864 76.864 0 0 0-1.92 16.64l.448 7.936c3.392 33.6 28.48 60.8 60.992 67.456l1.472.192 3.008 27.008-17.088 119.68A32 32 0 0 1 324.224 832h-72.448a32 32 0 0 1-31.68-27.52L193.6 619.008A12.8 12.8 0 0 0 180.928 608H160a24.128 24.128 0 0 1-23.232-30.72l41.984-146.88a64 64 0 0 1 61.504-46.4h95.488zm448 0a64 64 0 0 1 61.504 46.4l41.984 146.816A24.128 24.128 0 0 1 864 608h-20.928a12.8 12.8 0 0 0-12.672 11.008l-26.496 185.536A32 32 0 0 1 772.224 832h-72.448a32 32 0 0 1-31.68-27.52l-17.152-119.808 3.008-26.88 2.752-.448a76.864 76.864 0 0 0 58.304-91.712l-40-180.224A64 64 0 0 1 688.256 384h95.488zM288 166.4a76.8 76.8 0 1 1 0 153.6 76.8 76.8 0 0 1 0-153.6zm448-12.8a76.8 76.8 0 1 1 0 153.6 76.8 76.8 0 0 1 0-153.6zM512 64a96 96 0 1 1 0 192 96 96 0 0 1 0-192z" />
+    </svg>
+</span>
+);
+export default Gatherfilled;

packages/icon-v2/src/icons/Grid.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Grid = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="grid__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M864 64a32 32 0 0 1 32 32v32h32a32 32 0 1 1 0 64h-32v640h32a32 32 0 1 1 0 64h-32v32a32 32 0 1 1-64 0v-32H192v32a32 32 0 1 1-64 0v-32H96a32 32 0 1 1 0-64h32V192H96a32 32 0 0 1 0-64h32V96a32 32 0 0 1 64 0v32h640V96a32 32 0 0 1 32-32zm-32 128H192v640h640V192z" />
+    </svg>
+</span>
+);
+export default Grid;

packages/icon-v2/src/icons/Guide.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Guide = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13.5 5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H4a2 2 0 0 1-2-2V3.5l.005-.164A2.5 2.5 0 0 1 4.5 1h9a.5.5 0 1 1 0 1h-9a1.5 1.5 0 0 0 0 3h9ZM11 9.5a.5.5 0 0 1-.777.416L9 9.101l-1.223.815a.5.5 0 0 1-.77-.333L7 9.5V6H4.5c-.483 0-.934-.137-1.317-.375l-.16-.107L3 5.499V13a1 1 0 0 0 .883.993L4 14h9V6h-2v3.5Zm-3-.936.723-.48a.5.5 0 0 1 .467-.047l.087.047.723.481V6H8v2.564ZM13.5 3a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1h8Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Guide;

packages/icon-v2/src/icons/Helmetfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Helmetfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="helmet-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M575.36 128c35.776 0 64.64 28.416 64.64 64l.064 18.56A448.192 448.192 0 0 1 960 639.616l.064 69.888c34.624 12.288 60.16 43.648 63.552 81.728L1024 800c0 52.992-42.688 96-96.32 96H96.32A95.936 95.936 0 0 1 64 709.504v-69.888c0-202.688 135.168-373.952 320-429.056V192a64 64 0 0 1 64.64-64h126.72zm352.32 640H96.32a31.936 31.936 0 1 0 0 64h831.36c18.112 0 32.32-14.208 32.384-29.12l-.192-5.952A32 32 0 0 0 927.68 768zM352 320l-5.632.512A32.192 32.192 0 0 0 320 351.68v128.64c0 17.92 14.336 31.68 32 31.68l5.632-.512A32.192 32.192 0 0 0 384 480.32V351.68A31.616 31.616 0 0 0 352 320zm320 0-5.632.512A32.192 32.192 0 0 0 640 351.68v128.64c0 17.92 14.336 31.68 32 31.68l5.632-.512A32.192 32.192 0 0 0 704 480.32V351.68A31.616 31.616 0 0 0 672 320z" />
+    </svg>
+</span>
+);
+export default Helmetfilled;

packages/icon-v2/src/icons/Help.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Help = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1c1.933 0 3.683.784 4.95 2.05A6.978 6.978 0 0 1 15 8a6.978 6.978 0 0 1-2.05 4.95A6.978 6.978 0 0 1 8 15a6.978 6.978 0 0 1-4.95-2.05A6.978 6.978 0 0 1 1 8c0-1.933.784-3.683 2.05-4.95A6.978 6.978 0 0 1 8 1Zm0 1a5.977 5.977 0 0 0-4.243 1.757A5.977 5.977 0 0 0 2 8c0 1.614.639 3.124 1.757 4.243A5.977 5.977 0 0 0 8 14a5.977 5.977 0 0 0 4.243-1.757A5.977 5.977 0 0 0 14 8a5.977 5.977 0 0 0-1.757-4.243A5.977 5.977 0 0 0 8 2Zm0 9a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm.5-7.5a2 2 0 0 1 2 2v.382a2.31 2.31 0 0 1-1.124 1.982l-.152.083A1.309 1.309 0 0 0 8.5 9.118V9.5a.5.5 0 0 1-1 0v-.382c0-.816.43-1.567 1.124-1.982l.152-.083c.444-.222.724-.675.724-1.171V5.5a1 1 0 0 0-1-1H8A1.5 1.5 0 0 0 6.5 6a.5.5 0 0 1-1 0A2.5 2.5 0 0 1 8 3.5h.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Help;

packages/icon-v2/src/icons/Hide.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Hide = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="m2.96 3.117 3.563 2.991a2.4 2.4 0 0 1 3.596 3.019l3.565 2.99a.5.5 0 0 1-.643.766l-1.179-1.41C10.641 12.157 9.352 12.5 8 12.5c-2.745 0-5.216-1.412-7.394-4.192a.5.5 0 0 1 0-.616C1.528 6.515 2.502 5.584 3.528 4.9L2.316 3.884a.5.5 0 1 1 .643-.767Zm1.37 2.456.295-.173c-.93.521-1.827 1.272-2.688 2.253l-.296.346.2.239c1.805 2.099 3.764 3.174 5.892 3.257L8 11.5c.938 0 1.84-.19 2.712-.57L9.477 9.892A2.4 2.4 0 0 1 5.88 6.874l-1.55-1.3ZM8 3.5c2.745 0 5.216 1.412 7.394 4.192a.5.5 0 0 1 0 .616c-.75.958-1.535 1.753-2.354 2.384a.5.5 0 1 1-.61-.792 11.66 11.66 0 0 0 1.646-1.567l.282-.334-.2-.237c-1.804-2.099-3.763-3.174-5.891-3.257L8 4.5c-.74 0-1.457.118-2.153.354a.5.5 0 1 1-.321-.948C6.326 3.636 7.15 3.5 8 3.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Hide;

packages/icon-v2/src/icons/History.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const History = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11.5 7c1.243 0 2.368.504 3.182 1.318A4.486 4.486 0 0 1 16 11.5a4.486 4.486 0 0 1-1.318 3.182A4.486 4.486 0 0 1 11.5 16a4.486 4.486 0 0 1-3.182-1.318A4.486 4.486 0 0 1 7 11.5c0-1.243.504-2.368 1.318-3.182A4.486 4.486 0 0 1 11.5 7Zm.5-6a2 2 0 0 1 2 2v2.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h8Zm-.5 7c-.942 0-1.822.372-2.475 1.025A3.485 3.485 0 0 0 8 11.5c0 .942.372 1.822 1.025 2.475A3.485 3.485 0 0 0 11.5 15c.942 0 1.822-.372 2.475-1.025A3.485 3.485 0 0 0 15 11.5c0-.942-.372-1.822-1.025-2.475A3.485 3.485 0 0 0 11.5 8Zm0 1a.5.5 0 0 1 .5.5V11h1.5a.5.5 0 1 1 0 1h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5Zm-4-3a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Zm3-2a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1h5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default History;

packages/icon-v2/src/icons/Homepage.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Homepage = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3 15a2 2 0 0 1-2-2V6.564a2 2 0 0 1 .81-1.608l4.703-3.478a2.5 2.5 0 0 1 2.974 0l4.702 3.478A2 2 0 0 1 15 6.564V13a2 2 0 0 1-2 2ZM8.892 2.282a1.5 1.5 0 0 0-1.784 0L2.405 5.76A1 1 0 0 0 2 6.564V13a1 1 0 0 0 1 1h2v-4a2 2 0 0 1 1.85-1.995L7 8h2a2 2 0 0 1 2 2v4h2a1 1 0 0 0 .993-.883L14 13V6.564a1 1 0 0 0-.405-.804ZM9 9H7a1 1 0 0 0-1 1v4h4v-4a1 1 0 0 0-.883-.993L9 9Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Homepage;

packages/icon-v2/src/icons/Humanfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Humanfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM6 5.5h4a2 2 0 0 1 2 2v2.25a.75.75 0 1 1-1.5 0v-1.5a.25.25 0 1 0-.5 0v5.85a.9.9 0 1 1-1.8 0v-2.9a.2.2 0 0 0-.4 0v2.9a.9.9 0 1 1-1.8 0V8.25a.25.25 0 1 0-.5 0v1.5a.75.75 0 1 1-1.5 0V7.5a2 2 0 0 1 2-2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Humanfilled;

packages/icon-v2/src/icons/Identify.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Identify = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M1.5 11a.5.5 0 0 1 .5.5V13a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H3a2 2 0 0 1-2-2v-1.5a.5.5 0 0 1 .5-.5Zm13 0a.5.5 0 0 1 .5.5V13a2 2 0 0 1-2 2h-1.5a.5.5 0 1 1 0-1H13a1 1 0 0 0 1-1v-1.5a.5.5 0 0 1 .5-.5ZM8 3a2.5 2.5 0 0 1 1.966 4.044A2.499 2.499 0 0 1 12 9.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-2a2.5 2.5 0 0 1 2.035-2.457A2.5 2.5 0 0 1 8 3Zm1.5 5h-3A1.5 1.5 0 0 0 5 9.5V11h6V9.5a1.5 1.5 0 0 0-1.356-1.493L9.5 8ZM8 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5-3a2 2 0 0 1 2 2v1.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1h-1.5a.5.5 0 1 1 0-1H13ZM4.5 1a.5.5 0 0 1 0 1H3a1 1 0 0 0-1 1v1.5a.5.5 0 0 1-1 0V3a2 2 0 0 1 2-2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Identify;

packages/icon-v2/src/icons/Identifyfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Identifyfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M1.5 11a.5.5 0 0 1 .5.5V13a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H3a2 2 0 0 1-2-2v-1.5a.5.5 0 0 1 .5-.5Zm13 0a.5.5 0 0 1 .5.5V13a2 2 0 0 1-2 2h-1.5a.5.5 0 1 1 0-1H13a1 1 0 0 0 1-1v-1.5a.5.5 0 0 1 .5-.5ZM10 8a2 2 0 0 1 2 2v1.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5V10a2 2 0 0 1 2-2h4ZM8 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm5-2a2 2 0 0 1 2 2v1.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1h-1.5a.5.5 0 1 1 0-1H13ZM4.5 1a.5.5 0 0 1 0 1H3a1 1 0 0 0-1 1v1.5a.5.5 0 0 1-1 0V3a2 2 0 0 1 2-2h1.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Identifyfilled;

packages/icon-v2/src/icons/Identifysel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Identifysel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Identifysel = (props: CustomSVGProps) => (
         d="M13 1a2 2 0 0 1 2 2v1.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1h-1.5a.5.5 0 1 1 0-1H13ZM3 1a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V3a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H3Zm0 14a2 2 0 0 1-2-2v-1.5a.5.5 0 1 1 1 0V13a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H3Zm10 0a2 2 0 0 0 2-2v-1.5a.5.5 0 1 0-1 0V13a1 1 0 0 1-1 1h-1.5a.5.5 0 1 0 0 1H13Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Identifysel;

packages/icon-v2/src/icons/Import.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Import = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M7 1.5a.5.5 0 0 1 0 1H3.5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9a.5.5 0 1 1 1 0v3.5a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2H7Zm2.7 5a.2.2 0 0 1-.2-.2V2.983a.2.2 0 0 1 .341-.142l1.306 1.306 2.5-2.5a.5.5 0 0 1 .707.707l-2.5 2.5 1.305 1.305a.2.2 0 0 1-.142.341H9.7Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Import;

packages/icon-v2/src/icons/Infomationfilled.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Infomationfilled = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="evenodd"
       d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm.592 6H7.408l-.06.01a.2.2 0 0 0-.14.198l.184 4.6a.2.2 0 0 0 .2.192h.816a.2.2 0 0 0 .2-.192l.184-4.6-.007-.061A.2.2 0 0 0 8.592 7ZM8 4a1.1 1.1 0 1 0 0 2.2A1.1 1.1 0 0 0 8 4Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Infomationfilled;

packages/icon-v2/src/icons/Intrusionfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Intrusionfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="intrusion-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M275.136 267.712c27.648-14.528 61.12-12.8 87.168 4.48 25.6 17.088 38.72 47.808 33.28 78.08l-36.16 200.256c-4.352 23.872 4.48 48.128 23.04 63.808l53.76 45.184c28.288 23.68 45.568 57.92 48 94.72L494.016 904a52.48 52.48 0 0 1-52.416 56 59.072 59.072 0 0 1-58.944-56l-6.464-126.784a67.648 67.648 0 0 0-23.808-48.128l-94.656-80.256a135.232 135.232 0 0 1-45.632-126.912l23.296-130.688-10.368 4.544a67.648 67.648 0 0 0-36.352 39.168l-44.16 123.648a38.4 38.4 0 0 1-52.544 21.76 48.896 48.896 0 0 1-25.792-58.56l36.416-118.336a135.232 135.232 0 0 1 66.304-79.872l106.24-55.872zM211.328 645.12l90.368 78.08-76.352 193.92a58.24 58.24 0 0 1-71.552 34.304 51.008 51.008 0 0 1-32.576-66.688l90.112-239.616zm205.12-259.072 140.8 104.896a45.952 45.952 0 0 1 9.152 64.576 44.48 44.48 0 0 1-62.272 8.64l-104.96-79.424 17.28-98.688zM365.44 64c48.64 0 88.128 38.848 88.128 86.784 0 48-39.424 86.848-88.128 86.848a87.488 87.488 0 0 1-88.064-86.784c0-45.184 34.88-82.24 79.616-86.4l8.384-.448zm518.08 8.32A64 64 0 0 1 960 135.04v753.92a64 64 0 0 1-76.544 62.72l-230.272-46.016A96 96 0 0 1 576 811.584V736a32 32 0 1 1 64 0v75.52a32 32 0 0 0 25.728 31.36L896 888.96V135.04l-230.272 46.08A32 32 0 0 0 640 212.48V288a32 32 0 0 1-64 0v-75.52a96 96 0 0 1 77.184-94.144l230.272-46.08z" />
+    </svg>
+</span>
+);
+export default Intrusionfilled;

packages/icon-v2/src/icons/Keeping.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Keeping = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M14 7a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5Zm-2-6a2 2 0 0 1 2 2v2.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h8Zm2 7v2a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V8a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1Zm-1.5 5a.5.5 0 1 1 0 1h-2a.5.5 0 1 1 0-1h2Zm.5-5h-3v2h3V8ZM7.5 6a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Zm3-2a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1h5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Keeping;

packages/icon-v2/src/icons/Ladderfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Ladderfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="ladder-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M224 64a32 32 0 0 1 32 32v832a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm576 0a32 32 0 0 1 32 32v832a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm32 64v192H192V128h640zm0 288v192H192V416h640zm0 288v192H192V704h640z" />
+    </svg>
+</span>
+);
+export default Ladderfilled;

packages/icon-v2/src/icons/Leavefilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Leavefilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="leave-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M800 512a224 224 0 1 1 0 448 224 224 0 0 1 0-448zM448 64a224 224 0 0 1 12.288 447.68l-10.112.256h168.96A287.424 287.424 0 0 0 512 736c0 59.2 17.856 114.24 48.448 160H96a32 32 0 0 1-32-32V704a192 192 0 0 1 192-192h189.824A224 224 0 0 1 448 64zm393.344 585.344-3.648 4.48a32 32 0 0 0 3.648 40.832l9.408 9.344H672a32 32 0 0 0-32 32l.512 5.76A32 32 0 0 0 672 768h178.688l-9.344 9.344a32 32 0 0 0 45.312 45.312l65.792-66.048 3.264-4.608 1.92-3.776 1.28-4.032.96-5.248L960 736l-.32-3.712-.768-4.48-1.92-5.312-1.92-3.584-2.56-3.52-65.92-66.048a32 32 0 0 0-45.248 0z" />
+    </svg>
+</span>
+);
+export default Leavefilled;

packages/icon-v2/src/icons/List.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const List = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M4.5 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 0 1 0-1Zm0 9h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1Zm0-4.5h10a.5.5 0 1 1 0 1h-10a.5.5 0 0 1 0-1ZM1.7 2.8a.7.7 0 1 1 0 1.4.7.7 0 0 1 0-1.4Zm0 9a.7.7 0 1 1 0 1.4.7.7 0 0 1 0-1.4Zm0-4.5a.7.7 0 1 1 0 1.4.7.7 0 0 1 0-1.4Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default List;

packages/icon-v2/src/icons/Location.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Location = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13.424 11.705c1.3.424 2.076 1.003 2.076 1.792 0 1.548-3.332 2.5-7.5 2.5s-7.5-.952-7.5-2.5c0-.79.776-1.368 2.077-1.792a.5.5 0 1 1 .31.95c-.919.3-1.387.649-1.387.842 0 .661 2.936 1.5 6.5 1.5s6.5-.839 6.5-1.5c0-.193-.468-.542-1.386-.841a.5.5 0 0 1 .31-.951ZM8 .5A5.5 5.5 0 0 1 13.5 6c0 1.863-1.473 4.355-4.388 7.542l-.048.052-.051.049a1.5 1.5 0 0 1-2.122-.096l-.558-.623C3.785 10.028 2.5 7.741 2.5 6A5.5 5.5 0 0 1 8 .5Zm0 1A4.5 4.5 0 0 0 3.5 6c0 1.483 1.277 3.696 3.854 6.568l.277.306a.5.5 0 0 0 .737 0l.272-.3C11.22 9.7 12.5 7.486 12.5 6A4.5 4.5 0 0 0 8 1.5Zm0 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm0 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Location;

packages/icon-v2/src/icons/Mail.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Mail = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm.966 1.741L9.414 8.293a2 2 0 0 1-2.828 0L2.034 3.74C2.012 3.824 2 3.911 2 4v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4c0-.09-.012-.176-.034-.259ZM13 3H3c-.09 0-.176.012-.259.034l4.552 4.552a1 1 0 0 0 1.414 0l4.552-4.552A1.001 1.001 0 0 0 13 3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Mail;

packages/icon-v2/src/icons/Manage.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Manage = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M11 7.711a1 1 0 0 1 1 0l2.531 1.462a1 1 0 0 1 .5.866v2.922a1 1 0 0 1-.5.866L12 15.29a1 1 0 0 1-1 0l-2.531-1.462a1 1 0 0 1-.5-.866V10.04a1 1 0 0 1 .5-.866L11 7.71ZM12 1a2 2 0 0 1 2 2v2.5a.5.5 0 1 1-1 0V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1.5a.5.5 0 1 1 0 1H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h8Zm-.5 7.577L8.969 10.04v2.922l2.531 1.462 2.531-1.462V10.04L11.5 8.577Zm0 1.923a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7.5 7a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Zm3-3a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1h5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Manage;

packages/icon-v2/src/icons/Map.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const  Map = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3.498 9a.5.5 0 1 1 0 1H2.91l-.8 3.999h11.779l-.8-3.999h-.59a.5.5 0 0 1-.492-.41l-.008-.09a.5.5 0 0 1 .5-.5H13.5a.5.5 0 0 1 .49.403l1 4.999a.5.5 0 0 1-.49.598h-13a.5.5 0 0 1-.49-.598l1-5a.5.5 0 0 1 .49-.401h.998ZM8 1a4.5 4.5 0 0 1 4.5 4.5c0 1.653-1.396 3.747-4.156 6.363a.5.5 0 0 1-.688 0C4.896 9.247 3.5 7.153 3.5 5.5A4.5 4.5 0 0 1 8 1Zm0 1a3.5 3.5 0 0 0-3.5 3.5c0 1.2 1.096 2.93 3.312 5.123l.188.182.188-.182c2.131-2.11 3.226-3.79 3.307-4.982L11.5 5.5A3.5 3.5 0 0 0 8 2Zm0 1.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm0 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Map;

packages/icon-v2/src/icons/Maskfilled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+
+const Maskfilled = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="mask-filled__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"  fillRule="nonzero" d="M512 192c95.68 0 191.36 11.904 287.04 35.776 20.48 5.12 38.656 14.976 53.632 28.16l66.432.064c25.792 0 49.088 15.424 59.008 39.232C1008.704 367.552 1024 439.744 1024 512s-15.296 144.512-45.888 216.768A63.808 63.808 0 0 1 919.104 768h-66.368c-14.976 13.248-33.28 23.104-53.696 28.224C703.36 820.096 607.68 832 512 832s-191.36-11.904-287.04-35.776A127.744 127.744 0 0 1 171.2 768h-66.24a63.808 63.808 0 0 1-59.008-39.232C15.296 656.448 0 584.256 0 512s15.296-144.512 45.888-216.768A63.808 63.808 0 0 1 104.896 256h66.432c14.976-13.248 33.216-23.104 53.632-28.224A1183.296 1183.296 0 0 1 512 192zM132.032 320h-27.2C77.44 384.704 64 448.512 64 512c0 56.448 10.688 113.088 32.32 170.56l8.64 21.44h27.136A128 128 0 0 1 128 672.32V351.744A128 128 0 0 1 132.032 320zm787.008-.128h-27.136A128 128 0 0 1 896 351.744v320.512a128 128 0 0 1-4.032 31.808l27.2-.064C946.56 639.296 960 575.488 960 512s-13.504-127.296-40.96-192.128zM512 384a32 32 0 0 0-32 32v64h-64a32 32 0 0 0 0 64h64v64a32 32 0 0 0 64 0v-64h64a32 32 0 0 0 0-64h-64v-64a32 32 0 0 0-32-32z" />
+    </svg>
+</span>
+);
+export default Maskfilled;

packages/icon-v2/src/icons/Message.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Message = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-2.379a1 1 0 0 0-.707.293l-1.56 1.56a.5.5 0 0 1-.708 0l-1.56-1.56A1 1 0 0 0 5.379 13H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10Zm0 1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2.379a2 2 0 0 1 1.414.586L8 13.793l1.207-1.207a2 2 0 0 1 1.238-.578l.176-.008H13a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1ZM8 6.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm3.25 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm-6.5 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Message;

packages/icon-v2/src/icons/Model.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Model = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M7 1a2 2 0 0 1 2 0l4.562 2.634a2 2 0 0 1 1 1.732v5.268a2 2 0 0 1-1 1.732L9 15a2 2 0 0 1-2 0l-4.562-2.634a2 2 0 0 1-1-1.732V5.366a2 2 0 0 1 1-1.732Zm1.5.866a1 1 0 0 0-1 0L2.938 4.5a1 1 0 0 0-.5.866v5.268a1 1 0 0 0 .5.866L7.5 14.134a1 1 0 0 0 1 0l4.562-2.634a1 1 0 0 0 .5-.866V5.366a1 1 0 0 0-.5-.866ZM11.464 6a.5.5 0 0 1-.183.683L8.5 8.288V11.5a.5.5 0 1 1-1 0V8.288L4.719 6.683a.5.5 0 0 1 .5-.866l2.78 1.605 2.782-1.605a.5.5 0 0 1 .683.183Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Model;

packages/icon-v2/src/icons/Modelsel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Modelsel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Modelsel = (props: CustomSVGProps) => (
         d="M7 1 2.438 3.634a2 2 0 0 0-1 1.732v5.268a2 2 0 0 0 1 1.732L7 15a2 2 0 0 0 2 0l4.562-2.634a2 2 0 0 0 1-1.732V5.366a2 2 0 0 0-1-1.732L9 1a2 2 0 0 0-2 0Zm1.5.866L13.062 4.5a1 1 0 0 1 .5.866v5.268a1 1 0 0 1-.5.866L8.5 14.134a1 1 0 0 1-1 0L2.938 11.5a1 1 0 0 1-.5-.866V5.366a1 1 0 0 1 .5-.866L7.5 1.866a1 1 0 0 1 1 0Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Modelsel;

packages/icon-v2/src/icons/Night.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Night = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="m9.666 2.02.046.139C9.902 2.744 10 3.365 10 4c0 1.613-.64 3.124-1.757 4.243A5.979 5.979 0 0 1 4 10c-.68 0-1.345-.113-1.975-.333a.5.5 0 0 0-.637.637c.348.997.917 1.9 1.662 2.646A6.978 6.978 0 0 0 8 15a6.978 6.978 0 0 0 4.95-2.05A6.978 6.978 0 0 0 15 8a6.978 6.978 0 0 0-2.05-4.95 7.002 7.002 0 0 0-2.646-1.662.5.5 0 0 0-.638.632Zm1.22.72.176.099c.429.255.826.563 1.18.918A5.979 5.979 0 0 1 14 8c0 1.613-.64 3.124-1.757 4.243A5.979 5.979 0 0 1 8 14a5.979 5.979 0 0 1-4.243-1.757l-.207-.218a6.02 6.02 0 0 1-.711-.963l-.099-.177.252.043A6.978 6.978 0 0 0 8.95 8.95a6.978 6.978 0 0 0 1.987-5.891l-.051-.319Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Night;

packages/icon-v2/src/icons/Notice.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Notice = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 3a4.5 4.5 0 0 1 4.5 4.5V12a1.5 1.5 0 0 1 0 3h-9a1.5 1.5 0 0 1 0-3V7.5A4.5 4.5 0 0 1 8 3Zm4.5 10h-9a.5.5 0 1 0 0 1h9a.5.5 0 1 0 0-1ZM8 4a3.5 3.5 0 0 0-3.5 3.5V12h3V9.937a2 2 0 1 1 1.001 0L8.5 12h3V7.5A3.5 3.5 0 0 0 8 4Zm0 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM2 7a.5.5 0 0 1 0 1H1a.5.5 0 0 1 0-1h1Zm13 0a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1h1Zm-1.343-4.657a.5.5 0 0 1 0 .707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707a.5.5 0 0 1 .707 0Zm-10.607 0 .707.707a.5.5 0 1 1-.707.707l-.707-.707a.5.5 0 1 1 .707-.707ZM8 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 0Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Notice;

packages/icon-v2/src/icons/Noticesel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Noticesel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Noticesel = (props: CustomSVGProps) => (
         d="M8 3a4.5 4.5 0 0 1 4.5 4.5V12a1.5 1.5 0 0 1 0 3h-9a1.5 1.5 0 0 1 0-3V7.5A4.5 4.5 0 0 1 8 3Zm4.5 10h-9a.5.5 0 1 0 0 1h9a.5.5 0 1 0 0-1ZM8 4a3.5 3.5 0 0 0-3.5 3.5V12h7V7.5A3.5 3.5 0 0 0 8 4ZM2 7a.5.5 0 0 1 0 1H1a.5.5 0 0 1 0-1h1Zm13 0a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1h1Zm-1.343-4.657a.5.5 0 0 1 0 .707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707a.5.5 0 0 1 .707 0Zm-10.607 0 .707.707a.5.5 0 1 1-.707.707l-.707-.707a.5.5 0 1 1 .707-.707ZM8 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 0Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Noticesel;

packages/icon-v2/src/icons/Offline.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Offline = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10Zm0 1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1ZM6.854 5.646 8 6.793l1.146-1.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L8.707 7.5l1.147 1.146a.5.5 0 0 1-.708.708L8 8.207 6.854 9.354a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L7.293 7.5 6.146 6.354a.5.5 0 1 1 .708-.708ZM4.5 14h7a.5.5 0 1 1 0 1h-7a.5.5 0 1 1 0-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Offline;

packages/icon-v2/src/icons/Offlinesel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Offlinesel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="nonzero">
       <path
         fill="#09F"
@@ -13,7 +15,8 @@ const Offlinesel = (props: CustomSVGProps) => (
         d="M13 2H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm0 1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10ZM4.5 14h7a.5.5 0 1 1 0 1h-7a.5.5 0 1 1 0-1Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Offlinesel;

packages/icon-v2/src/icons/Password.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Password = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M8 1a3 3 0 0 1 3 3v1h1a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1V4a3 3 0 0 1 2.824-2.995Zm4 5H4a1 1 0 0 0-.993.883L3 7v5a1 1 0 0 0 .883.993L4 13h8a1 1 0 0 0 .993-.883L13 12V7a1 1 0 0 0-.883-.993L12 6ZM8 9a.997.997 0 0 1 1 1 .997.997 0 0 1-1 1 .997.997 0 0 1-1-1 .997.997 0 0 1 1-1Zm0-7a2 2 0 0 0-2 2v1h4V4a2 2 0 0 0-1.85-1.995Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Password;

packages/icon-v2/src/icons/Pause.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Pause = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M5 2a1 1 0 0 1 1 1v10a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm6 0a1 1 0 0 1 1 1v10a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Pause;

packages/icon-v2/src/icons/Personnel.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Personnel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M13 1a2 2 0 0 1 2 2v8a2 2 0 0 1-1.85 1.995L13 13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2 2 2 0 0 1 2-2h8Zm-2 3H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1l.005-.2a4.001 4.001 0 0 1 2.33-3.438 2.5 2.5 0 1 1 3.332.001A3.998 3.998 0 0 1 11 14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm-4 7a3 3 0 0 0-3 3h6a3 3 0 0 0-2.824-2.995Zm6-9H5a1 1 0 0 0-1 1h7a2 2 0 0 1 2 2v7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1ZM7 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Personnel;

packages/icon-v2/src/icons/Personnelsel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Personnelsel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="nonzero">
       <path
         fill="#09F"
@@ -13,7 +15,8 @@ const Personnelsel = (props: CustomSVGProps) => (
         d="M13 1a2 2 0 0 1 2 2v8a2 2 0 0 1-1.85 1.995L13 13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2 2 2 0 0 1 2-2h8Zm-2 3H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm2-2H5a1 1 0 0 0-1 1h7a2 2 0 0 1 2 2v7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Personnelsel;

packages/icon-v2/src/icons/Picture.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Picture = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M15 12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8Zm-3.954-5.34-3.692 3.694a.5.5 0 0 1-.554.104l-.077-.042-2.66-1.773L2 10.706V12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8.874L11.046 6.66ZM13 3H3a1 1 0 0 0-1 1v5.292l1.646-1.646a.5.5 0 0 1 .631-.062l2.659 1.772 3.71-3.71A.5.5 0 0 1 11.3 5.6L14 7.624V4a1 1 0 0 0-1-1ZM6 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Picture;

packages/icon-v2/src/icons/Play.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Play = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M3 4.136v7.728a2.1 2.1 0 0 0 3.15 1.819l6.697-3.864a2.1 2.1 0 0 0 0-3.638L6.15 2.317A2.1 2.1 0 0 0 3 4.136Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Play;

packages/icon-v2/src/icons/Polygon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomSVGProps } from '../type';
+import '../index.less';
+const Polygon = (props: CustomSVGProps) => (
+  <span className={'icon'}>
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    className="polygon__icon"
+    viewBox="0 0 1024 1024"
+    {...props}
+  >
+    <path fill="currentColor"
+      fillRule="nonzero"d="M448 64 156.032 232.576a128 128 0 0 0-64 110.848v337.152a128 128 0 0 0 64 110.848L448 960a128 128 0 0 0 128 0l291.968-168.576a128 128 0 0 0 64-110.848V343.424a128 128 0 0 0-64-110.848L576 64a128 128 0 0 0-128 0zm96 55.424L835.968 288a64 64 0 0 1 32 55.424v337.152a64 64 0 0 1-32 55.424L544 904.576a64 64 0 0 1-64 0L188.032 736a64 64 0 0 1-32-55.424V343.424a64 64 0 0 1 32-55.424L480 119.424a64 64 0 0 1 64 0z" />
+    </svg>
+</span>
+);
+export default Polygon;

packages/icon-v2/src/icons/Recall.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Recall = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
       fillRule="nonzero"
       d="M2 5.593a.5.5 0 0 1-.5-.5V2.972a.5.5 0 0 1 .5-.5l.09.008a.5.5 0 0 1 .41.492v.69a7 7 0 1 1-.766 7.47.5.5 0 1 1 .894-.448 6 6 0 1 0 .43-6.094l1.063.003a.5.5 0 1 1 0 1Zm5-.19a1 1 0 0 1 .53.151l2.557 1.598a1 1 0 0 1 0 1.696L7.53 10.446A1 1 0 0 1 6 9.598V6.402a1 1 0 0 1 1-1Zm0 1v3.195l2.555-1.599L7 6.402Z"
     />
-  </svg>
+    </svg>
+</span>
 );
 
 export default Recall;

packages/icon-v2/src/icons/Recallsel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CustomSVGProps } from '../type';
+import '../index.less';
 
 const Recallsel = (props: CustomSVGProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <span className={'icon'}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         fill="#09F"
@@ -14,7 +16,8 @@ const Recallsel = (props: CustomSVGProps) => (
         d="M2 5.593a.5.5 0 0 1-.5-.5V2.972a.5.5 0 0 1 .5-.5l.09.008a.5.5 0 0 1 .41.492v.69a7 7 0 1 1-.766 7.47.5.5 0 1 1 .894-.448 6 6 0 1 0 .429-6.093l1.064.002a.5.5 0 1 1 0 1Z"
       />
     </g>
-  </svg>
+    </svg>
+</span>
 );
 
 export default Recallsel;