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

package/src/svg/EmptySearch.js

@@ -1,27 +1,93 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptySearch.svg';
+
 export default class EmptySearch extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='search' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='search' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptySearch_svg__cls-4,.EmptySearch_svg__cls-5,.EmptySearch_svg__cls-6,.EmptySearch_svg__cls-7,.EmptySearch_svg__cls-8{fill:none}.EmptySearch_svg__cls-4{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptySearch_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptySearch_svg__cls-5,.EmptySearch_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptySearch_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptySearch_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="EmptySearch_svg__cls-4"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptySearch_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptySearch_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptySearch_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M101.35 87.13s4.94 2.24 6.06 9.58"
+          stroke="var(--zd_emptysvg_circle_fill)"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <ellipse
+          cx={95.28}
+          cy={96.71}
+          rx={21.41}
+          ry={21.23}
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptySearch_svg__cls-6"
+          d="M33.71 102.31H56.2a7.33 7.33 0 007.28-6.64c.75-7.62 4.37-20 19-27.59 22.32-11.51 51.78 10.62 43.75 37.18l-3.57 7.67 27.38 27.15s4.11 6.77 0 10.62-8 1.77-12.21-1.18S112 124.14 112 124.14s-26.19 12.4-42.26-8.26c0 0-1-1.53-2.09-3.42-2.2-3.73 1.4-8.42 5.52-7a3.11 3.11 0 011.5 1c2.19 2.85 9.2 15.31 25.23 12.24s19.48-19.7 15.81-32.18-25.88-16.08-34.38-8-9.65 18.57-5.6 22 7-.57 8.31-5.93 4.41-8.81 8.38-8.81 7.84-2.11 5.72-5.75-12.51-.82-16 2.68c-5.32 5.28-9.27 17.71-1 26.19s19.7 5.22 22.6 3.69 6.4-7.8 7.92-8.62"
+        />
       </SVG>
     );
   }
 }
 EmptySearch.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'])
 };
 EmptySearch.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
