Merge pull request mxdi9i7#29 from mxdi9i7/tobyz/buttonicon

add button icon

Author: mxdi9i7

src/components/Button/index.scss

@@ -40,6 +40,11 @@ a.#{$baseClass} {
     opacity: 0;
     content: ' ';
   }
+  &:first-child {
+    i {
+      margin: 0px;
+    }
+  }
 
   &:active {
     &::before {

src/components/Button/index.stories.tsx

@@ -114,7 +114,11 @@ export const BlockButtons = () => (
 
 export const IconButton = () => (
   <div className='container'>
-    <Button icon='https://img.yzcdn.cn/vant/logo.png'>
+    <Button icon='star-o' type='primary' />
+    <Button icon='star-o' type='info'>
+      Custom Icon Button
+    </Button>
+    <Button icon='https://img.yzcdn.cn/vant/logo.png' type='primary'>
       Custom Icon Button
     </Button>
   </div>

src/components/Button/index.tsx

@@ -4,15 +4,12 @@ import { renderLoadingIcon, getContrastTextColor, colorType } from './helper';
 import classnames from '../../utils/classNames';
 
 import { Props } from './types';
+import Icon from '../Icons';
 
 import './index.scss';
 
 const baseClass = 'vant-button';
 
-// TODO: add hairline props
-// TODO: enable icon buttons, need to have icon library done first
-// TODO: accept linear gradient
-
 export default function Button({
   text,
   children,
@@ -125,9 +122,13 @@ export default function Button({
     });
   }
 
+  const NAV_ICON_SIZE = '16px';
+
   return (
     <CustomTag {...props}>
-      {icon && <img src={icon} alt='button icon' />}
+      {icon?.includes('.') || icon?.includes('http')
+        ? icon && <img src={icon} alt='button icon' />
+        : icon && <Icon name={icon} size={NAV_ICON_SIZE} />}
       {loading
         ? renderLoadingIcon({
             className: loadingType