Icon

基于 Font Awesome 免费图标二次封装
Font Awesome | free

Note 注意

在使用 Icon 组件前需加载 Font Awesome 默认图标

TIP

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

基础用法

❣️view the code❣️

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

---

<xyIcon icon="coffee"></xyIcon>

不同主题

❣️view the code❣️

<xyIcon icon="coffee"></xyIcon>
<xyIcon icon="coffee" theme="danger"></xyIcon>
<xyIcon icon="coffee" theme="secondary"></xyIcon>
<xyIcon icon="coffee" theme="success"></xyIcon>
<xyIcon icon="coffee" theme="info"></xyIcon>
<xyIcon icon="coffee" theme="warning"></xyIcon>
<xyIcon icon="coffee" theme="light"></xyIcon>
<xyIcon icon="coffee" theme="dark"></xyIcon>

不同尺寸

❣️view the code❣️

<xyIcon icon="coffee" size="2xs"></xyIcon>
<xyIcon icon="coffee"></xyIcon>
<xyIcon icon="coffee" size="2xl"></xyIcon>
<xyIcon icon="coffee" size="10x"></xyIcon>

Props 属性

更多属性参考 Font Awesome 的 FontAwesomeIconProps

属性名	属性类型	说明	默认值
theme	oneOf "primary" | "danger" | "secondary" | "success" | "info" | "warning" | "light" | "dark"	设置 Icon 主题	primary
className	string	自定义CSS类名	-
icon	IconProp	icon名字	-

FontAwesomeIconProps接口

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