-
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptySearch',
+  palette: 'default'
+};
 if (__DOCS__) {
   EmptySearch.docs = {
     componentGroup: 'SVG'

package/src/svg/EmptySkills.js

@@ -1,33 +1,114 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptySkills.svg';
+
 export default class EmptySkills extends React.Component {
   render() {
-    let { size, className = '', alignHorizontal } = this.props;
     return (
-      <SVG
-        viewBox='0 0 194.4 139.3'
-        name='search'
-        size={size}
-        className={className}
-        alignHorizontal={alignHorizontal}
-      >
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='search' {...this.props}>
+        <style>
+          {
+            ".EmptySkills_svg__st2,.EmptySkills_svg__st4{fill:none;stroke:var(--zd_emptysvg_tiny_circle);stroke-miterlimit:10}.EmptySkills_svg__st4{stroke:var(--zd_emptysvg_cross)}.EmptySkills_svg__st3{fill:none;stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptySkills_svg__st7{opacity:.25}.EmptySkills_svg__st9{fill:none;stroke:var(--zd_emptysvg_primary_fill);stroke-width:.5;stroke-miterlimit:10}"
+          }
+        </style>
+        <path
+          d="M86.5 62.5s46.9-30.9 70.7-21.5 40 87.4-26.1 122.4-95.9-41.2-96.1-54.7c-.3-13.1 0-44.3 51.5-46.2z"
+          opacity={0.05}
+          fill="var(--zd_emptysvg_primary_fill)"
+        />
+        <circle
+          cx={156}
+          cy={31.7}
+          fill="none"
+          stroke="var(--zd_emptysvg_medium_circle)"
+          strokeMiterlimit={10}
+          r={3.5}
+        />
+        <circle className="EmptySkills_svg__st2" cx={79.6} cy={29.6} r={2.1} />
+        <path
+          className="EmptySkills_svg__st3"
+          d="M23.3 100.9l-.4 6.1M20 103.8l6.2.3"
+        />
+        <circle
+          cx={165.9}
+          cy={154.1}
+          fill="none"
+          stroke="var(--zd_emptysvg_medium_circle)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          r={2.4}
+        />
+        <path
+          className="EmptySkills_svg__st4"
+          d="M175.6 117.2l4.2 4.6M175.4 121.6l4.6-4.2"
+        />
+        <path
+          d="M25.9 124.2s28.6-2.9 35.8-25.2 29.5-22.8 35.6-24.2l.7-.2c6.6-2.4 11.3-8.9 11.3-16.3 0-9.5-7.7-17.2-17.2-17.2S75 48.8 75 58.3c0 8.2 5.7 15 13.4 16.7h0c2.1.7 4.5 1.6 7.3 1.9 2.2.2 4.5.3 6.8.2 5.3-.2 18.5 2.2 23.3 13.8 6.3 15.4 16.9 30.2 36.4 30.2 0 0-44.3 6.3-51.1-23 0 0 3.2 1.1 0 15.1S92.4 142 66.5 128s-30.6 18.7-5 22.3 58.3-18.4 72.7-22 24.1 5 24.1 12.2c0 20.2-79.2 33.1-83.2-42.5"
+          fill="none"
+          stroke="var(--zd_emptysvg_primary_stroke)"
+          strokeMiterlimit={10}
+        />
+        <circle cx={97.2} cy={58.1} r={17.1} fill="var(--zd_emptysvg_secondary_fill)" />
+        <g className="EmptySkills_svg__st7">
+          <defs>
+            <circle
+              id="EmptySkills_svg__SVGID_1_"
+              cx={147.6}
+              cy={58.7}
+              r={12.7}
+            />
+          </defs>
+          <clipPath id="EmptySkills_svg__SVGID_2_">
+            <use xlinkHref="#EmptySkills_svg__SVGID_1_" overflow="visible" />
+          </clipPath>
+          <g clipPath="url(#EmptySkills_svg__SVGID_2_)">
+            <path
+              className="EmptySkills_svg__st9"
+              d="M162.5 47.7l-4.1 26M160.9 47.5l-4.1 26M159.3 47.2l-4.1 26M157.7 47l-4.1 26M156.1 46.7l-4.2 26M154.5 46.5l-4.1 25.9M152.9 46.2l-4.2 26M151.3 45.9l-4.2 26M149.7 45.7l-4.2 26M148.1 45.4l-4.2 26M146.5 45.2l-4.2 26M144.9 44.9l-4.2 26M143.2 44.7l-4.1 26M141.6 44.4l-4.1 26M140 44.2l-4.1 26M138.4 43.9l-4.1 26M136.8 43.6l-4.1 26"
+            />
+          </g>
+          <circle
+            className="EmptySkills_svg__st9"
+            cx={147.6}
+            cy={58.7}
+            r={12.7}
+          />
+        </g>
+        <g className="EmptySkills_svg__st7">
+          <defs>
+            <circle id="EmptySkills_svg__SVGID_3_" cx={34.3} cy={61.8} r={12.7} />
+          </defs>
+          <clipPath id="EmptySkills_svg__SVGID_4_">
+            <use xlinkHref="#EmptySkills_svg__SVGID_3_" overflow="visible" />
+          </clipPath>
+          <g clipPath="url(#EmptySkills_svg__SVGID_4_)">
+            <path
+              className="EmptySkills_svg__st9"
+              d="M47.7 50.6l-4.2 26M44.5 50.1l-4.2 26M41.2 49.6l-4.1 26M38 49l-4.1 26.1M34.8 48.5l-4.1 26M31.6 48l-4.1 26M28.4 47.5l-4.2 26M25.2 47L21 73"
+            />
+          </g>
+          <circle className="EmptySkills_svg__st9" cx={34.3} cy={61.8} r={12.7} />
+        </g>
       </SVG>
     );
   }
 }
 EmptySkills.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'])
 };
 EmptySkills.defaultProps = {
   size: 'large',
-  alignHorizontal: true
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptySkills',
+  palette: 'default'
 };
-
 if (__DOCS__) {
   EmptySkills.docs = {
     componentGroup: 'SVG'

package/src/svg/EmptySla.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptySla extends React.Component {
+  render() {
+    return (
+      <SVG viewBox='0 0 200 200' name='Sla' {...this.props}>
+        <defs>
+          <style>
+            {
+              '.EmptySla_svg-3{fill:var(--zd_emptysvg_tiny_circle)}.EmptySla_svg-4{fill:var(--zd_emptysvg_plus)}'
+            }
+          </style>
+        </defs>
+        <path
+          d='M88.4 67.4s41.2-27.13 62.06-19 35.09 76.86-22.89 107.68S43.36 119.89 43.13 108c-.21-11.5 0-38.9 45.27-40.6z'
+          fill='var(--zd_emptysvg_primary_fill)'
+          opacity={0.05}
+        />
+        <path
+          d='M158.11 150.45a2.5 2.5 0 112.51-2.5 2.51 2.51 0 01-2.51 2.5zm0-4.28a1.78 1.78 0 101.79 1.83 1.79 1.79 0 00-1.79-1.83z'
+          fill='var(--zd_emptysvg_small_circle)'
+        />
+        <path
+          d='M149.46 43.73a3.45 3.45 0 113.47-3.45 3.47 3.47 0 01-3.47 3.45zm0-6.17a2.73 2.73 0 102.75 2.72 2.74 2.74 0 00-2.75-2.72z'
+          fill='var(--zd_emptysvg_medium_circle)'
+        />
+        <path
+          className='EmptySla_svg-3'
+          d='M82.35 40.64a2.21 2.21 0 112.21-2.2 2.2 2.2 0 01-2.21 2.2zm0-3.68a1.48 1.48 0 101.49 1.48A1.49 1.49 0 0082.35 37z'
+        />
+        <path
+          className='EmptySla_svg-4'
+          d='M32.57 106.9a.35.35 0 01-.33-.38l.3-5.42a.36.36 0 01.72 0l-.31 5.42a.35.35 0 01-.38.38z'
+        />
+        <path
+          className='EmptySla_svg-4'
+          d='M35.45 104.34L30 104a.36.36 0 010-.72l5.46.3a.37.37 0 01.34.38.35.35 0 01-.35.38z'
+        />
+        <path
+          className='EmptySla_svg-3'
+          d='M170.29 119.92a.36.36 0 01-.27-.12l-3.65-4a.36.36 0 01.54-.49l3.64 4a.35.35 0 010 .51.34.34 0 01-.26.1z'
+        />
+        <path
+          className='EmptySla_svg-3'
+          d='M166.42 119.7a.36.36 0 01-.23-.63l4.07-3.62a.36.36 0 01.48.54l-4.08 3.62a.34.34 0 01-.24.09z'
+        />
+        <path
+          d='M101.93 94.22s-8.08 10.21-7.18 10.78 10.83 13 11.47 12.27 34-25.4 34-25.4-.49-3-2.92-1.62C129 95 109.68 109.18 109 108.23c-.9-1.23-7.07-14.01-7.07-14.01z'
+          fill='var(--zd_emptysvg_secondary_fill)'
+        />
+        <path
+          d='M105.4 156.63h-.15c-1.5-.29-10.69-7.45-18.34-14-5-4.23-16.69-14.49-18.07-18.39-2.21-6.26-1.62-50.79-1.59-52.68a.74.74 0 01.33-.59c.56-.42 2.67-.73 5.76-1 0-1.24.06-2.13.06-2.55a1 1 0 01.34-.75c3.71-3.64 54.81-3 60.63-2.91a.52.52 0 01.52.53.53.53 0 01-.53.52c-.14 0-14.77-.22-29.44 0-27 .47-30.16 2.09-30.46 2.6 0 .43 0 1.28-.06 2.45 7.24-.47 18.92-.54 29.14-.49 16.31.07 34 .52 35.75.91.54.12.84.18.8 9.33 0 4.31-.13 8.66-.13 8.71a.5.5 0 01-.23.42l-30.44 19.83a.53.53 0 01-.44.07.55.55 0 01-.33-.3c-.05-.1-4.6-10.57-6.39-12.79a.35.35 0 00-.34-.17c-1.59.1-4.94 5.63-6 7.44-.24.41-.44.73-.58.94 0 .38.76 2.64 11.19 14.34l.1.11c2.53-.89 21.19-15.53 32.65-24.78a.53.53 0 01.55-.07.53.53 0 01.3.47c0 .95.3 23.3-.51 27.34-.46 2.3-8.31 10.3-15.41 16.75-3.5 3.18-15.2 13.58-18.61 13.58-5.31 0-28.89-25.58-32-31.47-1.6-3-1.06-23.91-.25-46 0-1.13.08-2.15.11-3a19.34 19.34 0 00-5 .7c0 2.93-.55 46.23 1.54 52.14.89 2.54 7.53 9.24 17.74 17.93 9.53 8.11 17 13.56 17.88 13.75 1.32 0 10.34-6.53 20.23-15.66 10.83-10 17.09-17.93 17.19-21.78l.42-16.48a.52.52 0 01.52-.51.53.53 0 01.51.54l-.42 16.48c-.17 6.81-16.75 22.52-27.85 31.43-3.32 2.69-9.01 7.06-10.69 7.06zM74.35 71c0 .92-.07 2-.11 3.15-.47 12.66-1.56 42.29.12 45.49 1.57 3 8.06 10.65 15.11 17.85 7.77 7.93 14 13.06 16 13.06s9.15-5.35 17.91-13.31c9.4-8.55 14.79-14.72 15.08-16.18.69-3.44.55-21.43.51-26-2.28 1.83-8.84 7.09-15.41 12.2-16.74 13-17.2 12.51-17.68 12l-.26-.3c-12.41-13.92-11.67-15-11.31-15.56.12-.18.33-.52.59-1 2.46-4.06 5-7.83 6.87-7.95a1.42 1.42 0 011.22.56c1.64 2.05 5.29 10.21 6.28 12.47l29.69-19.35c.18-7.27.19-15.28-.1-16.75-2.57-.33-18.67-.77-35.38-.85-14.41-.08-23.7.13-29.13.47zm32.26 47.49zm-11.45-14.66z'
+          fill='var(--zd_emptysvg_primary_stroke)'
+        />
+      </SVG>
+    );
+  }
+}
+EmptySla.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
+};
+EmptySla.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'EmptySla',
+  palette: 'default'
+};
+if (__DOCS__) {
+  EmptySla.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/EmptySnippet.js

@@ -1,35 +1,96 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptySnippet.svg';
-export default class EmptyRoles extends React.Component {
+
+export default class EmptySnippet extends React.Component {
   render() {
-    let { size, className = '', alignHorizontal } = this.props;
     return (
-      <SVG
-        viewBox='0 0 181.9 139.3'
-        name='roles'
-        size={size}
-        className={className}
-        alignHorizontal={alignHorizontal}
-      >
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='snippet' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptySnippet_svg__cls-6{fill:var(--zd_emptysvg_secondary_fill)}.EmptySnippet_svg__cls-3,.EmptySnippet_svg__cls-4,.EmptySnippet_svg__cls-5,.EmptySnippet_svg__cls-7,.EmptySnippet_svg__cls-8{fill:none}.EmptySnippet_svg__cls-3{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptySnippet_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptySnippet_svg__cls-4,.EmptySnippet_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptySnippet_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptySnippet_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"
+          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="EmptySnippet_svg__cls-3"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptySnippet_svg__cls-4"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptySnippet_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptySnippet_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          className="EmptySnippet_svg__cls-6"
+          d="M119.87 139.21s-11.87-8.72 1.14-35c13.82-27.89 38.05-42 47.15-31.63 4.7 5.42-31.72 67.7-48.29 66.63z"
+        />
+        <path
+          className="EmptySnippet_svg__cls-5"
+          d="M107.71 147.22l-31.65 6s-7.53-9.06-5-52.27c1.32-22.39-8.82-32.16-8.82-32.16L128.41 55s6.26 11.49 3.83 27.54C129.6 100 115.6 102.17 116.78 134a1.14 1.14 0 002.15.38c5.62-11.24 24.49-47.73 35-52.54 0 0-38.4 48.36-37.33 71.47 0 0 4.51-11.69 4.56-13.86.06-2.47-4.9-2.75-3.87 0s16.48-3.56 29.8-25.06 27.17-36.09 19.56-43.9c-11.08-11.37-44.18 23-49.23 42.72-5.82 22.72 1.45 26.5 5.41 27.16s12.66-8.83 12.66-8.83 2.14 9.75 4.22 11.94l-16.38 2.91"
+        />
+        <path
+          d="M123.26 116.23s3.32-11.21 10.42-19.74"
+          stroke="var(--zd_emptysvg_circle_fill)"
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <path
+          className="EmptySnippet_svg__cls-6"
+          d="M94.37 100.23s9.48-1.35 9.48-10.19c0 0-.08 10 8.44 10.19 0 0-8.52-.12-8.49 8 0 .02-.47-8.52-9.43-8zM88.34 121.72s9.48-1.35 9.48-10.19c0 0-.08 10 8.44 10.19 0 0-8.52-.11-8.49 8 0 .02-.47-8.51-9.43-8zM83.26 107s5.38-.77 5.38-5.79c0 0 0 5.68 4.79 5.79 0 0-4.84-.07-4.82 4.55a4.81 4.81 0 00-5.35-4.55z"
+        />
       </SVG>
     );
   }
 }
-EmptyRoles.propTypes = {
+EmptySnippet.propTypes = {
   alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  size: PropTypes.oneOf('small', 'large')
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
-EmptyRoles.defaultProps = {
+EmptySnippet.defaultProps = {
   size: 'large',
-  alignHorizontal: true
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptySnippet',
+  palette: 'default'
 };
-
 if (__DOCS__) {
-  EmptyRoles.docs = {
+  EmptySnippet.docs = {
     componentGroup: 'SVG'
   };
 }

package/src/svg/EmptyStateVariables.module.css

@@ -0,0 +1,39 @@
+.default {
+  /* empty svg default palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_default_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_default_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_default_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_default_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_default_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_default_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_default_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_default_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_default_circle_fill);
+}
+.dark {
+  /* empty svg dark palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_dark_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_dark_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_dark_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_dark_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_dark_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_dark_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_dark_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_dark_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_dark_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_dark_circle_fill);
+}
+.danger {
+  /* empty svg danger palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_danger_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_danger_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_danger_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_danger_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_danger_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_danger_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_danger_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
+}

package/src/svg/EmptyTag.js

@@ -1,27 +1,86 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyTag.svg';
+
 export default class EmptyTag extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='tag' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='tag' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyTag_svg__cls-7{fill:var(--zd_emptysvg_secondary_fill)}.EmptyTag_svg__cls-4,.EmptyTag_svg__cls-5,.EmptyTag_svg__cls-6,.EmptyTag_svg__cls-8,.EmptyTag_svg__cls-9{fill:none}.EmptyTag_svg__cls-4{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyTag_svg__cls-8{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyTag_svg__cls-5,.EmptyTag_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyTag_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyTag_svg__cls-9{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="EmptyTag_svg__cls-4"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyTag_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyTag_svg__cls-9"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyTag_svg__cls-8"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          className="EmptyTag_svg__cls-7"
+          d="M136.3 107.68s-1.24 51.51-2.14 54-45.41-1.83-46.59-3.82 42.71-48.51 48.73-50.18z"
+        />
+        <path
+          className="EmptyTag_svg__cls-6"
+          d="M171.12 53.1s-13.85 5.78-26.25-4.34-24.4 19.63-22.61 32.54c1.88 13.51-10.34 16.07-13.93 9.4s5-15.45 16.66-11.06c0 0 5.45 2 7 4.14 8.94 12.74 1.59 22-.92 25s-5.81 6.85-7.71 7.78c-3.52 1.71 7.3-9.4 12.14-8.93v4c-.15 17.83-.08 49.91-2.14 50-3.82.19-36.94-2.54-42.79-2.34a5 5 0 01-5-3.46 2.86 2.86 0 01.19-2.29c1.12-1.95 20.44-20.1 28.67-27.8a.23.23 0 01.33.32c-14.36 16.07-32.8 36-34.33 35.56-2.07-.61-27-24.87-35.67-33.4a4.37 4.37 0 01-.12-6.14c8.5-9 33.4-33.91 43-43.49A16.41 16.41 0 0196.7 74c6.6-1.05 16.18-2.64 17.87-2.46"
+        />
+        <path
+          className="EmptyTag_svg__cls-7"
+          d="M78.39 112.58l7.92-1.15 4-7.14a.44.44 0 01.57 0l3.61 7.29 8.64 1c.29 0 .43.28.14.57l-6.48 5.71 1.59 7.86c0 .28-.15.43-.44.28l-6.91-3.57-7.49 3.72c-.15.14-.43 0-.43-.29l.72-8-5.77-5.57a1.08 1.08 0 01.33-.71z"
+        />
       </SVG>
     );
   }
 }
 EmptyTag.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'])
 };
 EmptyTag.defaultProps = {
   size: 'large',
-  alignHorizontal: true
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyTag',
+  palette: 'default'
 };
-
 if (__DOCS__) {
   EmptyTag.docs = {
     componentGroup: 'SVG'

package/src/svg/EmptyTask.js

@@ -1,29 +1,97 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyTask.svg';
+
 export default class EmptyTask extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='task' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='task' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyTask_svg__cls-6{fill:var(--zd_emptysvg_secondary_fill)}.EmptyTask_svg__cls-3,.EmptyTask_svg__cls-4,.EmptyTask_svg__cls-5,.EmptyTask_svg__cls-7,.EmptyTask_svg__cls-8{fill:none}.EmptyTask_svg__cls-3{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyTask_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyTask_svg__cls-4,.EmptyTask_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyTask_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyTask_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"
+          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="EmptyTask_svg__cls-3"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyTask_svg__cls-4"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyTask_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyTask_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          className="EmptyTask_svg__cls-6"
+          d="M131.83 70.33l-5-1.58a12.76 12.76 0 00.65-4.46c0-4.34-3.26-7-7.26-7.24-4.36-.32-7.77 4.26-9 7.19l-7.81-2.14c-1.3-.34-2.73-.43-3.14.84l-1 3.24a2.49 2.49 0 001.64 3.12l28.47 9a2.51 2.51 0 003.15-1.58l1.19-3.72c.44-1.28-.56-2.24-1.89-2.67z"
+        />
+        <ellipse cx={119.62} cy={63.17} rx={2.24} ry={2.22} fill="var(--zd_emptysvg_circle_fill)" />
+        <path
+          className="EmptyTask_svg__cls-6"
+          d="M98.47 118.8a3.76 3.76 0 01-.38-5.18c2.23-2.79 14.36-17.82 14.36-17.82s10.41 4.26 6.92 8.45l-15.86 19z"
+        />
+        <path
+          className="EmptyTask_svg__cls-5"
+          d="M63.28 125.48c-1.79 5.74-4.38 16.66 1 18.42s55.64 19.48 59.79 17 29.34-83.43 23.25-85.62-19.54-7.18-20.29-7c0 0 2-7.78-3.15-9.91s-8.28-2.58-12.83 5c0 0-19.33-5.49-21.32-5S63.89 126 64.46 139c0 0 0 1.12 4.27 3.66s48.33 16 53.45 14.1 21.61-67.38 22.18-73.58-51.44-20.3-53.72-17.48c-2.12 2.63-7.5 19.17-13.52 35.9a78.29 78.29 0 00-2.28 7.36l-3.17 12.18a3.35 3.35 0 002.54 4.1 164 164 0 0016.41 2.14l10.8-2.82-6.87-5.94s-3.37 9.13-3.33 9.45 10.85-3.07 10.85-3.07l17.3-20.71s3-2.14-.33-4.15c-1.84-1.12-5.62-5.41-6.59-4.3-1.41 1.63-10.19 12.61-14.36 17.82a3.81 3.81 0 00.38 5.18c2.47 2.3 5.94 5.42 6.75 5.52s26.14-.32 42.29-.62"
+        />
+        <path
+          stroke="var(--zd_emptysvg_circle_fill)"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          d="M108.63 112.84l5.97-7.49"
+        />
       </SVG>
     );
   }
 }
 EmptyTask.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'])
 };
 EmptyTask.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
-
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyTask',
+  palette: 'default'
+};
 if (__DOCS__) {
-    EmptyTask.docs = {
+  EmptyTask.docs = {
     componentGroup: 'SVG'
   };
 }