2029ff38b2
Former-commit-id: 4a1af7085d5d219fa49cb3bcde32bef16f5d69d6 Former-commit-id: 6fd5799f007bc736fcd20354835e908464f52355 Former-commit-id: fb88a361b3f8a5a05e6863fc34809753b6e560ee
52 lines
1019 B
Markdown
52 lines
1019 B
Markdown
# 图标
|
|
|
|
## 使用方法
|
|
|
|
基本
|
|
|
|
```
|
|
// 并无卵用的使用方式
|
|
<Icon></Icon>
|
|
// 指定图标名称
|
|
<Icon name="github"></Icon>
|
|
// 设置行内样式
|
|
<Icon name="github" style="font-size: 100px;"></Icon>
|
|
// 设置 class
|
|
<Icon name="github" class="icon-class-demo"></Icon>
|
|
```
|
|
|
|
这个组件只是简化了写法而已
|
|
|
|
```
|
|
<Icon name="github"></Icon>
|
|
// 等同于
|
|
<i class="fa fa-github" aria-hidden="true"></i>
|
|
```
|
|
|
|
## 参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
|
|
|
## 参考
|
|
|
|
推荐一个国内的图表索引 [Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
|
|
|
PS. 示例中最后一个图标的样式 `SCSS`
|
|
|
|
```
|
|
<style lang="scss">
|
|
.icon-class-demo {
|
|
transition: all .3s;
|
|
font-size: 100px;
|
|
color: #409EFF;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
&:hover{
|
|
color: #F56C6C;
|
|
transform: scale(1.2) rotate(30deg);
|
|
}
|
|
}
|
|
</style>
|
|
``` |