Icon

系统支持使用symbol的方式对icon做引用， 推荐使用 xicons 作为图标库。

系统图标

图标

引用各种iconfont图标

<script setup lang="ts">
const icons = [
  "cl-icon-wancheng",
  "cl-icon-jinxingzhong",
  "cl-icon-arrow-right",
  "cl-icon-arrow-left",
  "cl-icon-arrow-double-left",
  "cl-icon-arrow-double-right",
  "cl-icon-close",
  "cl-icon-info",
  "cl-icon-success",
  "cl-icon-warning",
  "cl-icon-reset",
  "cl-icon-mingwen",
  "cl-icon-hide",
  "cl-icon-add",
  "cl-icon-subtract",
  "cl-icon-yonghu",
  "cl-icon-arrow-down",
  "cl-icon-error",
  "cl-icon-arrow-up",
  "cl-icon-circle-close",
  "cl-icon-loading"
];
</script>
<template>
  <div class="icons">
    <cl-icon v-for="icon in icons" class="icon-item" :iconName="icon"  ></cl-icon>
  </div>
</template>

<style lang="scss">
.icons{
  display: flex;
  flex-wrap: wrap;
  font-size: 28px;
  width: 100%;
  .icon-item{
    flex-basis: 8%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
  }
}
</style>

xicons库图标

图标

引用各种iconfont图标

<script setup lang="ts">
import { GameControllerOutline, GameController } from "@vicons/ionicons5";
</script>
<template>
  <div class="icons">
    <cl-icon class="icon-item">
      <GameControllerOutline></GameControllerOutline>
    </cl-icon>
    <cl-icon class="icon-item" color="#0e7a0d">
      <GameController></GameController>
    </cl-icon>
    <cl-icon class="icon-item">
      <GameController></GameController>
    </cl-icon>
  </div>
</template>

<style lang="scss">
.icons {
  display: flex;
  flex-wrap: wrap;
  font-size: 28px;
  width: 100%;
  .icon-item {
    flex-basis: 8%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
  }
}
</style>

API

Icon Props

名称	类型	默认值	描述
icon属性	string		icon的名字
color	string		自定义icon的颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）