sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c21ffa52e0970cc3dfa9ee8bcaf3792b6687d464
mes-ui-d2/static/markdownFiles/article/组件 - 图标组件.md
李杨 0643169f0d no message 
Former-commit-id: 47a7a9bc3043be945b5b7ac05adc761fe776bfaa
Former-commit-id: 368b7bdf350654c4ecfc51af6c374fc3b4a380ed
Former-commit-id: b124500f7ea527fff7ba5f0658811cf9033efd8e
2018-02-16 22:39:39 +08:00

1.0 KiB
Raw Blame History

参数

参数名 介绍 必选 值类型 可选值 默认值
name 图标名称 非 String font-awesome 所有图标名 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>

参考

图标索引

Font Awesome 中文网

fontawesome.com

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>