@zohodesk/svg 1.0.0-beta.4 → 1.0.0-beta.40

package/src/svg/EmptyActivity.js

@@ -1,27 +1,81 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyActivity.svg';
+
 export default class EmptyActivity extends React.Component {
   render() {
-    let { isRender, size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='EmptyActivity' isRender={isRender} size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='EmptyActivity' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyActivity_svg__cls-4,.EmptyActivity_svg__cls-5,.EmptyActivity_svg__cls-6,.EmptyActivity_svg__cls-7,.EmptyActivity_svg__cls-8{fill:none}.EmptyActivity_svg__cls-4,.EmptyActivity_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyActivity_svg__cls-7{stroke:var(--zd_emptysvg_cross)}.EmptyActivity_svg__cls-5,.EmptyActivity_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyActivity_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyActivity_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity={0.05}
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyActivity_svg__cls-4"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyActivity_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyActivity_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyActivity_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M52.32 87.6s-.42-19.95 4.36-22.43 82.26.24 82.26.24 7.43-.07 8.34 6.9a37.49 37.49 0 010 11.36H62.64S53 83.55 52.32 87.6zm89.31 9.77c-.65.6 1.27 3.73 4.3 7s6 5.44 6.66 4.84-1.27-3.73-4.29-7-6.01-5.43-6.67-4.84zM110 108.52c.64.62 3.68-1.48 6.78-4.68s5.1-6.28 4.46-6.89-3.67 1.48-6.78 4.68-5.07 6.28-4.46 6.89z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptyActivity_svg__cls-6"
+          d="M122 123.76s12.07-.32 12.07 1-3.38 2.87-3.54-1.92-.16-14.52-.16-14.52 17.86.32 16.25 16.44-17.86 15.32-24 12.13-10.61-12.54-6.33-23.21c5-12.39 30.24-9.43 33.14 5.09s-7 25.49-22.51 22.64C112.5 138.71 110 125.7 112 117.22a17.58 17.58 0 016-10.89l.35-.35-.37-.55a1.59 1.59 0 00-2.43-.17c-1.28 1.34-3.74 3.7-5.07 3.5-1.86-.28-.29-3-.29-3s8.62-10.24 10.48-9.26-2.35 6-2.35 6l1.56 1.7c11.62-4 22.6.73 22.6.73l1.57-1.69s-4.21-5-2.35-6 10.47 9.26 10.47 9.26 1.57 2.68-.28 3-5.9-4.39-5.9-4.39c-.62-.18-1.31.55-2 1.61l.34.27a18.55 18.55 0 016.8 14.75l-.29 14.66c-.51 7.15-7.41 8.22-7.41 8.22s-74.65.31-81.77 0-8-7.22-8-7.22.56-38.08 0-46.42 9-7.31 9-7.31h83.61a3.73 3.73 0 013.43 2.28c3.69 8.88 2 14.37 1.2 14.4-1.06 0-.06-22.19-.06-22.19 0-1.56 0-3.48.06-5.81.11-8.23-12.84-7-12.84-7l-6.89.15s-2.09 8-6.13 8.17-2.1-16.48.45-17.67 4.34 8.46 2.54 9.2c-.9.38-3.79.4-8.6.31L88 65.45h-5.59s-2.09 8-6.13 8.17-2.08-16.46.46-17.62 4.35 8.46 2.55 9.2c-.9.38-5.32.38-10.13.28h-4.71c-4.81-.09-12.1-.6-13.45 1.16-1.53 2-1 2.19-1.28 5.58v41.65"
+        />
       </SVG>
     );
   }
 }
 EmptyActivity.propTypes = {
-  isRender: PropTypes.bool,
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignCenter: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyActivity.defaultProps = {
-  isRender: true,
   size: 'large',
-  alignHorizontal: true
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyActivity',
+  palette: 'default'
 };
 
 if (__DOCS__) {

package/src/svg/EmptyAgent.js

@@ -1,26 +1,82 @@
 import React from 'react';
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyAgent.svg';
+
 export default class EmptyAgent extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='agent' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='agent' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyAgent_svg__cls-4,.EmptyAgent_svg__cls-5,.EmptyAgent_svg__cls-6,.EmptyAgent_svg__cls-7,.EmptyAgent_svg__cls-8{fill:none}.EmptyAgent_svg__cls-4,.EmptyAgent_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyAgent_svg__cls-7{stroke:var(--zd_emptysvg_tiny_circle)}.EmptyAgent_svg__cls-5,.EmptyAgent_svg__cls-8{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyAgent_svg__cls-6{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}.EmptyAgent_svg__cls-8{stroke:var(--zd_emptysvg_primary_stroke)}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity={0.05}
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyAgent_svg__cls-7"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyAgent_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyAgent_svg__cls-6"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyAgent_svg__cls-4"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          fill="var(--zd_emptysvg_secondary_fill)"
+          d="M111.64 85.73l1.75 40.55 1.95 22.31-9.37 9.13-5.97-8.39 6.04-62.68 5.6-.92z"
+        />
+        <path
+          className="EmptyAgent_svg__cls-8"
+          d="M98 91.85s-14.11-6.36-10.33-20.51 31.89-9.38 34.22 0-12.37 19.5-23 14-11.07-19.2.87-24.83 29.56 3.61 27.81 12.56-14.24 25.8-23 21.65-.82-14 2.79-12.85 5.5 1.74 4.92 16.46 3.06 50.24 3.06 50.24-8.74 11.55-9.46 11.27-8.16-9.39-7.72-10.69 5.39-50.24 5.39-50.24l.89-10.79s2.23-5.83 6.6-1 8.56 33.64 19.28 34.05"
+        />
       </SVG>
     );
   }
 }
 EmptyAgent.propTypes = {
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignHorizontal: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyAgent.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyAgent',
+  palette: 'default'
+};
 
 if (__DOCS__) {
   EmptyAgent.docs = {

package/src/svg/EmptyAgentQueue.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptyAgentQueue extends React.Component {
+  render() {
+    return (
+      <SVG viewBox='0 0 200 200' name='EmptyAgentQueue' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".agentQueue_svg__cls-4,.agentQueue_svg__cls-6{fill:var(--zd_emptysvg_primary_fill)}.agentQueue_svg__cls-3{fill:var(--zd_emptysvg_tiny_circle)}.agentQueue_svg__cls-7{fill:var(--zd_emptysvg_cross)}.agentQueue_svg__cls-5{fill:var(--zd_emptysvg_small_circle)}.agentQueue_svg__cls-8{fill:var(--zd_emptysvg_primary_stroke);}.agentQueue_svg__cls-6{opacity:.25}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M80.12 59.9S127 29.06 150.78 38.35s40 87.37-26.06 122.41-95.89-41.18-96.15-54.69c-.24-13.07 0-44.23 51.55-46.17z"
+          opacity={0.05}
+          fill="var(--zd_emptysvg_primary_fill)"
+        />
+        <path
+          d="M149.64 33.09a4 4 0 114-4 4 4 0 01-4 4zm0-7a3 3 0 103 3 3 3 0 00-3-3.01z"
+          fill="var(--zd_emptysvg_medium_circle)"
+        />
+        <path
+          className="agentQueue_svg__cls-3"
+          d="M73.22 29.58A2.6 2.6 0 1175.84 27a2.6 2.6 0 01-2.62 2.58zm0-4.19A1.6 1.6 0 1074.84 27a1.6 1.6 0 00-1.62-1.61z"
+        />
+        <path
+          className="agentQueue_svg__cls-4"
+          d="M16.54 104.91a.5.5 0 01-.47-.53l.35-6.16a.48.48 0 01.53-.47.5.5 0 01.47.52l-.42 6.17a.51.51 0 01-.46.47z"
+        />
+        <path
+          className="agentQueue_svg__cls-4"
+          d="M19.82 102l-6.21-.35a.49.49 0 01-.47-.52.5.5 0 01.52-.48l6.22.35a.5.5 0 010 1z"
+        />
+        <path
+          className="agentQueue_svg__cls-5"
+          d="M159.49 154.41a2.93 2.93 0 112.95-2.93 2.95 2.95 0 01-2.95 2.93zm0-4.86a1.93 1.93 0 101.95 1.93 1.94 1.94 0 00-1.95-1.93z"
+        />
+        <path
+          className="agentQueue_svg__cls-7"
+          transform="rotate(-42.02 171.283 116.905)"
+          d="M170.78 113.8h1v6.2h-1z"
+        />
+        <path
+          className="agentQueue_svg__cls-7"
+          transform="rotate(-41.56 171.287 116.897)"
+          d="M168.18 116.4h6.2v1h-6.2z"
+        />
+        <path
+          className="agentQueue_svg__cls-6"
+          d="M115.79 72.81l-25.52 61.32s-1.07 3.78 2.36 5a66.5 66.5 0 007.93 2.21s4.42-8 11.63-4.91 2.23 8.77 2.23 8.77l11.67 3.24a4.94 4.94 0 005.81-2.7l20.94-45.89s4.79-11.12 3-15.47L146 79.19s-5.17 8.9-11 6.71-4.28-11.28-4.28-11.28l-11.63-2.73s-2.26-.83-3.3.92z"
+        />
+        <path
+          d="M114.13 109.91l6-.86 3-5.38a.35.35 0 01.43 0l2.71 5.48 6.5.76c.22 0 .33.21.11.43l-4.88 4.3 1.19 5.91c0 .21-.1.32-.32.21l-5.2-2.69-5.64 2.8c-.11.11-.32 0-.32-.22l.54-6-4.34-4.2a.79.79 0 01.22-.54z"
+          fill="var(--zd_emptysvg_circle_fill)"
+        />
+        <ellipse
+          className="agentQueue_svg__cls-6"
+          cx={79.29}
+          cy={65.74}
+          rx={13.25}
+          ry={13.63}
+        />
+        <path
+          className="agentQueue_svg__cls-8"
+          d="M129 149.35a5 5 0 01-1.22-.15l-13.46-3.47a.5.5 0 01-.33-.29.49.49 0 010-.44s1.8-3.41.79-5.84A4 4 0 00112 137c-7.62-2.3-10.9 4.36-11 4.65a.51.51 0 01-.59.26l-7.92-2.21a4.16 4.16 0 01-2.69-5.72l12.73-28.2a.5.5 0 01.66-.25.51.51 0 01.25.67l-12.71 28.14a3.15 3.15 0 002 4.35l7.55 2.1a10.08 10.08 0 0112-4.8 4.91 4.91 0 013.36 2.79c.93 2.24 0 5-.56 6.13l12.92 3.32a4 4 0 004.52-2.09c20.19-41.22 25.07-58.75 22.91-61.41-1.19-1.45-4.26-3.11-9.15-4.91-.86 1.79-4.5 8.26-11.44 6.57a6.6 6.6 0 01-4.5-3.26c-1.58-2.95-.7-6.77-.3-8.15-4.42-1.12-8.45-2-11.09-2.6a3.12 3.12 0 00-3.72 2.29C113.94 79.78 112.1 85 110.32 90c-.81 2.3-1.62 4.56-2.35 6.77 4.85 7.86 3.41 14.85 3.34 15.14-.93 3.78-3 4.87-4.61 4.63s-3.27-2-3.13-4.85c.22-4.51 1.56-9.5 3.3-14.79-.33-.45-11.36-15.31-27.07-15.57h-1.18l-.63.07A28.61 28.61 0 0065.74 85C52 92.6 48 104.64 50.12 113.21c1.65 6.63 6.74 10.82 13.28 10.93h.36c9.64 0 11.63-6.65 12-9.54.82-5.79-2.28-13.31-8-14.85a.52.52 0 01-.35-.62.5.5 0 01.61-.35c6.34 1.7 9.65 9.63 8.76 16-.93 6.63-6 10.52-13.4 10.39-7-.12-12.47-4.6-14.23-11.69-2.22-8.94 1.9-21.47 16.11-29.28a30.8 30.8 0 019.27-3.39 14.82 14.82 0 118.38-.21c13 1.73 22.24 12.53 24.34 15.19.68-2 1.4-4 2.13-6.09 1.77-5 3.6-10.18 4.88-15.24a4.12 4.12 0 014.9-3c2.75.6 7 1.56 11.64 2.74a.48.48 0 01.32.25.47.47 0 010 .4s-1.64 4.68.08 7.87a5.64 5.64 0 003.85 2.76c7.13 1.74 10.33-6.08 10.47-6.41a.5.5 0 01.63-.29c5.39 2 8.67 3.72 10 5.38 4.4 5.42-14.47 45.5-22.79 62.48a5 5 0 01-4.36 2.71zM107.56 98a54.86 54.86 0 00-3 13.7c-.11 2.27 1.06 3.64 2.27 3.82s2.73-.75 3.5-3.86A21.17 21.17 0 00107.56 98zm-29.2-46.15a14.23 14.23 0 000 28.45h.22l2.33-.24a14.27 14.27 0 00-2.55-28.21z"
+        />
+      </SVG>
+    );
+  }
+}
+EmptyAgentQueue.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
+};
+EmptyAgentQueue.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyAgentQueue',
+  palette: 'default'
+};
+if (__DOCS__) {
+  EmptyAgentQueue.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/EmptyApproval.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptyApproval extends React.Component {
+  render() {
+    return (
+      <SVG viewBox='0 0 200 200' name='archived' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyApproval_svg__cls-3,.EmptyApproval_svg__cls-4,.EmptyApproval_svg__cls-5,.EmptyApproval_svg__cls-6,.EmptyApproval_svg__cls-7{fill:none}.EmptyApproval_svg__cls-3,.EmptyApproval_svg__cls-6{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyApproval_svg__cls-6{stroke:var(--zd_emptysvg_cross)}.EmptyApproval_svg__cls-4,.EmptyApproval_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyApproval_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyApproval_svg__cls-7{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.43 62.37s46.91-30.84 70.66-21.56 40 87.37-26.06 122.42-95.89-41.23-96.15-54.7c-.24-13.07 0-44.22 51.55-46.16z"
+          opacity={0.05}
+          fill="var(--zd_emptysvg_primary_fill)"
+        />
+        <ellipse
+          cx={155.95}
+          cy={31.55}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyApproval_svg__cls-3"
+          cx={79.53}
+          cy={29.45}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyApproval_svg__cls-4"
+          d="M23.2 100.71l-.35 6.16M19.92 103.62l6.21.34"
+        />
+        <ellipse
+          className="EmptyApproval_svg__cls-7"
+          cx={165.8}
+          cy={153.94}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyApproval_svg__cls-6"
+          d="M175.52 117.06l4.15 4.61M175.27 121.42l4.65-4.11"
+        />
+        <path
+          d="M77.45 70.19l5-1.59a12.76 12.76 0 01-.64-4.46c0-4.34 3.25-7 7.26-7.24 4.36-.32 7.76 4.27 9 7.19l7.81-2.14c1.3-.33 2.74-.42 3.14.85l1 3.23a2.5 2.5 0 01-1.64 3.13L80 78.15a2.52 2.52 0 01-3.15-1.58l-1.23-3.68c-.5-1.31.5-2.28 1.83-2.7z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <ellipse cx={89.66} cy={63.02} rx={2.24} ry={2.22} fill="var(--zd_emptysvg_circle_fill)" />
+        <path
+          className="EmptyApproval_svg__cls-5"
+          d="M146 125.33c1.79 5.74 4.39 16.67-1 18.42s-55.63 19.49-59.78 17-29.38-83.41-23.29-85.61 19.54-7.18 20.29-7c0 0-2-7.78 3.15-9.91s8.27-2.57 12.82 5c0 0 19.34-5.5 21.33-5s25.87 67.59 25.3 80.56c0 0 0 1.13-4.26 3.66s-48.34 16-53.45 14.1S65.5 89.2 64.93 83s51.44-20.27 53.71-17.45c2.13 2.63 7.5 19.17 13.53 35.9q1.31 3.63 2.28 7.36l1.79 6.91s-14.47-2.46-15.29-.55.54 10.38 1.77 7.24 1.91-7.51-2.59-14.89-8.88-13.92-5.19-20.07c0 0-6.15-2.46-8.6 4s5.59 12.29 3.14 14.48-18.08-1.1-18.62 4.36 8.78 5.74 9 4.37-9.46-1.09-9.6 3.14 9.19 4.92 9.19 3.15-8.64-1.23-8 3.68 9.87 3.55 9.74 3-7.91-1.76-8.55 1.41 13.55 4.69 18.76 2.72 12.12-1.34 12.12-1.34"
+        />
+      </SVG>
+    );
+  }
+}
+EmptyApproval.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
+};
+EmptyApproval.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyArchived',
+  palette: 'default'
+};
+if (__DOCS__) {
+  EmptyApproval.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/EmptyArchived.js

@@ -1,26 +1,92 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyArchived.svg';
+
 export default class EmptyArchived extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='archived' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='archived' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyArchived_svg__cls-3,.EmptyArchived_svg__cls-4,.EmptyArchived_svg__cls-5,.EmptyArchived_svg__cls-6,.EmptyArchived_svg__cls-8{fill:none}.EmptyArchived_svg__cls-3,.EmptyArchived_svg__cls-6{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyArchived_svg__cls-6{stroke:var(--zd_emptysvg_cross)}.EmptyArchived_svg__cls-4,.EmptyArchived_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyArchived_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyArchived_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}.EmptyArchived_svg__cls-7{fill:var(--zd_emptysvg_circle_fill)}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          opacity={0.05}
+          fill="var(--zd_emptysvg_primary_fill)"
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyArchived_svg__cls-3"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyArchived_svg__cls-4"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyArchived_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyArchived_svg__cls-6"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M59.14 102.89l77.54.31s-5 34.74-3.78 43.49l12.79-2.93s-3.69-34.4-1.13-42.76l11.64-.38s3.89 54-15.82 63c0 0-63.67 8.45-77.24-4.91 0-.03-10.14-18.16-4-55.82z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptyArchived_svg__cls-5"
+          d="M130.4 100.4s1.79-30.18 4.09-34.79c0 0-51.13-11.36-73.66-7.61 0 0-3.53 27.27-3.68 44-.07 7.66-5 54.76 10.06 61.52s69.53 3.41 76.2-.44c9.39-5.4 13.17-32.6 12.79-61.14 0 0-9.76-1.5-11.64.37s-.52 29.32 1.13 42.81c.46 3.73.38 17.27-7.51 17.27s-6.38-40.17-1.5-57.82l-71.83-1.07 4.77-59.19 77.82 10S135.52 92.44 136.82 102l8.67-2.17s6.73-26 10.74-31.65l-9.23-.67"
+        />
+        <path
+          className="EmptyArchived_svg__cls-7"
+          d="M110.9 129.37H93.33a1.5 1.5 0 110-3h17.57a1.5 1.5 0 010 3z"
+        />
+        <circle
+          className="EmptyArchived_svg__cls-7"
+          cx={86.82}
+          cy={127.87}
+          r={1.35}
+        />
       </SVG>
     );
   }
 }
 EmptyArchived.propTypes = {
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignHorizontal: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyArchived.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyArchived',
+  palette: 'default'
+};
 if (__DOCS__) {
   EmptyArchived.docs = {
     componentGroup: 'SVG'

package/src/svg/EmptyAttach.js

@@ -1,29 +1,85 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyAttach.svg';
+
 export default class EmptyAttach extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='attach' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='attach' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyAttach_svg__cls-4,.EmptyAttach_svg__cls-5,.EmptyAttach_svg__cls-6,.EmptyAttach_svg__cls-7,.EmptyAttach_svg__cls-8{fill:none}.EmptyAttach_svg__cls-4,.EmptyAttach_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyAttach_svg__cls-7{stroke:var(--zd_emptysvg_cross)}.EmptyAttach_svg__cls-5,.EmptyAttach_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyAttach_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyAttach_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity={0.05}
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyAttach_svg__cls-4"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyAttach_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyAttach_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyAttach_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M120.89 72.28l7.19 52.09s-56.62 7.79-58.16 4.34-7.61-51.27-5.32-51.47z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptyAttach_svg__cls-6"
+          d="M146.42 155.3c-17.09.46-60.1-.42-69.48-.77a2.4 2.4 0 01-2.33-2.39v-23.43h-4.69l-5-48.51a2.94 2.94 0 012.67-3.2l53.3-4.7 7.19 52.09s-54 7.52-54.58 5.93-1-65.57 0-66.07c1.62-.87 18.28-.24 22.81 0a1.33 1.33 0 011.26 1.16c.86 7 5.12 45.07 5.08 46.83-.14 5.91-13.49 14.69-17.54-.24-4.44-16.36-6.44-48.46-6.59-50.8-.31-5.16 13.8-16.72 17.87 17.2 3.77 31.37 3.84 34.6-2 35.48-6.86 1-11.37-47.7-11.37-47.7h60.63a3.2 3.2 0 013.21 3.09c.37 12.61 4.83 87 1.65 88.86-2.27 1.36-49.85 0-49.85 0"
+        />
       </SVG>
     );
   }
 }
 EmptyAttach.propTypes = {
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignHorizontal: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyAttach.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyAttach',
+  palette: 'default'
+};
 
 if (__DOCS__) {
-    EmptyAttach.docs = {
+  EmptyAttach.docs = {
     componentGroup: 'SVG'
   };
 }