@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/icon/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon \`component\` prop can access to svg defs if has children 1`] = `
+<i class="anticon my-home-icon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+    <defs>
+      <linearGradient id="gradient">
+        <stop offset="20%" stopColor="#39F"></stop>
+        <stop offset="90%" stopColor="#F3F"></stop>
+      </linearGradient>
+    </defs>
+  </svg></i>
+`;
+
+exports[`Icon should give warning and render <i>{null}</i> 1`] = `<i class="anticon"></i>`;
+
+exports[`Icon should render to a <i class="xxx"><svg>...</svg></i> 1`] = `
+<i aria-label="icon: message" class="anticon anticon-message my-icon-classname"><svg viewBox="64 64 896 896" data-icon="message" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+    <path d="M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+  </svg></i>
+`;
+
+exports[`Icon should support basic usage 1`] = `
+<div><i aria-label="icon: home" class="anticon anticon-home"><svg viewBox="64 64 896 896" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path>
+    </svg></i><i aria-label="icon: setting" class="anticon anticon-setting"><svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M512.5 390.6c-29.9 0-57.9 11.6-79.1 32.8-21.1 21.2-32.8 49.2-32.8 79.1 0 29.9 11.7 57.9 32.8 79.1 21.2 21.1 49.2 32.8 79.1 32.8 29.9 0 57.9-11.7 79.1-32.8 21.1-21.2 32.8-49.2 32.8-79.1 0-29.9-11.7-57.9-32.8-79.1a110.96 110.96 0 0 0-79.1-32.8zm412.3 235.5l-65.4-55.9c3.1-19 4.7-38.4 4.7-57.7s-1.6-38.8-4.7-57.7l65.4-55.9a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a442.5 442.5 0 0 0-79.6-137.7l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.2 28.9c-30-24.6-63.4-44-99.6-57.5l-15.7-84.9a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52-9.4-106.8-9.4-158.8 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.3a353.44 353.44 0 0 0-98.9 57.3l-81.8-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a445.93 445.93 0 0 0-79.6 137.7l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.2 56.5c-3.1 18.8-4.6 38-4.6 57 0 19.2 1.5 38.4 4.6 57l-66 56.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.3 44.8 96.8 79.6 137.7l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.8-29.1c29.8 24.5 63 43.9 98.9 57.3l15.8 85.3a32.05 32.05 0 0 0 25.8 25.7l2.7.5a448.27 448.27 0 0 0 158.8 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-84.9c36.2-13.6 69.6-32.9 99.6-57.5l81.2 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.5-87.4 79.6-137.7l.9-2.6c4.3-12.4.6-26.3-9.5-35zm-412.3 52.2c-97.1 0-175.8-78.7-175.8-175.8s78.7-175.8 175.8-175.8 175.8 78.7 175.8 175.8-78.7 175.8-175.8 175.8z"></path>
+    </svg></i><i aria-label="icon: smile" class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path>
+    </svg></i><i aria-label="icon: sync" class="anticon anticon-sync"><svg viewBox="64 64 896 896" data-icon="sync" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
+      <path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
+    </svg></i><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
+      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+    </svg></i></div>
+`;
+
+exports[`Icon should support config global two-tone primary color 1`] = `
+<i aria-label="icon: check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+    <path fill="#1890ff" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    <path fill="#e6f7ff" d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm193.4 225.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.3 0 19.9 5 25.9 13.3l71.2 98.8 157.2-218c6-8.4 15.7-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.4 12.7z"></path>
+    <path fill="#1890ff" d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i>
+`;
+
+exports[`Icon should support older usage 1`] = `
+<div><i aria-label="icon: home-o" class="anticon anticon-home-o"><svg viewBox="64 64 896 896" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path>
+    </svg></i><i aria-label="icon: setting-fill" class="anticon anticon-setting-fill"><svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"></path>
+    </svg></i><i aria-label="icon: smile-o" class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path>
+    </svg></i><i aria-label="icon: check-circle-twotone" class="anticon anticon-check-circle-twotone"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    </svg></i></div>
+`;
+
+exports[`Icon should support pass svg paths as children 1`] = `
+<i class="anticon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="">
+    <title>Cool Home</title>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
+  </svg></i>
+`;
+
+exports[`Icon should support svg vue component 1`] = `
+<i class="anticon my-home-icon"><svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+    <title>Cool Home</title>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
+  </svg></i>
+`;
+
+exports[`Icon should support two-tone icon 1`] = `
+<i aria-label="icon: check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+    <path fill="#f5222d" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    <path fill="#fff1f0" d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm193.4 225.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.3 0 19.9 5 25.9 13.3l71.2 98.8 157.2-218c6-8.4 15.7-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.4 12.7z"></path>
+    <path fill="#f5222d" d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i>
+`;

