Icon 图标

语义化的矢量图形 ——该组件泛用性极强，对策性一般 (超大杯)

常用图标

引入了fontawesome图标库，具体图标名称请参考fontawesome官网ps：不支持pro角标的图标哦，露出贫穷的微笑 (￣ω￣)

常用图标

Classic Solid

Classic Regular

Classic Brands

<!-- 图标基本使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpIcon } from '@will1919/utopia-ui'
</script>

<template>
  <!-- 常用图标 -->
  <div class="group-box">
    <p>Classic Solid</p>
    <div class="group-content">
      <utp-icon icon="fa-solid fa-house"></utp-icon>
      <utp-icon icon="fa-solid fa-circle-user"></utp-icon>
      <utp-icon icon="fa-solid fa-image"></utp-icon>
      <utp-icon icon="fa-solid fa-file"></utp-icon>
      <utp-icon icon="fa-solid fa-camera"></utp-icon>
      <utp-icon icon="fa-solid fa-calendar"></utp-icon>
      <utp-icon icon="fa-solid fa-cloud"></utp-icon>
      <utp-icon icon="fa-solid fa-truck"></utp-icon>
      <utp-icon icon="fa-solid fa-thumbs-up"></utp-icon>
      <utp-icon icon="fa-solid fa-face-smile"></utp-icon>
      <utp-icon icon="fa-solid fa-headphones"></utp-icon>
      <utp-icon icon="fa-solid fa-bell"></utp-icon>
      <utp-icon icon="fa-solid fa-user"></utp-icon>
      <utp-icon icon="fa-solid fa-comment"></utp-icon>
      <utp-icon icon="fa-solid fa-envelope"></utp-icon>
      <utp-icon icon="fa-solid fa-magnifying-glass"></utp-icon>
    </div>
    <p>Classic Regular</p>
    <div class="group-content">
      <utp-icon icon="fa-regular fa-circle-user"></utp-icon>
      <utp-icon icon="fa-regular fa-image"></utp-icon>
      <utp-icon icon="fa-regular fa-file"></utp-icon>
      <utp-icon icon="fa-regular fa-calendar"></utp-icon>
      <utp-icon icon="fa-regular fa-thumbs-up"></utp-icon>
      <utp-icon icon="fa-regular fa-face-smile"></utp-icon>
      <utp-icon icon="fa-regular fa-bell"></utp-icon>
      <utp-icon icon="fa-regular fa-user"></utp-icon>
      <utp-icon icon="fa-regular fa-comment"></utp-icon>
      <utp-icon icon="fa-regular fa-envelope"></utp-icon>
      <utp-icon icon="fa-regular fa-font-awesome"></utp-icon>
      <utp-icon icon="fa-regular fa-star"></utp-icon>
      <utp-icon icon="fa-regular fa-heart"></utp-icon>
      <utp-icon icon="fa-regular fa-circle-xmark"></utp-icon>
      <utp-icon icon="fa-regular fa-calendar-days"></utp-icon>
      <utp-icon icon="fa-regular fa-clipboard"></utp-icon>
    </div>
    <p>Classic Brands</p>
    <div class="group-content">
      <utp-icon icon="fa-brands fa-font-awesome"></utp-icon>
      <utp-icon icon="fa-brands fa-web-awesome"></utp-icon>
      <utp-icon icon="fa-brands fa-github"></utp-icon>
      <utp-icon icon="fa-brands fa-bluesky"></utp-icon>
      <utp-icon icon="fa-brands fa-facebook"></utp-icon>
      <utp-icon icon="fa-brands fa-linkedin"></utp-icon>
      <utp-icon icon="fa-brands fa-discord"></utp-icon>
      <utp-icon icon="fa-brands fa-slack"></utp-icon>
      <utp-icon icon="fa-brands fa-algolia"></utp-icon>
      <utp-icon icon="fa-brands fa-figma"></utp-icon>
      <utp-icon icon="fa-brands fa-youtube"></utp-icon>
      <utp-icon icon="fa-brands fa-apple"></utp-icon>
      <utp-icon icon="fa-brands fa-google"></utp-icon>
      <utp-icon icon="fa-brands fa-pied-piper-hat"></utp-icon>
      <utp-icon icon="fa-brands fa-kickstarter"></utp-icon>
      <utp-icon icon="fa-brands fa-docker"></utp-icon>
    </div>
  </div>
</template>

<style scoped>
.group-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
</style>

Icon API

支持fontawesome的所有API，另外多加了自定义的API, 有关fontawesome的API请查看官网官方文档，或中文文档

属性

属性	说明	类型	默认值
type	设置图标主题	primary | success | info| error	—
color	设置图标颜色	string	—