Icon 图标

安装

• pnpm i --save @fortawesome/vue-fontawesome
• pnpm i --save @fortawesome/fontawesome-svg-core
• pnpm i --save @fortawesome/free-solid-svg-icons

Use

在 main.js 中引入

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas);

基础用法

<script setup>
import KIcon from "@/components/Icon/Icon.vue";
</script>
<template>
  <div>
    <k-icon icon="fa-bomb" :fade="true" type="primary" size="xl"></k-icon>
    <k-icon icon="fa-face-smile" type="success" size="xl"></k-icon>
    <k-icon icon="fa-poo" type="warning" size="xl"></k-icon>
    <k-icon icon="fa-ghost" type="danger" size="xl"></k-icon>
  </div>
</template>

更多图标参考 fontawesome 图标库 https://origin.fontawesome.com/docs

Attributes

属性名	说明	类型	默认值
color	颜色	string	—
type	icon	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
size	大小	enum - '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' |'10x'	'1x'
icon	图标名称	object | Array<string> | string | IconDefinition
fade	显示隐藏动画	boolean	false

更多 icon 属性请查看

interface FontAwesomeIconProps {
  border?: boolean;
  fixedWidth?: boolean;
  flip?: "horizontal" | "vertical" | "both";
  icon: object | Array<string> | string | IconDefinition;
  mask?: object | Array<string> | string;
  maskId?: object | Array<string> | string;
  listItem?: boolean;
  pull?: "right" | "left";
  pulse?: boolean;
  rotation?: 90 | 180 | 270 | "90" | "180" | "270";
  swapOpacity?: boolean;
  size?:
    | "2xs"
    | "xs"
    | "sm"
    | "lg"
    | "xl"
    | "2xl"
    | "1x"
    | "2x"
    | "3x"
    | "4x"
    | "5x"
    | "6x"
    | "7x"
    | "8x"
    | "9x"
    | "10x";
  spin?: boolean;
  transform?: object | string;
  symbol?: boolean | string;
  title?: string;
  titleId?: string;
  inverse?: boolean;
  bounce?: boolean;
  shake?: boolean;
  beat?: boolean;
  fade?: boolean;
  beatFade?: boolean;
  spinPulse?: boolean;
  spinReverse?: boolean;
}