feat: using @zarm-design/icons

packages/zarm-icons/.svgo.yml

@@ -2,4 +2,5 @@ plugins:
   - removeAttrs:
       attrs:
         - 'fill'
-        - 'stroke'
+        - 'stroke'
+        - 'xmlns'

packages/zarm-icons/svgr.config.js

@@ -3,7 +3,10 @@ module.exports = {
   typescript: true,
   svgProps: {
     fill: 'currentColor',
+    focusable: false,
+    'aria-hidden': "true",
   },
+  ref: true,
   expandProps: false,
   template: require('./templates/compTemplate.js'),
   // indexTemplate: require('./templates/indexTemplate.js'),

packages/zarm-icons/templates/compTemplate.js

@@ -12,7 +12,7 @@ function defaultTemplate(
 import { Icon } from 'zarm';
 import type { IconProps } from 'zarm';
 
-const ${componentName} = (props: IconProps) => {
+const ${componentName} = (props: IconProps, svgRef?: React.Ref<SVGSVGElement>) => {
   return React.createElement(Icon, { ...props, component: () => ${jsx}});
 }
 

packages/zarm/src/keyboard/Keyboard.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import type { TouchEvent, MouseEvent } from 'react';
 import classnames from 'classnames';
+import { Keyboard as KeyboardIcon, DeleteKey as DeleteKeyIcon } from '@zarm-design/icons';
 import type PropsType from './PropsType';
-import Icon from '../icon';
 
 type KeyType = Exclude<PropsType['type'], undefined>;
 
@@ -64,7 +64,7 @@ export default class Keyboard extends PureComponent<KeyboardProps, {}> {
 
     return (
       <div className={keyCls} key={+index} onClick={() => this.onKeyClick(text)}>
-        {text === 'close' ? <Icon type="keyboard" size="lg" /> : text}
+        {text === 'close' ? <KeyboardIcon size="lg" /> : text}
       </div>
     );
   };
@@ -85,7 +85,7 @@ export default class Keyboard extends PureComponent<KeyboardProps, {}> {
             onMouseDown={() => this.onLongPressIn('delete')}
             onMouseUp={this.onLongPressOut}
           >
-            <Icon type="deletekey" size="lg" />
+            <DeleteKeyIcon size="lg" />
           </div>
           <div
             className={`${prefixCls}__item ${prefixCls}__item--ok`}

packages/zarm/src/keyboard/__tests__/__snapshots__/index.test.tsx.snap

@@ -64,18 +64,20 @@ exports[`Keyboard snapshot renders correctly 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--keyboard za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="keyboard"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#keyboard"
+          <path
+            d="M0 138h1000v600.537H0V138zm61.538 61.594v477.35h876.924v-477.35H61.538zm92.308 76.991h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H400v-76.992zm123.077 0H600v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H769.23v-76.992zM215.385 399.772h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.076 0h76.924v76.992h-76.924v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zM153.846 522.96h76.923v76.992h-76.923V522.96zm615.385 0h76.923v76.992H769.23V522.96zm-492.308 0h446.154v76.992H276.923V522.96zm138.462 246.374H600l-92.308 92.39-92.307-92.39z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>
@@ -88,18 +90,20 @@ exports[`Keyboard snapshot renders correctly 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--deletekey za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="deletekey"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#deletekey"
+          <path
+            d="M606.557 535.541l129.246 129.246 35.956-35.956-129.246-129.246L771.76 370.34l-35.956-35.956-129.246 129.246-129.246-129.246-35.956 35.956L570.6 499.585 441.355 628.831l35.956 35.956 129.246-129.246zm217.006-341.967c61.114 0 110.863 49.027 110.863 109.29v393.443c0 60.262-49.727 109.29-110.863 109.29H409.836a112.175 112.175 0 01-79.979-33.618L72.852 515.673l-.416-.438-.415-.415a21.093 21.093 0 01-6.426-15.257c0-4.044 1.115-9.989 6.426-15.257l.415-.415.416-.437L329.857 227.17a112.131 112.131 0 0179.979-33.64h413.727v.044zm0-65.574H427.519a177.18 177.18 0 00-126.973 53.465L25.857 437.77a86.842 86.842 0 000 123.65l274.689 256.306a177.18 177.18 0 00126.973 53.465h396.044c97.442 0 176.437-78.295 176.437-174.864V302.885C1000 206.295 921.005 128 823.563 128z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>
@@ -179,18 +183,20 @@ exports[`Keyboard snapshot type is idcard 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--keyboard za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="keyboard"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#keyboard"
+          <path
+            d="M0 138h1000v600.537H0V138zm61.538 61.594v477.35h876.924v-477.35H61.538zm92.308 76.991h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H400v-76.992zm123.077 0H600v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H769.23v-76.992zM215.385 399.772h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.076 0h76.924v76.992h-76.924v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zM153.846 522.96h76.923v76.992h-76.923V522.96zm615.385 0h76.923v76.992H769.23V522.96zm-492.308 0h446.154v76.992H276.923V522.96zm138.462 246.374H600l-92.308 92.39-92.307-92.39z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>
@@ -203,18 +209,20 @@ exports[`Keyboard snapshot type is idcard 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--deletekey za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="deletekey"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#deletekey"
+          <path
+            d="M606.557 535.541l129.246 129.246 35.956-35.956-129.246-129.246L771.76 370.34l-35.956-35.956-129.246 129.246-129.246-129.246-35.956 35.956L570.6 499.585 441.355 628.831l35.956 35.956 129.246-129.246zm217.006-341.967c61.114 0 110.863 49.027 110.863 109.29v393.443c0 60.262-49.727 109.29-110.863 109.29H409.836a112.175 112.175 0 01-79.979-33.618L72.852 515.673l-.416-.438-.415-.415a21.093 21.093 0 01-6.426-15.257c0-4.044 1.115-9.989 6.426-15.257l.415-.415.416-.437L329.857 227.17a112.131 112.131 0 0179.979-33.64h413.727v.044zm0-65.574H427.519a177.18 177.18 0 00-126.973 53.465L25.857 437.77a86.842 86.842 0 000 123.65l274.689 256.306a177.18 177.18 0 00126.973 53.465h396.044c97.442 0 176.437-78.295 176.437-174.864V302.885C1000 206.295 921.005 128 823.563 128z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>
@@ -294,18 +302,20 @@ exports[`Keyboard snapshot type is price 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--keyboard za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="keyboard"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#keyboard"
+          <path
+            d="M0 138h1000v600.537H0V138zm61.538 61.594v477.35h876.924v-477.35H61.538zm92.308 76.991h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H400v-76.992zm123.077 0H600v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992H769.23v-76.992zM215.385 399.772h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.076 0h76.924v76.992h-76.924v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zm123.077 0h76.923v76.992h-76.923v-76.992zM153.846 522.96h76.923v76.992h-76.923V522.96zm615.385 0h76.923v76.992H769.23V522.96zm-492.308 0h446.154v76.992H276.923V522.96zm138.462 246.374H600l-92.308 92.39-92.307-92.39z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>
@@ -318,18 +328,20 @@ exports[`Keyboard snapshot type is price 1`] = `
       class="za-keyboard__item"
     >
       <i
-        class="za-icon za-icon--deletekey za-icon--default za-icon--lg"
+        class="za-icon za-icon--default za-icon--lg"
         theme="default"
-        type="deletekey"
       >
         <svg
+          aria-hidden="true"
           fill="currentColor"
+          focusable="false"
           height="1em"
-          viewBox="0 0 32 32"
+          viewBox="0 0 1000 1000"
           width="1em"
         >
-          <use
-            href="#deletekey"
+          <path
+            d="M606.557 535.541l129.246 129.246 35.956-35.956-129.246-129.246L771.76 370.34l-35.956-35.956-129.246 129.246-129.246-129.246-35.956 35.956L570.6 499.585 441.355 628.831l35.956 35.956 129.246-129.246zm217.006-341.967c61.114 0 110.863 49.027 110.863 109.29v393.443c0 60.262-49.727 109.29-110.863 109.29H409.836a112.175 112.175 0 01-79.979-33.618L72.852 515.673l-.416-.438-.415-.415a21.093 21.093 0 01-6.426-15.257c0-4.044 1.115-9.989 6.426-15.257l.415-.415.416-.437L329.857 227.17a112.131 112.131 0 0179.979-33.64h413.727v.044zm0-65.574H427.519a177.18 177.18 0 00-126.973 53.465L25.857 437.77a86.842 86.842 0 000 123.65l274.689 256.306a177.18 177.18 0 00126.973 53.465h396.044c97.442 0 176.437-78.295 176.437-174.864V302.885C1000 206.295 921.005 128 823.563 128z"
+            fill-rule="nonzero"
           />
         </svg>
       </i>

packages/zarm/src/message/__tests__/__snapshots__/index.test.jsx.snap

@@ -1,31 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Message closable 1`] = `
-<div
-  className="za-message za-message--primary"
-  onClick={[Function]}
+<Message
+  closable={true}
+  hasArrow={false}
+  prefixCls="za-message"
+  theme="primary"
 >
   <div
-    className="za-message__header"
-  />
-  <div
-    className="za-message__body"
+    className="za-message za-message--primary"
+    onClick={[Function]}
   >
-    foo
-  </div>
-  <div
-    className="za-message__footer"
-  >
-    <Icon
-      onClick={[Function]}
-      prefixCls="za-icon"
-      size="md"
-      theme="default"
-      type="wrong"
-      viewBox="0 0 32 32"
+    <div
+      className="za-message__header"
     />
+    <div
+      className="za-message__body"
+    >
+      foo
+    </div>
+    <div
+      className="za-message__footer"
+    >
+      <ForwardRef(SvgClose)
+        onClick={[Function]}
+      >
+        <Icon
+          component={[Function]}
+          onClick={[Function]}
+          prefixCls="za-icon"
+          size="md"
+          theme="default"
+          viewBox="0 0 32 32"
+        >
+          <i
+            className="za-icon za-icon--default za-icon--md"
+            onClick={[Function]}
+            size="md"
+            theme="default"
+          >
+            <component
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 32 32"
+              width="1em"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                focusable={false}
+                height="1em"
+                viewBox="0 0 1000 1000"
+                width="1em"
+              >
+                <path
+                  d="M560.149 501.223l255.344 255.344c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L501.223 560.149 245.88 815.493c-16.272 16.272-42.654 16.272-58.925 0-16.272-16.272-16.272-42.654 0-58.926l255.344-255.344L186.954 245.88c-16.272-16.272-16.272-42.654 0-58.925 16.271-16.272 42.653-16.272 58.925 0l255.344 255.344 255.344-255.344c16.272-16.272 42.654-16.272 58.926 0 16.272 16.271 16.272 42.653 0 58.925L560.149 501.223z"
+                  fillRule="nonzero"
+                />
+              </svg>
+            </component>
+          </i>
+        </Icon>
+      </ForwardRef(SvgClose)>
+    </div>
   </div>
-</div>
+</Message>
 `;
 
 exports[`Message hasArrow 1`] = `
@@ -44,13 +83,7 @@ exports[`Message hasArrow 1`] = `
   <div
     className="za-message__footer"
   >
-    <Icon
-      prefixCls="za-icon"
-      size="md"
-      theme="default"
-      type="arrow-right"
-      viewBox="0 0 32 32"
-    />
+    <ForwardRef(SvgArrowRight) />
   </div>
 </div>
 `;

packages/zarm/src/message/__tests__/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Message from '../index';
 
@@ -38,9 +38,9 @@ describe('Message', () => {
   });
 
   it('closable', () => {
-    const wrapper = shallow(<Message closable>foo</Message>);
+    const wrapper = mount(<Message closable>foo</Message>);
     expect(toJson(wrapper)).toMatchSnapshot();
-    wrapper.find('Icon').simulate('click');
+    wrapper.find('.za-message__footer .za-icon').at(0).simulate('click');
     expect(wrapper.state('visible')).toEqual(false);
   });
 });

packages/zarm/src/message/index.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent, MouseEventHandler } from 'react';
 import classnames from 'classnames';
+import { Close as CloseIcon, ArrowRight as ArrowRightIcon } from '@zarm-design/icons';
 import PropsType from './PropsType';
-import Icon from '../icon';
 
 export interface MessageProps extends PropsType {
   prefixCls?: string;
@@ -49,8 +49,8 @@ export default class Message extends PureComponent<MessageProps, MessageState> {
     });
 
     const iconRender = icon && <div className={`${prefixCls}__icon`}>{icon}</div>;
-    const renderCloseIcon = closable && <Icon type="wrong" onClick={this.onClose} />;
-    const renderArrow = hasArrow && <Icon type="arrow-right" />;
+    const renderCloseIcon = closable && <CloseIcon onClick={this.onClose} />;
+    const renderArrow = hasArrow && <ArrowRightIcon />;
     const noFooter = !closable && !hasArrow;
 
     return (

packages/zarm/src/modal/ModalHeader.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
+import { Close as CloseIcon } from '@zarm-design/icons';
 import { BaseModalHeaderProps } from './PropsType';
-import Icon from '../icon';
 
 export interface ModalHeaderProps extends BaseModalHeaderProps {
   prefixCls?: string;
@@ -17,7 +17,7 @@ export default class ModalHeader extends PureComponent<ModalHeaderProps, {}> {
     const { prefixCls, className, title, closable, onCancel, ...others } = this.props;
     const cls = classnames(`${prefixCls}__header`, className);
     const btnClose = closable && (
-      <Icon type="wrong" size="sm" className={`${prefixCls}__header__close`} onClick={onCancel} />
+      <CloseIcon size="sm" className={`${prefixCls}__header__close`} onClick={onCancel} />
     );
     return (
       <div className={cls} {...others}>