<template>
 <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Icon</div>
    </div>
    <h3>使用示例</h3>
    <h4>基本示例</h4>
    <Grid :columnNum="4" :square="true" :activeStyle="false" :hasLine="false">
      <GridItem><Icon type="heart-solid"></Icon></GridItem>
      <GridItem><Icon type="camera-solid"></Icon></GridItem>
      <GridItem><Icon type="user-solid"></Icon></GridItem>
      <GridItem><Icon type="tag-solid"></Icon></GridItem>
    </Grid>
    <h4>修改颜色</h4>
    <Grid :columnNum="4" :square="true" :activeStyle="false" :hasLine="false">
      <GridItem><Icon type="heart-solid" :color="['#ff5555']"></Icon></GridItem>
      <GridItem><Icon type="camera-solid" :color="['#1089ff']"></Icon></GridItem>
      <GridItem><Icon type="user-solid" :color="['#ff8e00']"></Icon></GridItem>
      <GridItem><Icon type="tag-solid" :color="['#03c03c']"></Icon></GridItem>
    </Grid>
    <h4>修改大小</h4>
    <Grid :columnNum="4" :square="true" :activeStyle="false" :hasLine="false">
      <GridItem><Icon type="heart-solid" size="xs"></Icon></GridItem>
      <GridItem><Icon type="camera-solid" size="sm"></Icon></GridItem>
      <GridItem><Icon type="user-solid" size="md"></Icon></GridItem>
      <GridItem><Icon type="tag-solid" size="lg"></Icon></GridItem>
    </Grid>
    <h4>所有图标</h4>
    <Grid :columnNum="4" :square="true" :activeStyle="false" :hasLine="false">
      <GridItem>
        <Icon type="check"></Icon>
        <span class="name">check</span>
      </GridItem>
      <GridItem>
        <Icon type="star"></Icon>
        <span class="name">star</span>
      </GridItem>
      <GridItem>
        <Icon type="star-o"></Icon>
        <span class="name">star</span>
      </GridItem>
      <GridItem>
        <Icon type="check-circle"></Icon>
        <span class="name">check-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="check-circle-o"></Icon>
        <span class="name">check-circle-o</span>
      </GridItem>
      <GridItem>
        <Icon type="cross"></Icon>
        <span class="name">cross</span>
      </GridItem>
      <GridItem>
        <Icon type="cross-circle"></Icon>
        <span class="name">cross-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="cross-circle-o"></Icon>
        <span class="name">cross-circle-o</span>
      </GridItem>
      <GridItem>
        <Icon type="left"></Icon>
        <span class="name">left</span>
      </GridItem>
      <GridItem>
        <Icon type="right"></Icon>
        <span class="name">right</span>
      </GridItem>
      <GridItem>
        <Icon type="down"></Icon>
        <span class="name">down</span>
      </GridItem>
      <GridItem>
        <Icon type="up"></Icon>
        <span class="name">up</span>
      </GridItem>
      <GridItem>
        <Icon type="loading"></Icon>
        <span class="name">loading</span>
      </GridItem>
      <GridItem>
        <Icon type="search"></Icon>
        <span class="name">search</span>
      </GridItem>
      <GridItem>
        <Icon type="ellipsis"></Icon>
        <span class="name">ellipsis</span>
      </GridItem>
      <GridItem>
        <Icon type="ellipsis-circle"></Icon>
        <span class="name">ellipsis-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="exclamation-circle"></Icon>
        <span class="name">exclamation-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="info-circle"></Icon>
        <span class="name">einfo-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="question-circle"></Icon>
        <span class="name">question-circle</span>
      </GridItem>
      <GridItem>
        <Icon type="voice"></Icon>
        <span class="name">voice</span>
      </GridItem>
      <GridItem>
        <Icon type="plus"></Icon>
        <span class="name">plus</span>
      </GridItem>
      <GridItem>
        <Icon type="minus"></Icon>
        <span class="name">minus</span>
      </GridItem>
      <GridItem>
        <Icon type="heart-regular"></Icon>
        <span class="name">heart-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="heart-solid"></Icon>
        <span class="name">heart-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-up"></Icon>
        <span class="name">arrow-up</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-down"></Icon>
        <span class="name">arrow-down</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-left"></Icon>
        <span class="name">arrow-left</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-right"></Icon>
        <span class="name">arrow-right</span>
      </GridItem>
      <GridItem>
        <Icon type="folder-open-regular"></Icon>
        <span class="name">folder-open-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="folder-open-solid"></Icon>
        <span class="name">folder-open-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="folder-closed-regular"></Icon>
        <span class="name">folder-closed-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="folder-closed-solid"></Icon>
        <span class="name">folder-closed-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-regular"></Icon>
        <span class="name">file-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-solid"></Icon>
        <span class="name">file-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-audio-regular"></Icon>
        <span class="name">file-audio-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-audio-solid"></Icon>
        <span class="name">file-audio-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-video-regular"></Icon>
        <span class="name">file-video-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-video-solid"></Icon>
        <span class="name">file-video-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-image-regular"></Icon>
        <span class="name">file-image-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-image-solid"></Icon>
        <span class="name">file-image-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-zipper-regular"></Icon>
        <span class="name">file-zipper-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-zipper-solid"></Icon>
        <span class="name">file-zipper-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-word-regular"></Icon>
        <span class="name">file-word-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-word-solid"></Icon>
        <span class="name">file-word-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-excel-regular"></Icon>
        <span class="name">file-excel-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-excel-solid"></Icon>
        <span class="name">file-excel-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-powerpoint-regular"></Icon>
        <span class="name">file-powerpoint-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-powerpoint-solid"></Icon>
        <span class="name">file-powerpoint-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="file-pdf-regular"></Icon>
        <span class="name">file-pdf-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="file-pdf-solid"></Icon>
        <span class="name">file-pdf-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="eye-regular"></Icon>
        <span class="name">eye-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="eye-solid"></Icon>
        <span class="name">eye-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="eye-slash-regular"></Icon>
        <span class="name">eye-slash-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="eye-slash-solid"></Icon>
        <span class="name">eye-slash-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="user-regular"></Icon>
        <span class="name">user-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="user-solid"></Icon>
        <span class="name">user-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="image-regular"></Icon>
        <span class="name">image-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="image-solid"></Icon>
        <span class="name">image-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="download"></Icon>
        <span class="name">download</span>
      </GridItem>
      <GridItem>
        <Icon type="upload"></Icon>
        <span class="name">upload</span>
      </GridItem>
      <GridItem>
        <Icon type="share"></Icon>
        <span class="name">share</span>
      </GridItem>
      <GridItem>
        <Icon type="trash"></Icon>
        <span class="name">trash</span>
      </GridItem>
      <GridItem>
        <Icon type="square-plus-regular"></Icon>
        <span class="name">square-plus-regular</span>
      </GridItem>
      <GridItem>
        <Icon type="camera-solid"></Icon>
        <span class="name">camera-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="tag-solid"></Icon>
        <span class="name">tag-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="bars-solid"></Icon>
        <span class="name">bars-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="copy-solid"></Icon>
        <span class="name">copy-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="paste-solid"></Icon>
        <span class="name">paste-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="keyboard-solid"></Icon>
        <span class="name">keyboard-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="delete-left-solid"></Icon>
        <span class="name">delete-left-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="circle-xmark-solid"></Icon>
        <span class="name">circle-xmark-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="circle-exclamation-solid"></Icon>
        <span class="name">circle-exclamation-solid</span>
      </GridItem>

      <GridItem>
        <Icon type="barcode-solid"></Icon>
        <span class="name">barcode-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="cart-shopping-solid"></Icon>
        <span class="name">cart-shopping-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="house-solid"></Icon>
        <span class="name">house-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-rotate-solid"></Icon>
        <span class="name">arrow-rotate-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-rotate-right-solid"></Icon>
        <span class="name">arrow-rotate-right-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="arrow-rotate-left-solid"></Icon>
        <span class="name">arrow-rotate-left-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="stop-solid"></Icon>
        <span class="name">stop-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="play-solid"></Icon>
        <span class="name">play-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="pause-solid"></Icon>
        <span class="name">pause-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="circle-stop-solid"></Icon>
        <span class="name">circle-stop-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="circle-play-solid"></Icon>
        <span class="name">circle-play-solid</span>
      </GridItem>
      <GridItem>
        <Icon type="circle-pause-solid"></Icon>
        <span class="name">circle-pause-solid</span>
      </GridItem>
    </Grid>
  </div>
</template>

<style lang="less" scoped>
.name {
  display: inline-block;
  min-height: 24px;
  font-size: 12px;
  padding: 16px 8px;
  color: #999999;
}
</style>