svelte fa

Svelte-Fa

微小的通用组件。

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

文件和示例。

安装

npm install svelte-fa

通过官方软件包安装Fontawesome图标，例如：

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

图标画廊：fontawesome图标

与助推器一起工作

您可能需要将组件安装为DEV依赖性：

npm install svelte-fa -D

与Sveltekit/Vite一起工作

您可能需要明确导入以下内容：

 import Fa from \'svelte-fa/dist/fa.svelte\'
import { faCaretDown , faCaretUp } from \'@fortawesome/free-solid-svg-icons/index.es\'

使用Sveltekit/vite的TypeScript时，您可能还需要添加将重定向的定义添加到非index.es导出：

 // app.d.ts
declare module \'@fortawesome/pro-solid-svg-icons/index.es\' {
  export * from \'@fortawesome/pro-solid-svg-icons\' ;
} 

用法

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

< Fa icon = {faFlag} />
< Fa icon = {faGithub} /> 

Fa特性

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

• icon ：来自Fontawesome包装的图标，例如： @fortawesome/free-solid-svg-icons ，图标画廊：fontawesome图标
• class ： string值${your preffered any css class}
• 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 \'svelte-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图标

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

< Fa
  icon = {faFlag}
  primaryColor =\" red \"
  secondaryColor =\" #000000 \"
  primaryOpacity = {0.8}
  secondaryOpacity = {0.6}
  swapOpacity
/>

Duotone图标主题

 < script >
import Fa from \'svelte-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}
  {...theme}
/> 

贡献者