在 Svelte 和 SvelteKit 项目中高效集成 FontAwesome
npm install @fortawesome/free-solid-svg-iconssvelte-fa 是 Svelte 集成的推荐包
如何在 Svelte 组件中使用 FontAwesome 图标
<script>
import { faHome, faUser, faGear, faSpinner } from '@fortawesome/free-solid-svg-icons';
</script>
<div>
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user" style="font-size: 2em;"></i>
<i class="fa-solid fa-gear fa-spin"></i>
</div>
与 Tailwind CSS 搭配使用效果更佳:
<div class="text-blue-500 text-2xl">
<i class="fa-solid fa-house"></i>
</div>svelte-fa 组件支持多种自定义属性
<!-- FaIcon.svelte -->
<script>
export let icon = 'house';
export let size = '1x';
export let spin = false;
export let color = '';
$: cls = `fa-solid fa-${icon} ${size !== '1x' ? 'fa-' + size : ''} ${spin ? 'fa-spin' : ''}`;
</script>
<i class="{cls}" style="{color ? 'color:' + color : ''}"></i>
在 Svelte 中使用图标的基本示例:
<FaIcon icon="house" />
<FaIcon icon="spinner" spin />
<FaIcon icon="heart" size="2x" color="red" />导入单个图标以通过 tree-shaking 减小包体积
FontAwesome 开箱即用支持 SvelteKit 服务端渲染
使用 CSS 动画而非 JavaScript 以获得更好的性能