package/src/components/icon/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('icon', { skip: ['custom.md'] });

package/src/components/icon/__tests__/index.test.js

@@ -0,0 +1,236 @@
+import { mount } from '@vue/test-utils';
+import Icon from '..';
+import VueIcon from '@ant-design/icons-vue';
+import { getThemeFromTypeName, withThemeSuffix } from '../utils';
+import { cloneElement } from '../../_util/vnode';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Icon', () => {
+  mountTest(Icon);
+
+  it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
+    const wrapper = mount({
+      render() {
+        return <Icon type="message" class="my-icon-classname" />;
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should support basic usage', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <div>
+            <Icon type="home" />
+            <Icon type="setting" theme="filled" />
+            <Icon type="smile" theme="outlined" />
+            <Icon type="sync" spin />
+            <Icon type="loading" />
+          </div>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should support older usage', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <div>
+            <Icon type="home-o" />
+            <Icon type="setting-fill" />
+            <Icon type="smile-o" />
+            <Icon type="check-circle-twotone" />
+          </div>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should support two-tone icon', () => {
+    const wrapper = mount({
+      render() {
+        return <Icon type="check-circle" theme="twoTone" twoToneColor="#f5222d" />;
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should support config global two-tone primary color', () => {
+    const colors = VueIcon.getTwoToneColors();
+    Icon.setTwoToneColor('#1890ff');
+    expect(Icon.getTwoToneColor()).toBe('#1890ff');
+    const wrapper = mount({
+      render() {
+        return <Icon type="check-circle" theme="twoTone" />;
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+    VueIcon.setTwoToneColors(colors);
+  });
+
+  it('should support pass svg paths as children', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Icon viewBox="0 0 24 24">
+            <title>Cool Home</title>
+            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+          </Icon>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should give warning and render <i>{null}</i>', () => {
+    const wrapper = mount({
+      render() {
+        return <Icon viewBox="0 0 24 24" />;
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should support custom usage of children', () => {
+    expect(() => {
+      mount({
+        render() {
+          return <Icon type="custom">&E648</Icon>;
+        },
+      });
+    }).not.toThrow();
+  });
+
+  describe('warning on conflicting theme', () => {
+    let errorSpy;
+    beforeEach(() => {
+      errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      errorSpy.mockRestore();
+    });
+
+    it('does not warn', () => {
+      mount({
+        render() {
+          return <Icon type="clock-circle-o" theme="outlined" />;
+        },
+      });
+      expect(errorSpy).not.toHaveBeenCalled();
+    });
+
+    it('warns', () => {
+      mount({
+        render() {
+          return <Icon type="clock-circle-o" theme="filled" />;
+        },
+      });
+      expect(errorSpy).toBeCalledWith(
+        "Warning: [antdv: Icon] The icon name 'clock-circle-o' already specify a theme 'outlined', the 'theme' prop 'filled' will be ignored.",
+      );
+    });
+  });
+
+  describe('`component` prop', () => {
+    it('can access to svg defs if has children', () => {
+      const wrapper = mount({
+        render() {
+          const component = {
+            render() {
+              return (
+                <svg>
+                  <defs>
+                    <linearGradient id="gradient">
+                      <stop offset="20%" stopColor="#39F" />
+                      <stop offset="90%" stopColor="#F3F" />
+                    </linearGradient>
+                  </defs>
+                  {this.$slots.default.map(child => {
+                    cloneElement(child, {
+                      attrs: child.type === 'path' ? { fill: 'scriptUrl(#gradient)' } : {},
+                    });
+                  })}
+                </svg>
+              );
+            },
+          };
+          return (
+            <Icon class="my-home-icon" component={component}>
+              <title>Cool Home</title>
+              <path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
+            </Icon>
+          );
+        },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  it('should support svg vue component', () => {
+    const SvgComponent = {
+      render() {
+        return (
+          <svg viewBox="0 0 24 24">
+            <title>Cool Home</title>
+            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+          </svg>
+        );
+      },
+    };
+
+    const wrapper = mount({
+      render() {
+        return (
+          <Icon class="my-home-icon" component={SvgComponent}>
+            <title>Cool Home</title>
+            <path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
+          </Icon>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
+
+describe('utils', () => {
+  it('getThemeFromTypeName() should work', () => {
+    const testCases = [
+      'check-circle',
+      'check-circle-o',
+      'check-circle-fill',
+      'check-circle-twotone',
+    ];
+    const result = testCases.map(type => getThemeFromTypeName(type));
+    expect(result).toEqual([null, 'outlined', 'filled', 'twoTone']);
+  });
+
+  it('withThemeSuffix() should work', () => {
+    const testCases = [
+      { type: 'home', theme: 'filled' },
+      { type: 'home', theme: 'outlined' },
+      { type: 'home', theme: 'twoTone' },
+      { type: 'home', theme: 'This-is-the-secret' },
+      { type: 'home-o', theme: 'filled' },
+      { type: 'home-fill', theme: 'outlined' },
+      { type: 'home-o', theme: 'twoTone' },
+      { type: 'home-o', theme: 'This-is-the-secret' },
+    ];
+    const result = testCases.map(({ type, theme }) => withThemeSuffix(type, theme));
+    expect(result).toEqual([
+      'home-fill',
+      'home-o',
+      'home-twotone',
+      'home',
+      'home-o-fill',
+      'home-fill-o',
+      'home-o-twotone',
+      'home-o',
+    ]);
+  });
+});

package/src/components/icon/index.js

@@ -0,0 +1,185 @@
+import classNames from 'classnames';
+import * as allIcons from '@ant-design/icons/lib/dist';
+import VueIcon from '@ant-design/icons-vue';
+import PropTypes from '../_util/vue-types';
+import createFromIconfontCN from './IconFont';
+import {
+  svgBaseProps,
+  withThemeSuffix,
+  removeTypeTheme,
+  getThemeFromTypeName,
+  alias,
+} from './utils';
+import warning from '../_util/warning';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
+import { filterEmpty, getListeners } from '../_util/props-util';
+import Base from '../base';
+
+// Initial setting
+
+// https://github.com/vueComponent/ant-design-vue/issues/2745
+VueIcon.add(
+  ...Object.keys(allIcons)
+    .filter(key => key !== 'default')
+    .map(key => allIcons[key]),
+);
+setTwoToneColor('#1890ff');
+const defaultTheme = 'outlined';
+let dangerousTheme;
+
+function renderIcon(h, locale, context) {
+  const { $props: props, $slots } = context;
+  const listeners = getListeners(context);
+  const {
+    // affect inner <svg>...</svg>
+    type,
+    component: Component,
+    viewBox,
+    spin,
+    // other
+    theme, // default to outlined
+    twoToneColor,
+    rotate,
+    tabIndex,
+  } = props;
+  let children = filterEmpty($slots.default);
+  children = children.length === 0 ? undefined : children;
+  warning(
+    Boolean(type || Component || children),
+    'Icon',
+    'Icon should have `type` prop or `component` prop or `children`.',
+  );
+
+  const classString = classNames({
+    [`anticon`]: true,
+    [`anticon-${type}`]: !!type,
+  });
+
+  const svgClassString = classNames({
+    [`anticon-spin`]: !!spin || type === 'loading',
+  });
+
+  const svgStyle = rotate
+    ? {
+        msTransform: `rotate(${rotate}deg)`,
+        transform: `rotate(${rotate}deg)`,
+      }
+    : undefined;
+
+  const innerSvgProps = {
+    attrs: {
+      ...svgBaseProps,
+      viewBox,
+    },
+    class: svgClassString,
+    style: svgStyle,
+  };
+  if (!viewBox) {
+    delete innerSvgProps.attrs.viewBox;
+  }
+
+  const renderInnerNode = () => {
+    // component > children > type
+    if (Component) {
+      return <Component {...innerSvgProps}>{children}</Component>;
+    }
+    if (children) {
+      warning(
+        Boolean(viewBox) || (children.length === 1 && children[0].tag === 'use'),
+        'Icon',
+        'Make sure that you provide correct `viewBox`' +
+          ' prop (default `0 0 1024 1024`) to the icon.',
+      );
+      const innerSvgProps = {
+        attrs: {
+          ...svgBaseProps,
+        },
+        class: svgClassString,
+        style: svgStyle,
+      };
+      return (
+        <svg {...innerSvgProps} viewBox={viewBox}>
+          {children}
+        </svg>
+      );
+    }
+
+    if (typeof type === 'string') {
+      let computedType = type;
+      if (theme) {
+        const themeInName = getThemeFromTypeName(type);
+        warning(
+          !themeInName || theme === themeInName,
+          'Icon',
+          `The icon name '${type}' already specify a theme '${themeInName}',` +
+            ` the 'theme' prop '${theme}' will be ignored.`,
+        );
+      }
+      computedType = withThemeSuffix(
+        removeTypeTheme(alias(computedType)),
+        dangerousTheme || theme || defaultTheme,
+      );
+
+      return (
+        <VueIcon
+          focusable="false"
+          class={svgClassString}
+          type={computedType}
+          primaryColor={twoToneColor}
+          style={svgStyle}
+        />
+      );
+    }
+  };
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && 'click' in listeners) {
+    iconTabIndex = -1;
+  }
+  // functional component not support nativeOn，https://github.com/vuejs/vue/issues/7526
+  const iProps = {
+    attrs: {
+      'aria-label': type && `${locale.icon}: ${type}`,
+      tabIndex: iconTabIndex,
+    },
+    on: listeners,
+    class: classString,
+    staticClass: '',
+  };
+  return <i {...iProps}>{renderInnerNode()}</i>;
+}
+
+const Icon = {
+  name: 'AIcon',
+  props: {
+    tabIndex: PropTypes.number,
+    type: PropTypes.string,
+    component: PropTypes.any,
+    viewBox: PropTypes.any,
+    spin: PropTypes.bool.def(false),
+    rotate: PropTypes.number,
+    theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
+    twoToneColor: PropTypes.string,
+    role: PropTypes.string,
+  },
+  render(h) {
+    return (
+      <LocaleReceiver
+        componentName="Icon"
+        scopedSlots={{ default: locale => renderIcon(h, locale, this) }}
+      />
+    );
+  },
+};
+
+Icon.createFromIconfontCN = createFromIconfontCN;
+Icon.getTwoToneColor = getTwoToneColor;
+Icon.setTwoToneColor = setTwoToneColor;
+
+/* istanbul ignore next */
+Icon.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(Icon.name, Icon);
+};
+
+export default Icon;

package/src/components/icon/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/src/components/icon/style/index.less

@@ -0,0 +1,4 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@icon-prefix-cls: ~'@{ant-prefix}-icon';

package/src/components/icon/twoTonePrimaryColor.js

@@ -0,0 +1,12 @@
+import VueIcon from '@ant-design/icons-vue';
+
+export function setTwoToneColor(primaryColor) {
+  return VueIcon.setTwoToneColors({
+    primaryColor,
+  });
+}
+
+export function getTwoToneColor() {
+  const colors = VueIcon.getTwoToneColors();
+  return colors.primaryColor;
+}

package/src/components/icon/utils.js

@@ -0,0 +1,77 @@
+import warning from '../_util/warning';
+
+// These props make sure that the SVG behaviours like general text.
+// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+export const svgBaseProps = {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  'aria-hidden': 'true',
+  focusable: 'false',
+};
+
+const fillTester = /-fill$/;
+const outlineTester = /-o$/;
+const twoToneTester = /-twotone$/;
+
+export function getThemeFromTypeName(type) {
+  let result = null;
+  if (fillTester.test(type)) {
+    result = 'filled';
+  } else if (outlineTester.test(type)) {
+    result = 'outlined';
+  } else if (twoToneTester.test(type)) {
+    result = 'twoTone';
+  }
+  return result;
+}
+
+export function removeTypeTheme(type) {
+  return type
+    .replace(fillTester, '')
+    .replace(outlineTester, '')
+    .replace(twoToneTester, '');
+}
+
+export function withThemeSuffix(type, theme) {
+  let result = type;
+  if (theme === 'filled') {
+    result += '-fill';
+  } else if (theme === 'outlined') {
+    result += '-o';
+  } else if (theme === 'twoTone') {
+    result += '-twotone';
+  } else {
+    warning(false, 'Icon', `This icon '${type}' has unknown theme '${theme}'`);
+  }
+  return result;
+}
+
+// For alias or compatibility
+export function alias(type) {
+  let newType = type;
+  switch (type) {
+    case 'cross':
+      newType = 'close';
+      break;
+    // https://github.com/ant-design/ant-design/issues/13007
+    case 'interation':
+      newType = 'interaction';
+      break;
+    // https://github.com/ant-design/ant-design/issues/16810
+    case 'canlendar':
+      newType = 'calendar';
+      break;
+    // https://github.com/ant-design/ant-design/issues/17448
+    case 'colum-height':
+      newType = 'column-height';
+      break;
+    default:
+  }
+  warning(
+    newType === type,
+    'Icon',
+    `Icon '${type}' was a typo and is now deprecated, please use '${newType}' instead.`,
+  );
+  return newType;
+}