fix: icon change2

Signed-off-by: fan-mengwen <fan.mengwen@xsky.com>
xsky-fe · May 24, 2023 · 1c65bf7 · 1c65bf7
1 parent 3b26102
commit 1c65bf7
Show file tree

Hide file tree

Showing 26 changed files with 269 additions and 181 deletions.
diff --git a/README.md b/README.md
@@ -60,15 +60,15 @@ import 'wizard-ui/lib/style/index.css';
 ```jsx
 import { Icon } from 'wizard-ui';
 
-export default () => <Icon type="os-search-role" />
+export default () => <Icon type="os-search-role-fill" />
 ```
 
 > ES
 
 ```jsx
 import { Icon } from 'wizard-ui/esm';
 
-export default () => <Icon type="os-search-role" />
+export default () => <Icon type="os-search-role-fill" />
 ```
 
 ## Pubish

diff --git a/docs/content/components/icon.mdx b/docs/content/components/icon.mdx
@@ -2,45 +2,57 @@
 title: Icon 图标
 date: 2019-07-12
 ---
+
 由 [wizard icons](https://github.com/xsky-fe/icons) 通过 react svg 组件方式提供。
 
 ## 使用场景
-直观展示某个资源或者某种状态。
+
+wizard-ui 内部维护的 wizard-ui-icon 图标库, 直观展示某个资源或者某种状态。
 
 ## 代码演示
 
 ### 常规
+
 ```jsx
-<Icon type="os-search-role"/>
+<Icon type="os-search-role-fill" />
 ```
 
 ### 颜色
+
 ```jsx
-<Icon type="os-search-role" color="primary" />
+<Icon type="os-search-role-fill" color="primary" />
 ```
+
 ### 默认继承外部字体大小
+
 默认继承父级字体大小和颜色。
+
 ```jsx
 <div style={{ fontSize: '40px', color: '#6b58c4' }}>
   <Icon type="os-search-role" />
 </div>
 ```
+
 ### 交互
-添加cursor属性，实现鼠标hover和active交互效果，padding大小为6px;
+
+添加 cursor 属性，实现鼠标 hover 和 active 交互效果，padding 大小为 6px;
+
 ```jsx
 <Icon type="close" color="primary" cursor />
 ```
-### cursor也可以继承父级字体大小和颜色
+
+### cursor 也可以继承父级字体大小和颜色
+
 ```jsx
 <div style={{ fontSize: '40px', color: '#6b58c4' }}>
-  <Icon type="os-search-role" cursor/>
+  <Icon type="os-search-role" cursor />
 </div>
 ```
 
-
 ## 所有图标
+
 ```jsx previewOnly
-<AllIcon/>
+<AllIcon />
 ```
 
-## API
+## API
diff --git a/docs/content/components/navigation.mdx b/docs/content/components/navigation.mdx
@@ -4,28 +4,30 @@ date: 2019-06-20
 ---
 
 ## 基本用法
+
 ### 默认展示
+
 ```jsx
 () => {
-  const navs =  {
+  const navs = {
     overview: {
       title: '概览',
-      icon: 'overview',
+      icon: 'overview-line',
     },
     nav1: {
       title: '导航栏一',
       children: [
         {
           title: '选项一',
-          icon: 'volume',
+          icon: 'volume-line',
         },
         {
           title: '选项二',
-          icon: 'consistency-group',
+          icon: 'consistency-group-line',
         },
         {
           title: '选项三',
-          icon: 'access-target',
+          icon: 'access-target-line',
         },
       ],
     },
@@ -34,27 +36,28 @@ date: 2019-06-20
       children: [
         {
           title: '选项一',
-          icon: 'file-user',
+          icon: 'file-user-line',
         },
         {
           title: '选项二',
-          icon: 'fs-client',
+          icon: 'fs-client-line',
         },
       ],
     },
   };
   return (
-    <div style={{ width: '200px',   backgroundColor: '#2d3454' }}>
+    <div style={{ width: '200px', backgroundColor: '#2d3454' }}>
       <Navigation navGroups={navs} />
     </div>
-  )
-}
+  );
+};
 ```
 
 ### 交互
+
 ```jsx
 () => {
-  const navs =  {
+  const navs = {
     overview: {
       title: '概览',
       icon: 'overview',
@@ -64,15 +67,15 @@ date: 2019-06-20
       children: [
         {
           title: '选项一',
-          icon: 'volume',
+          icon: 'volume-line',
         },
         {
           title: '选项二',
-          icon: 'consistency-group',
+          icon: 'consistency-group-line',
         },
         {
           title: '选项三',
-          icon: 'access-target',
+          icon: 'access-target-line',
         },
       ],
     },
@@ -81,58 +84,66 @@ date: 2019-06-20
       children: [
         {
           title: '选项一',
-          icon: 'file-user',
+          icon: 'file-user-line',
         },
         {
           title: '选项二',
-          icon: 'fs-client',
+          icon: 'fs-client-line',
         },
       ],
     },
   };
-  const [ toggle, setToggle ] = React.useState(true);
+  const [toggle, setToggle] = React.useState(true);
   const handleClick = () => setToggle(!toggle);
   return (
     <div>
-      <Button bsStyle="primary" onClick={handleClick} style={{ marginBottom: 8 }}>
-        <Icon type={toggle ? 'slide-right' : 'slide-left'}/>
+      <Button
+        bsStyle="primary"
+        onClick={handleClick}
+        style={{ marginBottom: 8 }}
+      >
+        <Icon type={toggle ? 'menu-unfold-line' : 'menu-fold-line'} />
       </Button>
-      <div style={{ width: toggle ? '50px' : '200px',   backgroundColor: '#2d3454' }}>
-        <Navigation navGroups={navs} toggled={toggle} logo="Logo"/>
+      <div
+        style={{ width: toggle ? '50px' : '200px', backgroundColor: '#2d3454' }}
+      >
+        <Navigation navGroups={navs} toggled={toggle} logo="Logo" />
       </div>
     </div>
-  )
-}
+  );
+};
 ```
 
 ### 关联路由
+
 - 使用 `component` 属性可以定制组件内的结构，比如指定 a 标签
 - `expandedKeys` 默认展开面板
+
 ```jsx
 () => {
-  const navs =  {
+  const navs = {
     overview: {
       title: '概览',
-      icon: 'overview',
-      component: props => <a href="#" {...props}/>,
+      icon: 'overview-line',
+      component: props => <a href="#" {...props} />,
     },
     nav1: {
       title: '导航栏一',
       children: [
         {
           title: '选项一',
-          icon: 'volume',
-          component: props => <a href="#" {...props}/>,
+          icon: 'volume-line',
+          component: props => <a href="#" {...props} />,
         },
         {
           title: '选项二',
-          icon: 'consistency-group',
-          component: props => <a href="#" {...props}/>,
+          icon: 'consistency-group-line',
+          component: props => <a href="#" {...props} />,
         },
         {
           title: '选项三',
-          icon: 'access-target',
-          component: props => <a href="#" {...props}/>,
+          icon: 'access-target-line',
+          component: props => <a href="#" {...props} />,
         },
       ],
     },
@@ -141,30 +152,41 @@ date: 2019-06-20
       children: [
         {
           title: '选项一',
-          icon: 'file-user',
-          component: props => <a href="#" {...props}/>,
+          icon: 'file-user-line',
+          component: props => <a href="#" {...props} />,
         },
         {
           title: '选项二',
-          icon: 'fs-client',
-          component: props => <a href="#" {...props}/>,
+          icon: 'fs-client-line',
+          component: props => <a href="#" {...props} />,
         },
       ],
     },
   };
-  const [ toggle, setToggle ] = React.useState(true);
+  const [toggle, setToggle] = React.useState(true);
   const handleClick = () => setToggle(!toggle);
   return (
     <div>
-      <Button bsStyle="primary" onClick={handleClick} style={{ marginBottom: 8 }}>
-        <Icon type={toggle ? 'slide-right' : 'slide-left'}/>
+      <Button
+        bsStyle="primary"
+        onClick={handleClick}
+        style={{ marginBottom: 8 }}
+      >
+        <Icon type={toggle ? 'menu-unfold-line' : 'menu-fold-line'} />
       </Button>
-      <div style={{ width: toggle ? '50px' : '200px',   backgroundColor: '#2d3454' }}>
-        <Navigation expandedKeys={['nav2']} navGroups={navs} toggled={toggle} logo="Logo"/>
+      <div
+        style={{ width: toggle ? '50px' : '200px', backgroundColor: '#2d3454' }}
+      >
+        <Navigation
+          expandedKeys={['nav2']}
+          navGroups={navs}
+          toggled={toggle}
+          logo="Logo"
+        />
       </div>
     </div>
-  )
-}
+  );
+};
 ```
 
-## API
+## API
diff --git a/docs/content/components/tooltip.mdx b/docs/content/components/tooltip.mdx
@@ -2,25 +2,33 @@
 title: Tooltip 文字提示
 date: 2019-06-06
 ---
+
 文字提示气泡框。
 
 ## 使用方式
+
 鼠标移入显示提示，移出消失，气泡浮层不承载复杂文本和操作。
 
 用来替换默认 `title` 提示，提供解释文案。
 
 ## 基本用法
+
 ### 文本提示
+
 给文本提供说明文案。
+
 ```
 <Tooltip label={<span>鼠标移入会展示提示。</span>}>
   你好👋！
 </Tooltip>
 ```
+
 ### 提示方向
+
 - 可以指定提示展示的方向；
 - 如果不指定，默认是朝上 `top` 展示；
 - 不指定方向，根据 tooltip 在浏览器中的位置，在初次渲染时会调整展示方向，避免提示信息超出窗口，同时可能方便用户查看提示信息。
+
 ```
 <div className="flex-between">
   <Tooltip label={<Button>右 right</Button>} placement="right">
@@ -39,20 +47,25 @@ date: 2019-06-06
 ```
 
 ### 提示颜色
+
 默认提示背景是黑色，文案是白色。可以使用 `contrast` 调换。白色背景、黑色文案。
+
 ```
 <Tooltip contrast label={<Button>移入试试！</Button>}>
   你好👋！
 </Tooltip>
 ```
+
 ### 图标提示
+
 部分场景布局紧凑，无法完全展示信息内容，这时可以配合图标给出提示文案。默认是`提示 info`图标。
+
 ```
 <div>
   <Tooltip>提示！</Tooltip>
   <span style={{ paddingLeft: '40px' }} />
-  <Tooltip icon='help'>帮助！</Tooltip>
+  <Tooltip icon='question-line'>帮助！</Tooltip>
 </div>
 ```
 
-## API
+## API