Icon 图标

图标组件使用了 fortawesome 为图标库，更多图标请查看 Font Awesome

如何使用

引入

import { library } from '@fortawesome/fontawesome-svg-core'
// 这里要使用什么图标，那么就引入什么图标，按需引入
import { faCheck, faHouse, faUser } from '@fortawesome/free-solid-svg-icons'
library.add(faCheck, faHouse, faUser)

// 如果对于大小不在乎，也可以全部引入
// import { fas } from '@fortawesome/free-solid-svg-icons'
// library.add(fas)

使用：去掉 fa 前缀即可

<sp-icon icon="check"></sp-icon>

基础用法

通过type和color可以设置图标的颜色

<template>
  <div class="demo-container">
    <sp-icon icon="check" />
    <sp-icon icon="house" />
    <sp-icon icon="user" />
  </div>
  <div class="demo-container">
    <sp-icon icon="check" type="primary" />
    <sp-icon icon="house" type="warning" />
    <sp-icon icon="user" type="success" />
    <sp-icon icon="image" type="danger" />
    <sp-icon icon="xmark" type="info" />
  </div>
  <div class="demo-container">
    <sp-icon icon="check" color="pink" />
    <sp-icon icon="house" color="#999" />
    <sp-icon icon="user" color="#f00" />
  </div>
</template>

<script setup lang="ts">
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faCheck,
  faHouse,
  faImage,
  faUser,
  faXmark,
} from '@fortawesome/free-solid-svg-icons'
library.add(faCheck, faHouse, faUser, faImage, faXmark)
</script>

<style scoped>
.sp-icon {
  margin: 6px;
  font-size: 20px;
}
</style>

使用 svg 图标

也可以使用自己的 svg 图标，只需要放在默认插槽即可

<template>
  <div class="demo-container">
    <sp-icon color="pink">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path
          fill="currentColor"
          d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
        />
      </svg>
    </sp-icon>
  </div>
</template>

<style scoped>
.sp-icon {
  margin: 6px;
  font-size: 20px;
}
</style>

fortawesome Api

具体可以查看 api 文档

spin 和 pulse

flip : 水平或垂直翻转图标。

rotation : 旋转图标（90°，180° 或 270°）。

transform : 对图标进行更加细粒度的变换，如缩放、移动等。

pull : 对图标进行更加细粒度的变换，如缩放、移动等。

mask : 通过 mask 实现遮罩效果，叠加两个图标。

<template>
  <div class="demo-container">
    <div>spin 和 pulse</div>
    <sp-icon icon="xmark" type="primary" spin />
    <sp-icon icon="xmark" type="primary" pulse />
  </div>

  <div class="demo-container">
    <div>flip : 水平或垂直翻转图标。</div>
    <sp-icon icon="image" type="primary" />
    <sp-icon icon="image" type="primary" flip="horizontal" />
    <sp-icon icon="image" type="primary" flip="vertical" />
  </div>

  <div class="demo-container">
    <div>rotation : 旋转图标（90°，180° 或 270°）。</div>
    <sp-icon icon="image" type="primary" />
    <sp-icon icon="image" type="primary" :rotation="90" />
  </div>

  <div class="demo-container">
    <div>transform : 对图标进行更加细粒度的变换，如缩放、移动等。</div>
    <sp-icon icon="image" type="primary" />
    <sp-icon icon="image" type="primary" transform="shrink-6" />
  </div>

  <div class="demo-container">
    <div>pull : 对图标进行更加细粒度的变换，如缩放、移动等。</div>
    <sp-icon icon="image" type="primary" pull="right" />
  </div>

  <div class="demo-container">
    <div>mask : 通过 mask 实现遮罩效果，叠加两个图标。</div>
    <sp-icon icon="xmark" type="primary" mask="image" />
  </div>
</template>

<script setup lang="ts">
import { library } from '@fortawesome/fontawesome-svg-core'
import { faImage, faXmark } from '@fortawesome/free-solid-svg-icons'
library.add(faXmark, faImage)
</script>

<style scoped>
.sp-icon {
  font-size: 20px;
  margin-right: 20px;
}
</style>