fa svelte

字体下载 2025-08-10

FA-SVELTE

Svelte v3.x的Fontawesome 5

(对于Svelte V2,使用FA-Svelte v1.xx)

关于

一个简单的简约轻巧的Svelte组件,用于字体很棒的SVG图标。

  • 小足迹
  • 仅二手图标会捆绑
  • 没有依赖性
  • 仅SVG(无字体)
  • 不需要其他CSS文件

该库目前未打算充分展示该库,当大小和速度非常重要时,这是选择。

安装

作为开发依赖性安装

npm install -D fa-svelte

用法

基本用法

使用字体很棒的固体图标,首先使用NPM安装它们

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

 < Icon icon = {icon} >
 Icon >

< script >
import Icon from 'fa-svelte'
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'

let icon = faCircle ;
 script >

课程

">
 < div >
  < Icon class =" myClass1 myClass2 " icon = {faCircle} >
   Icon >
 div >

< script >
import Icon from 'fa-svelte'
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'

let icon = faCircle ;
 script >
< style >

div : global (. myClass1 ) {
    color : red;
}

div : global (. myClass2 ) {
    font-size : 14 px ;
}
 style > 

配置WebPack

如果您使用的是带有Svelte-Loader的WebPack,请确保将"svelte"添加到webpack配置中的resolve.mainFields 。这样可以确保WebPack导入未编译的组件( src/Icon.svelte ),而不是编译版本( index.js ) - 这更有效,并且还可以在运行时解决组件崩溃。

有关工作的Web包示例,请查看示例/webpack

学分

该组件基于Sveltejs提供的模板

下载源码

通过命令行克隆项目:

git clone https://github.com/alphapeter/fa-svelte.git