refector(icons): rename icons name add suffix outlined (#250)

* build(father-build): update fatherrc & rename icon

* refactor(icons): rename icons add suffix outlined|filled|twotone

* fix(storybook): title error

* fix(icons): fix some svg problems

windows-outlined,star-outlined

* refactor(icon): set svg default size to 1em

* chore(fatherrc): nothing

.fatherrc.js

@@ -1,16 +1,71 @@
-export default {
-  cjs: 'babel',
+const common = {
+  runtimeHelpers: true,
+};
+
+const dev = {
+  entry: ['src/index.ts', 'src/style.ts'],
+  autoprefixer: {
+    flexbox: 'no-2009',
+  },
+  esm: 'rollup',
+  overridesByEntry: {
+    'src/index.ts': {
+      esm: { file: 'index' },
+    },
+    'src/style.ts': {
+      esm: { file: 'icons' },
+    },
+  },
+};
+
+const esm = {
+  entry: 'src/index.ts',
+  esm: {
+    type: 'babel',
+  },
+  lessInBabelMode: false,
+};
+
+const cjs = {
   entry: 'src/index.ts',
-  esm: 'babel',
+  cjs: {
+    type: 'babel',
+  },
+  lessInBabelMode: false,
+};
+
+const umd = {
+  entry: ['src/index.ts', 'src/style.ts'],
+  autoprefixer: {
+    flexbox: 'no-2009',
+  },
   extractCSS: true,
-  file: 'icons',
-  lessInBabelMode: true,
-  runtimeHelpers: true,
   umd: {
     globals: {
       react: 'React',
     },
     minFile: true,
-    sourcemap: true,
+  },
+  overridesByEntry: {
+    'src/index.ts': {
+      umd: { name: 'ufs', file: 'index' },
+    },
+    'src/style.ts': {
+      umd: { file: 'icons' },
+    },
   },
 };
+
+const configMap = {
+  dev,
+  esm,
+  cjs,
+  umd,
+};
+
+const buildType = process.env.NODE_ENV === 'development' ? 'dev' : process.env.BUILD_TYPE;
+
+export default {
+  ...common,
+  ...configMap[buildType],
+};

.storybook/theme.js

@@ -3,7 +3,7 @@ import { getPreferredColorScheme } from '@storybook/theming/dist/esm/utils';
 
 const baseTheme = {
   fontBase: '"PingFang SC", sans-serif',
-  brandTitle: 'GrowingIO Design Charts',
+  brandTitle: 'GrowingIO Design Icons',
   brandUrl: 'https://www.growingio.com',
 };
 

.svgrrc.js

@@ -31,6 +31,9 @@ module.exports = {
       }
     ]
   },
+  svgProps:{
+    focusable:false
+  },
   expandProps: 'end',
   semi: true,
   typescript: true,

CONTRIBUTING.zh-CN.md

@@ -23,6 +23,6 @@
 
 ## 添加（更新）图标过程
 
-1. 拿到设计师提供的 `svg` 文件后，检查命名是否规范；线框图标，后缀用 `-outlined`，填充的图标用 `-filled`,如果只存在一种类型 不需要填写后缀；
+1. 拿到设计师提供的 `svg` 文件后，检查命名是否规范；线框图标，后缀用 `-outlined`，填充的图标用 `-filled`；
 2. 放在 `svgs` 目录下；
 3. 运行 `yarn storybook` 预览 Icon。

README.en-US.md

