Icon 图标

Silver UI 提供了一套常用的图标集合。

使用图标

如果你想像用例一样直接使用，你需要查找icon，才能够直接在项目里使用

<script lang="ts" setup>
import Icon from '@/components/Icon/Icon.vue'
</script>

<template>
  <div>
    <div class="icon-row">
      <Icon icon="fa-house" />
      <Icon icon="fa-circle-user" />
      <Icon icon="fa-user" />
      <Icon icon="fa-thumbs-up" />
      <Icon icon="fa-magnifying-glass" />
      <Icon icon="fa-arrow-right" />
      <Icon icon="fa-rotate-right" />
    </div>
    <div class="icon-row">
      <Icon icon="fa-house" type="primary" />
      <Icon icon="fa-circle-user" type="primary" />
      <Icon icon="fa-user" type="primary" />
      <Icon icon="fa-thumbs-up" type="primary" />
      <Icon icon="fa-magnifying-glass" type="primary" />
      <Icon icon="fa-arrow-right" type="primary" />
      <Icon icon="fa-rotate-right" type="primary" />
    </div>
  </div>
</template>

<style>
  .icon-row {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}
</style>

API

属性

属性名	说明	类型	可选值	默认值
type	Icon 类型	string	primary / success / warning / danger	—
size	按钮尺寸	string	2xs / xs / sm / lg/ xl/ 2xl / 1x / ...	—
color	颜色	string	—	—
icon	图标名	string	—	—