vue fa

vue–fa

Vue.J.

• Fontawesome 5和6
• Fontawesome SVG图标
• 摇晃的，只有导入的图标
• 无需CSS文件
• fontawesome分层
• Fontawesome Duotone图标

文件和示例。

安装

注意： vue-fa> = 3.x基于vue.js 3.x。

npm install vue-fa --save

旧版本：

vue-fa@2 => vue@2 [文档]

npm install vue-fa@2

例如，通过[官方软件包] [fontawesome-npm]安装fontawesome图标，例如：

npm install @fortawesome/free-solid-svg-icons

用法

 < template >
  < div >
    < Fa :icon =\" faFlag \" />
  </ div >
</ template >

< script >
  import Fa from \'vue-fa\'
  import { faFlag } from \'@fortawesome/free-solid-svg-icons\'

  export default {
    components : {
      Fa
    } ,

    setup ( ) {
      return {
        faFlag
      }
    }
  }
</ script > 

特性

 < Fa
  :icon =\" faFlag \"
  size =\" 2x \"
  color =\" #ff0000 \"
  fw
  pull =\" left \"
  :scale =\" 1.2 \"
  :translateX =\" 0.2 \"
  :translateY =\" 0.2 \"
  flip =\" horizontal \"
  :rotate =\" 90 \"
  spin
  pulse
/>

• icon ：Fontawesome包装的图标，例如： @fortawesome/free-solid-svg-icons
• size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，…， ${number}x
• color ： string图标颜色，默认的currentColor
• fw ： boolean固定宽度
• pull ：剩下string值left ， right
• scale ： number | string变换比例，单位为em ，默认1
• translateX ： number | string变换位置x，单元为em ，默认值0
• translateY ： number | string变换位置y，单位为em ，默认值0
• flip ： string值horizontal ， vertical ， both
• rotate ： number | string 30 90 -30 270 180
• spin ： boolean旋转图标
• pulse ： boolean脉冲旋转图标

分层和文本

 import Fa , {
  FaLayers ,
  FaLayersText ,
} from \'vue-fa\' ; 

 < FaLayers
  size =\" 4x \"
  pull =\" left \"
>
  < Fa :icon =\" faCertificate \" />
  < FaLayersText
    :scale =\" 0.25 \"
    :rotate =\" -30 \"
    color =\" white \"
    style =\" font-weight: 900 \"
  >
    NEW
  </ FaLayersText >
</ FaLayers >

FaLayers属性

• size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，…， ${number}x
• pull ：剩下string值left ， right

FaLayersText属性

• size ： string值xs ， sm ， lg或2x ， 3x ， 4x ，…， ${number}x
• color ： string图标颜色，默认的currentColor
• scale ： number | string变换比例，单位为em ，默认1
• translateX ： number | string变换位置x，单元为em ，默认值0
• translateY ： number | string变换位置y，单位为em ，默认值0
• flip ： string值horizontal ， vertical ， both
• rotate ： number | string 30 90 -30 270 180

Duotone图标

 import { faFlag } from \'@fortawesome/pro-duotone-svg-icons\' 

 < Fa
  :icon =\" faFlag \"
  primary-color =\" red \"
  secondary-color =\" #000000 \"
  :primary-opacity =\" 0.8 \"
  :secondary-opacity =\" 0.6 \"
  swap-opacity
/>

Duotone图标主题

 < script >
import Fa from \'vue-fa\'
import { faFlag } from \'@fortawesome/pro-duotone-svg-icons\'

const theme = {
  primaryColor : \'red\' ,
  secondaryColor : \'#000000\' ,
  primaryOpacity : 0.8 ,
  secondaryOpacity : 0.6 ,
}
</ script >

< Fa
  icon = {faFlag}
  v-bind =\" theme \"
/>