ant-design/components/icon/index.zh-CN.md
ddcat1115 0baef0627e docs: 调整组件导航结构 (#3758)
- Layout 更名为 Grid
2016-11-09 14:43:32 +08:00

131 lines
2.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.

---
category: Components
subtitle: 图标
type: General
title: Icon
toc: false
---
语义化的矢量图形。
## 图标的命名规范
我们为每个图标赋予了语义化的命名,命名规则如下:
- 实心和描线图标保持同名,用 `-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)。
## 图标列表
> 点击图标复制代码。
### 方向性图标
```__react
import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="direction" />, mountNode);
```
### 提示建议性图标
```__react
ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
```
### 网站通用图标
```__react
ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
```
## Props
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| type | 图标类型 | string | - |
| spin | 是否有旋转动画 | boolean | false |
<style>
.markdown .icons {
width: 100%;
}
ul.anticons-list {
margin: 40px 0;
list-style: none;
overflow: hidden;
}
ul.anticons-list li {
float: left;
width: 16.66%;
text-align: center;
list-style: none;
cursor: pointer;
height: 100px;
color: #555;
transition: all 0.2s ease;
position: relative;
margin: 3px 0;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
padding: 10px 0 0 0;
}
ul.anticons-list li:hover {
background-color: #eaf8fe;
}
ul.anticons-list li.copied:hover {
color: rgba(255,255,255,0.2);
}
ul.anticons-list li:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "Copied!";
text-align: center;
line-height: 110px;
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: -10px;
}
.anticon {
font-size: 24px;
margin: 12px 0 16px;
transition: all .3s;
}
ul.anticons-list li:hover .anticon {
transform: scale(1.4);
}
.anticon-class {
display: block;
text-align: center;
transform: scale(0.83);
font-family: Consolas;
white-space: nowrap;
}
</style>