ant-design/components/icon/index.md
2016-03-14 18:39:32 +08:00

165 lines
5.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Icon
- category: Components
- chinese: 图标
- type: 基本
---
有含义的矢量图形,每一个图标打倒一个敌人。
## 图标的命名规范
我们为每个图标赋予了语义化的命名,命名规则如下:
- 实心和描线图标保持同名,用 `-o` 来区分,比如 `question-circle`(实心) 和 `question-circle-o`(描线)
- 命名顺序:`[icon名]-[形状可选]-[描线与否]-[方向可选]`。
## 如何使用
使用 `<Icon />` 标签声明组件,指定图标对应的 type 属性,示例代码如下:
```html
<Icon type="link" />
```
最终会渲染为:
```html
<i class="anticon anticon-${type}"></i>
```
## 本地部署
图标组件使用 [iconfont.cn](http://iconfont.cn),默认公网可访问。如需本地部署,可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
## 图标列表
> 点击图标复制代码。
### 一. 方向性图标
<div id="iconset-direction"></div>
### 二. 提示建议性图标
<div id="iconset-hint"></div>
### 三. 网站通用图标
<div id="iconset-common"></div>
<style>
ul.anticons-list {
margin: 20px 0;
list-style: none;
overflow: hidden;
}
ul.anticons-list li {
float: left;
margin: 5px 5px 5px 0;
width: 155px;
text-align: center;
list-style: none;
cursor: pointer;
height: 110px;
color: #5C6B77;
transition: all 0.2s ease;
position: relative;
padding-top: 10px;
}
ul.anticons-list li:hover {
background-color: #4BB8FF;
color: #fff;
border-radius: 4px;
}
ul.anticons-list li.copied:hover {
color: rgba(255,255,255,0.2);
}
ul.anticons-list li:after {
position: absolute;
top: 10px;
left: 0;
height: 100%;
width: 100%;
content: "Copied!";
text-align: center;
line-height: 110px;
color: #fff;
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;
}
.anticon {
font-size: 26px;
margin: 12px 0 16px;
}
.anticon-class {
display: block;
text-align: center;
word-wrap: break-word;
transform: scale(0.83);
font-family: Consolas;
}
</style>
`````jsx
const Icon = antd.Icon;
const CopyableIcon = React.createClass({
getInitialState() {
return {
justCopied: false
};
},
onCopied(e) {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
this.setState({ justCopied: false });
}, 1000);
});
},
render() {
const text = '<Icon type="' + this.props.type + '" />';
return (
<CopyToClipboard text={text} onCopy={this.onCopied}>
<li className={this.state.justCopied ? 'copied' : ''}>
<Icon type={this.props.type} />
<span className="anticon-class">{this.props.type}</span>
</li>
</CopyToClipboard>
);
}
});
const IconSet = React.createClass({
getDefaultProps() {
return {
icons: []
};
},
render() {
return (
<ul className="anticons-list clearfix">
{this.props.icons.map((type, i) => <CopyableIcon key={i} type={type} />)}
</ul>
);
}
});
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
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'];
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', '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'];
ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));
ReactDOM.render(<IconSet icons={icons2} />, document.getElementById('iconset-hint'));
ReactDOM.render(<IconSet icons={icons3} />, document.getElementById('iconset-common'));
`````