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