mes-ui-d2/static/markdownFiles/article/组件 - 图标组件.md

# 图标

## 使用方法

基本

```
// 并无卵用的使用方式 等于 name="font-awesome"
<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>
```