feat(icon): minimize icon size ; update doc;

yehuozhili · Jun 18, 2020 · be254eb · be254eb
1 parent 85ce63e
commit be254eb
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 14 deletions.
diff --git a/src/components/Button/_style.scss b/src/components/Button/_style.scss
@@ -45,7 +45,6 @@
     @include neufactory($white, $neu-whiteshadow1,$neu-whiteshadow2);
 
     border:1px dashed lighten($btn-link-color,10%);
-    box-shadow: none;
     color: $btn-link-color;
     font-weight: $font-weight-base;
     text-decoration: $link-decoration;
@@ -59,6 +58,7 @@
     &.disabled{
         color:$btn-link-disabled-color;
         pointer-events: none;
+        border:1px dashed $btn-link-disabled-color;
     }
 }
 

diff --git a/src/components/Icon/_style.scss b/src/components/Icon/_style.scss
@@ -2,4 +2,14 @@
      .icon-#{$key}{
         color:#{nth($val,1)};
      }
+ }
+
+ @keyframes fa-spin{
+     0%{
+         filter: blur(0px);
+         transform:rotate(0deg)
+    }
+     100%{
+        filter: blur(0px); 
+        transform: rotate(360deg);}
  }
diff --git a/src/components/Icon/icon.stories.mdx b/src/components/Icon/icon.stories.mdx
@@ -15,14 +15,14 @@ https://fontawesome.com/icons?d=gallery&s=solid&m=free
 
 ## 基础使用
 
-注意：超过1dpr设备使用未设置大小的icon并且使用spin等动效会导致模糊，需要设置size
+注意：超过1dpr设备使用spin等动效可能会模糊，再次刷新页面即可正常，原因暂不明。
 
 <Preview>
   <Story name='base' >
   <div>
 <Icon icon='search' ></Icon>
 <Icon icon='spinner' spin size='2x'></Icon>
-<Icon icon='cog' pulse size='2x'></Icon>
+<Icon icon='coffee' pulse size='2x'></Icon>
 <Icon icon='spinner' flip='vertical' size='2x'></Icon>
 <Icon icon='spinner' flip='both' size='2x'></Icon>
 <Icon  icon="spinner" transform={{ rotate: 1 }} size='2x'></Icon>
@@ -54,20 +54,86 @@ https://fontawesome.com/icons?d=gallery&s=solid&m=free
 </Preview>
 
 
-```tsx
-import { library } from '@fortawesome/fontawesome-svg-core' 
-import { fab } from '@fortawesome/free-brands-svg-icons' //brand
-import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'//solid的单独图标
-import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons'
-import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons'
+## 推荐使用按需导入方式
 
-library.add(...some icons)
+导入library,然后添加你想用的图标，添加进library，当然如果觉得麻烦，可以`import { fas } from "@fortawesome/free-solid-svg-icons";`
+添加fas进library。注意，这种方式虽然简单，但体积量大。
 
+比如你想添加个spinner（默认library已有这个图标）,那么就按如下方式导入。之后正常使用Icon就能出现图标。
+
+```jsx
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner"; // 注意结尾必须有，否则需要配按需加载或者靠treeShaking
+
+library.add(faTimes);
 ```
 
+## 默认提供 
+
+默认提供以下图标，不在此处图标需要按照上面方法按需导入。
+
+<Preview>
+  <Story name='defaulticon' >
+        <div>
+<Icon icon='coffee' ></Icon>
+<Icon icon='info-circle' ></Icon>
+<Icon icon='spinner' ></Icon>
+<Icon icon='ad' ></Icon>
+<Icon icon='adress-book' ></Icon>
+<Icon icon='anchor' ></Icon>
+<Icon icon='arrow-left' ></Icon>
+<Icon icon='arrow-down' ></Icon>
+<Icon icon='arrow-right' ></Icon>
+<Icon icon='arrow-up' ></Icon>
+<Icon icon='question-circle' ></Icon>
+<Icon icon='times' ></Icon>
+<Icon icon='user' ></Icon>
+<Icon icon='search' ></Icon>
+<Icon icon='cog' ></Icon>
+<Icon icon='circle' ></Icon>
+<Icon icon='angle-down' ></Icon>
+<Icon icon='angle-left' ></Icon>
+<Icon icon='angle-right' ></Icon>
+<Icon icon='angle-up' ></Icon>
+<Icon icon='bell' ></Icon>
+<Icon icon='times-circle' ></Icon>
+<Icon icon='exclamation-circle' ></Icon>
+<Icon icon='bookmark' ></Icon>
+<Icon icon='check-circle' ></Icon>
+<Icon icon='map-market-alt' ></Icon>
+<Icon icon='atom' ></Icon>
+<Icon icon='filter' ></Icon>
+        </div>
+  </Story>
+</Preview>
+
+
+
+
 ## tree shaking
+
+已测试只要不是引入整个大类，一个个引入正常情况是可以treeshaking掉的。
+并不需要自己进行额外设置。
+
 https://fontawesome.com/how-to-use/javascript-api/other/tree-shaking
 
+## babel配置按需加载（你可能不需要这个）
+
+插件
+babel-plugin-transform-imports
+
+```json
+{
+    "plugins": [
+      ["transform-imports", {
+        "@fortawesome/free-solid-svg-icons": {
+          "transform": "@fortawesome/free-solid-svg-icons/${member}",
+          "skipDefaultConversion": true
+        }
+      }]
+    ]
+  }
+```
 
 ## 属性详情
 

diff --git a/src/components/Icon/icon.tsx b/src/components/Icon/icon.tsx
@@ -2,8 +2,65 @@ import React, { FC } from "react";
 import classNames from "classnames";
 import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { fas } from "@fortawesome/free-solid-svg-icons";
-library.add(fas);
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
+import { faAd } from "@fortawesome/free-solid-svg-icons/faAd";
+import { faAddressBook } from "@fortawesome/free-solid-svg-icons/faAddressBook";
+import { faAnchor } from "@fortawesome/free-solid-svg-icons/faAnchor";
+import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
+import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
+import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
+import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
+import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
+import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons/faAngleDown";
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
+import { faAngleUp } from "@fortawesome/free-solid-svg-icons/faAngleUp";
+import { faBell } from "@fortawesome/free-solid-svg-icons/faBell";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
+import { faBookmark } from "@fortawesome/free-solid-svg-icons/faBookmark";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
+import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
+import { faAtom } from "@fortawesome/free-solid-svg-icons/faAtom";
+import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
+
+library.add(
+	faCoffee,
+	faInfoCircle,
+	faSpinner,
+	faAd,
+	faAddressBook,
+	faAnchor,
+	faArrowLeft,
+	faArrowDown,
+	faArrowRight,
+	faArrowUp,
+	faQuestionCircle,
+	faTimes,
+	faUser,
+	faSearch,
+	faCog,
+	faCircle,
+	faAngleDown,
+	faAngleLeft,
+	faAngleRight,
+	faAngleUp,
+	faBell,
+	faTimesCircle,
+	faExclamationCircle,
+	faBookmark,
+	faCheckCircle,
+	faMapMarkerAlt,
+	faAtom,
+	faFilter
+);
 
 export type ThemeProps =
 	| "primary"

diff --git a/src/components/Input/_style.scss b/src/components/Input/_style.scss
@@ -1,8 +1,6 @@
 .bigbear-input-wrapper{
     @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
-
     align-items: center;
-    box-shadow: $input-box-shadow;
     display: flex;
     margin-bottom: $input-margin;
     overflow: hidden;