mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
update icon doc
This commit is contained in:
afc163
parent
0e6f677ff9
commit
d2effd165b
@ -37,7 +37,7 @@ By default, icon components uses [iconfont.cn](http://iconfont.cn), publicly ava
|
||||
|
||||
> Click the icon and copy the code。
|
||||
|
||||
### 一. Directional Icons
|
||||
### Directional Icons
|
||||
|
||||
```__react
|
||||
import IconSet from 'site/theme/template/IconSet';
|
||||
@ -46,7 +46,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons1} key="icons1" />, mountNode);
|
||||
```
|
||||
|
||||
### 二. Suggested Icons
|
||||
### Suggested Icons
|
||||
|
||||
```__react
|
||||
const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
|
||||
@ -54,7 +54,7 @@ const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plu
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons2} key="icons2" />, mountNode);
|
||||
```
|
||||
|
||||
### 三. Universal Icons
|
||||
### Other Icons
|
||||
|
||||
```__react
|
||||
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf','file-excel', 'file-jpg', 'file-ppt', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o'];
|
||||
@ -62,57 +62,61 @@ const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart',
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons3} key="icons3" />, mountNode);
|
||||
```
|
||||
|
||||
|
||||
<style>
|
||||
.markdown .icons {
|
||||
width: 100%;
|
||||
}
|
||||
ul.anticons-list {
|
||||
margin: 20px 0;
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul.anticons-list li {
|
||||
float: left;
|
||||
margin: 6px 6px 6px 0;
|
||||
width: 145px;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 100px;
|
||||
color: #5C6B77;
|
||||
color: #555;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
ul.anticons-list li:hover {
|
||||
background-color: #4BB8FF;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #eaf8fe;
|
||||
}
|
||||
ul.anticons-list li.copied:hover {
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
ul.anticons-list li:after {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "Copied!";
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
color: #2db7f5;
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0;
|
||||
}
|
||||
ul.anticons-list li.copied:after {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
top: -10px;
|
||||
}
|
||||
.anticon {
|
||||
font-size: 26px;
|
||||
font-size: 22px;
|
||||
margin: 12px 0 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
ul.anticons-list li:hover .anticon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
.anticon-class {
|
||||
display: block;
|
||||
|
||||
@ -38,7 +38,7 @@ toc: false
|
||||
|
||||
> 点击图标复制代码。
|
||||
|
||||
### 一. 方向性图标
|
||||
### 方向性图标
|
||||
|
||||
```__react
|
||||
import IconSet from 'site/theme/template/IconSet';
|
||||
@ -47,7 +47,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons1} key="icons1" />, mountNode);
|
||||
```
|
||||
|
||||
### 二. 提示建议性图标
|
||||
### 提示建议性图标
|
||||
|
||||
```__react
|
||||
const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
|
||||
@ -55,7 +55,7 @@ const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plu
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons2} key="icons2" />, mountNode);
|
||||
```
|
||||
|
||||
### 三. 网站通用图标
|
||||
### 网站通用图标
|
||||
|
||||
```__react
|
||||
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf','file-excel', 'file-jpg', 'file-ppt', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o'];
|
||||
@ -63,57 +63,61 @@ const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart',
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons3} key="icons3" />, mountNode);
|
||||
```
|
||||
|
||||
|
||||
<style>
|
||||
.markdown .icons {
|
||||
width: 100%;
|
||||
}
|
||||
ul.anticons-list {
|
||||
margin: 20px 0;
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul.anticons-list li {
|
||||
float: left;
|
||||
margin: 6px 6px 6px 0;
|
||||
width: 145px;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 100px;
|
||||
color: #5C6B77;
|
||||
color: #555;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
ul.anticons-list li:hover {
|
||||
background-color: #4BB8FF;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #eaf8fe;
|
||||
}
|
||||
ul.anticons-list li.copied:hover {
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
ul.anticons-list li:after {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "Copied!";
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
color: #2db7f5;
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0;
|
||||
}
|
||||
ul.anticons-list li.copied:after {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
top: -10px;
|
||||
}
|
||||
.anticon {
|
||||
font-size: 26px;
|
||||
font-size: 22px;
|
||||
margin: 12px 0 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
ul.anticons-list li:hover .anticon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
.anticon-class {
|
||||
display: block;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user