@@ -22,11 +22,11 @@ $ yarn add @gio-design/icons
 
 ```javascript
 import React, { ReactDOM } from 'react';
-import { Gear } from '@gio-design/icons';
+import { GearOutlined } from '@gio-design/icons';
 
 ReactDOM.render(
   <>
-    <Gear />
+    <GearOutlined />
   </>,
   mountNode
 );

build-umd

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const util = require('util');
+const { exec } = require('child_process');
+const path = require('path');
+
+const execSync = util.promisify(exec);
+const getRelativePath = pathStr => path.join(__dirname, pathStr);
+
+const build = async () => {
+  console.info('start build umd...');
+
+  await execSync('father-build');
+  await fs.removeSync(getRelativePath('./dist/icons.js'));
+  await fs.removeSync(getRelativePath('./dist/icons.min.js'));
+  await fs.moveSync(getRelativePath('./dist/icons.css'), getRelativePath('./dist/index.css'));
+  await fs.moveSync(getRelativePath('./dist/icons.min.css'), getRelativePath('./dist/index.min.css'));
+  await fs.removeSync(getRelativePath('./dist/style.d.ts'))
+};
+
+build();

demos/0.Icons.stories.tsx

@@ -5,7 +5,8 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import * as allIcons from '../src';
 import { categories } from './fields';
 import './icons.css';
-import { Search } from '../src';
+import '../src/Wrapper.css'
+import { SearchOutlined } from '../src';
 export default {
   title: 'Icons',
   component: IconList,
@@ -24,7 +25,8 @@ interface ItemProps {
 }
 interface CategoryProps {
   icons: string[],
-  title: string
+  title: string,
+  theme?: string,
 }
 // const allIcons: {
 //   [key: string]: any;
@@ -44,8 +46,9 @@ function Item({ title, icon }: ItemProps) {
     </CopyToClipboard>
   );
 }
-function Category({ icons = [], title, ...iconProps }: CategoryProps) {
-  const items = icons.map(name => allIcons[name] && <Item key={name} title={name} icon={React.createElement(allIcons[name], { ...iconProps })}></Item>);
+function Category({ icons = [], title, theme, ...iconProps }: CategoryProps) {
+  const themeIcons = theme ? icons.filter(i => i.endsWith(theme)) : icons;
+  const items = themeIcons.map(name => allIcons[name] && <Item key={name} title={name} icon={React.createElement(allIcons[name], { ...iconProps })}></Item>).filter(Boolean);
   return items?.length > 0 && (
     <div>
       <h3 className='icons-category-title'>{title}<small>({items?.length})</small></h3>
@@ -54,7 +57,7 @@ function Category({ icons = [], title, ...iconProps }: CategoryProps) {
 }
 function filterIcons(iconKeys: string[], kw: string) {
   if (kw?.trim()) {
-    return iconKeys.filter((k: string) => k.toLowerCase().includes(kw?.trim()));
+    return iconKeys.filter((k: string) => k.toLowerCase().replace(/(outlined|filled|twotone)$/i, '').includes(kw?.trim()));
   }
   return iconKeys;
 }
@@ -88,7 +91,7 @@ function IconList({ keyword, ...iconProps }: IconListProps) {
       <div className='search-bar'>
         <input type='text' placeholder='输入icon名称搜索' onChange={(e) => setSearchKey(e.target.value)} />
         <div className='suffix'>
-          <Search/>
+          <SearchOutlined />
         </div>
       </div>
       <div className='divider'></div>
@@ -105,5 +108,26 @@ export const AllIcons = Template.bind({});
 AllIcons.args = {
   color: '',
   rotating: false,
+  size: '1em'
 };
 
+export const Outlined = Template.bind({});
+Outlined.args = {
+  color: '',
+  rotating: false,
+  theme: 'Outlined'
+};
+
+export const Filled = Template.bind({});
+Filled.args = {
+  color: '',
+  rotating: false,
+  theme: 'Filled'
+};
+
+export const TwoTone = Template.bind({});
+TwoTone.args = {
+  color: '',
+  rotating: false,
+  theme: 'TwoTone'
+};

demos/1.Examples.stories.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { Gear } from '../src';
+import { GearOutlined } from '../src';
 import { IconProps } from '../src/interfaces';
+import '../src/Wrapper.css';
 
 export default {
   title: 'Examples',
-  component: Gear,
-  // decorators: [(Story, context) => <div style={{
-  //   display: 'inline-block', padding: '20px',
-  // }}>{Story()}</div>]
+  component: GearOutlined,
 } as Meta;
 
 const Template: Story<IconProps> = (args) =>
-  <Gear {...args} />
+  <GearOutlined {...args} />
 
 export const Default = Template.bind({});
 Default.args = {

demos/fields.ts

@@ -2,65 +2,65 @@ import * as GIOIcons from '../src';
 export const all = Object.keys(GIOIcons);
 
 const user: string[] = [
-  'user',
-  'user-tie',
-  'user-search',
-  'user-bars',
-  'user-tgi',
-  'user-group',
-  'user-screen',
-  'id',
-  'user-plus',
-  'user-service'
+  'user-outlined',
+  'user-tie-outlined',
+  'user-search-outlined',
+  'user-bars-outlined',
+  'user-tgi-outlined',
+  'user-group-outlined',
+  'user-screen-outlined',
+  'id-outlined',
+  'user-plus-filled',
+  'user-service-filled'
 ]
 const data: string[] = [
-  'database',
-  'data-upload',
-  'variable',
-  'string',
-  'number',
-  'boolean',
-  'terminal',
-  'date',
-  'array',
-  'sql',
-  'line-chart',
-  'column-chart',
-  'bar-chart',
-  'bubble-chart',
-  'pie-chart',
-  'curve-chart',
-  'number-chart',
-  'table',
-  'mixed-column-chart',
-  'mixed-line-chart',
-  'calculate',
-  'click',
-  'gauge',
-  'code',
-  'condition'
+  'database-outlined',
+  'data-upload-outlined',
+  'variable-outlined',
+  'string-outlined',
+  'number-outlined',
+  'boolean-outlined',
+  'terminal-outlined',
+  'date-outlined',
+  'array-outlined',
+  'sql-outlined',
+  'line-chart-outlined',
+  'column-chart-outlined',
+  'bar-chart-outlined',
+  'bubble-chart-outlined',
+  'pie-chart-outlined',
+  'curve-chart-outlined',
+  'number-chart-outlined',
+  'table-outlined',
+  'mixed-column-chart-outlined',
+  'mixed-line-chart-outlined',
+  'calculate-outlined',
+  'click-outlined',
+  'gauge-outlined',
+  'code-outlined',
+  'condition-outlined'
 ]
 const platform: string[] = [
-  'mobile',
+  'mobile-outlined',
   'mobile-filled',
-  'desktop',
+  'desktop-outlined',
   'desktop-filled',
-  'tablet',
+  'tablet-outlined',
   'tablet-filled',
-  'browser',
-  'browser-key',
-  'browser-eye',
-  'wechat',
+  'browser-outlined',
+  'browser-key-outlined',
+  'browser-eye-outlined',
+  'wechat-outlined',
   'wechat-filled',
-  'alipay',
+  'alipay-outlined',
   'alipay-filled',
-  'windows',
   'windows-filled',
-  'apple',
+  'windows-outlined',
+  'apple-outlined',
   'apple-filled',
-  'android',
+  'android-outlined',
   'android-filled',
-  'mini-program',
+  'mini-program-outlined',
   'mini-program-filled'
 ]
 

demos/icons.css

@@ -8,6 +8,8 @@
   border-radius: 2px;
   cursor: pointer;
   user-select: none;
+  color: #242E59;
+  position: relative;
 }
 
 .icon-item-inner-container {
@@ -16,11 +18,13 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  transition:all 0.25s ease-in-out;
 }
 
 .icon-item-inner-container > .gio-icon {
   display: inline-block;
   margin-bottom: 10px;
+  transition: transform 0.3s ease-in-out 0s ;
 }
 
 .icon-item-inner-container > .icon-item-title {
@@ -37,6 +41,10 @@
 
 .icon-item-container:hover {
   border: 2px solid #4177f6;
+
+}
+.icon-item-container:hover .gio-icon {
+  transform: scale(1.4);
 }
 .icons-category-title {
   color: #7b819c;