在 Svelte 项目中以组件方式使用 Font Awesome 内联 SVG 图标

方案简介

Svelte-Awesome 是一个面向 Svelte JS 的 SVG 图标组件库，底层构建于 Font Awesome 图标集之上，设计思路源自 Justineo 的 vue-awesome 项目。它解决的问题是：在 Svelte 应用中方便地以组件形式嵌入 Font Awesome 图标，并使用内联 SVG 方式渲染，无需引入整套图标字体。该库同时支持两代图标来源：内置的 Font Awesome v4.7.0 图标，以及通过 @fortawesome npm 包引入的 v5/v6 图标。适合需要在 Svelte（含 Sapper/SvelteKit 生态）项目中使用图标、并希望按需加载以控制体积的开发者。

亮点与能力

• 以 组件方式使用图标，传入 data 即可渲染
• 支持缩放（scale）、翻转（flip）、无障碍标签（label）等属性
• 支持图标嵌套组合，例如给图标叠加 ban 图标实现遮罩效果
• 内置 Font Awesome v4.7.0 全套图标
• 支持通过 @fortawesome npm 包使用 v5/v6 图标
• 推荐按需导入单个图标以优化开发模式下的加载体积
• 提供在线 demo 与全部内置图标列表

组成与分工

• Svelte：宿主前端框架，Icon 以 Svelte 组件形式提供，peerDependencies 要求 svelte >= 3.43.1 < 6
• Font Awesome v4.7.0：内置图标来源，图标数据已打包在库内
• @fortawesome npm 包（v5/v6）：外部图标来源，例如 @fortawesome/free-regular-svg-icons，按需导入单个图标
• svelte-awesome Icon 组件：核心组件，接收 data 属性渲染内联 SVG，支持 scale/flip/label 等属性
• npm：安装与分发渠道，npm install --save svelte-awesome

前置要求

• Svelte 项目环境（peer 依赖要求 svelte >= 3.43.1 且 < 6）
• 通过 NPM 安装：

bash
npm install --save svelte-awesome

如需使用 Font Awesome v5/v6 图标，还需安装对应的 @fortawesome 图标包，例如 @fortawesome/free-regular-svg-icons。

实施步骤

1. 安装库

bash
npm install --save svelte-awesome

2. 在组件中导入 Icon 与图标数据

从 svelte-awesome 导入 Icon 组件，并按需导入所需图标：

javascript
import Icon from 'svelte-awesome';

// Recommended - import just the icon you need
import beer from 'svelte-awesome/icons/beer';
import refresh from 'svelte-awesome/icons/refresh';

3. 使用 FA v5/v6 图标（可选）

javascript
import { faThumbsUp } from '@fortawesome/free-regular-svg-icons/faThumbsUp';

4. 在模板中使用

html

5. Sapper 项目额外步骤

Sapper 中可能需要显式导入 Icon 组件：

javascript
import Icon from 'svelte-awesome/components/Icon.svelte';

使用与配置要点

• 基本用法：，data 为导入的图标数据
• 缩放：
• 翻转：
• 无障碍标签：
• 嵌套组合（如照片禁止效果）：

html

• 边缘情况图标：因保留字或以数字开头，导入名与原名不同，如 fa500px（'500px' 图标）、faTry（'try' 图标）
• 验证成功：渲染出对应 SVG 图标即可；可访问官方 demo 页面对照

注意事项与常见问题

• 不要从 svelte-awesome/icons 主文件导入，否则开发模式下会下载全部图标：

javascript
// Not recommended as it will download all of the icons in dev mode
import { ban } from 'svelte-awesome/icons';

• 同理，@fortawesome 包也应从单个图标文件导入，而不是从主文件导入：

javascript
// Not Recommended - import the individual icon from the main file - it will download all of the icons in dev mode
import { faThumbsUp } from '@fortawesome/free-regular-svg-icons';

• Sapper 项目需要显式从 svelte-awesome/components/Icon.svelte 导入 Icon 组件
• 部分图标因保留字或数字开头需要使用特殊导入名（fa500px、faTry）

优缺点

• ✓ 按需导入单个图标
• ✓ 支持 FA v4/v5/v6
• ✕ 主文件导入会下载全部图标
• ✕ Sapper 需显式导入组件

出处

本方案挖掘自开源项目 robbrazier/svelte-awesome，方案内容与实施命令均来自其 README 原文。