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 | string3090-30270180 -
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 | string3090-30270180
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}
/> 贡献者
Cweili | Marekdědič | gtmnayan | 鲁·索萨（Rui Sousa） | 西奥多·布朗 | mirco sanguineti |
Alon Krymgand | 康纳 | 卡萨尔·艾哈迈德（Kawsar Ahmed） | 马克·沃尔克曼 | Robin Modisch | RémiKalbe |
无效的 |
下载源码
通过命令行克隆项目:
git clone https://github.com/Cweili/svelte-fa.git