はじめに

Svelte/SvelteKit で、Font Awesome を利用する実装を調べたので、自身の備忘録も兼ねて記事にしてみました。svelte-fa パッケージを利用する方法を紹介します。一応、プログラミング初心者の読者にも分かりやすいよう、なるべく丁寧に書いてみたつもりです。

Svelte / SvelteKit とは

この記事を読むような読者には説明不要と思いますが、一応リンクを貼っておきます。

サイバネティクスで強化された web アプリ

https://svelte.jp/

効率的で無駄のない、研ぎ澄まされた Web 開発

https://kit.svelte.jp/

筆者が Svelte に興味を持ったのは、比較的新しい JS web フレームワークで評価が良いのと、これから主流になる可能性があるところ。 React のような仮想DOMを利用しないところです。

Font Awesome とは

こちらも説明不要かと思いますが、一応リンクを貼っておきます。

Font Awesome は 、何百万ものデザイナー、開発者、コンテンツ作成者によって使用されているインターネットのアイコン ライブラリおよびツールキットです。

https://fontawesome.com/　　より、英文を日本語に機械翻訳

筆者のサイトだと、公開日、更新日、カテゴリー、タグのアイコンで使用しています。

記事用の検証環境作成

筆者の SveltKit 開発環境は、Linux Mint 21.2 です。Mint は、開発環境としては、大体 Ubuntu と同じです。Windows10 の PC で動作する VirtualBox で Mint を使用しています。Mint のネットワーク設定は、「ブリッジアダプター」です。

記事を書くにあたり、検証用プロジェクトを作成しているので、読者も簡単に再現できるように筆者の手順も紹介します。まず、スケルトンプロジェクトを作成します。

npm create svelte@latest my-app
cd my-app
npm install
git init && git add -A && git commit -m "Initial commit"

1行目のコマンドで、テンプレートは「Skeleton project」を選択しています。Add type checking with TypeScript? は、「Yes, using JavaScript with JSDoc comments」。Select additional options (use arrow keys/space bar) は、選択無し「none」としました。

筆者は、Windows 上のブラウザを使って画面を確認するので、次のように package.json を編集します。（赤字の部分）

$ git diff
diff --git a/package.json b/package.json
index 7c56641..375e39f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
        "version": "0.0.1",
        "private": true,
        "scripts": {
-               "dev": "vite dev",
+               "dev": "vite dev --host 0.0.0.0",
                "build": "vite build",
                "preview": "vite preview",
                "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",

これで、別ホスト(Windows)から Svelte アプリ(LinuxMint)にアクセス可能となるので、アプリを実行して、Windows の Chrome で表示してみます。

$ npm run dev

> my-app@0.0.1 dev
> vite dev --host 0.0.0.0

Forced re-optimization of dependencies

  VITE v5.2.9  ready in 2536 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.4:5173/
  ➜  Network: http://172.21.0.1:5173/
  ➜  press h + enter to show help

ブラウザで次のように表示されると思います。

svelte-fa パッケージインストール

svelte-fa パッケージをインストールします。Font Awesome を利用するには、色々とやり方があると思いますが、svelte-fa を利用する方法が簡単なのでお勧めします。この記事執筆時点で、最近更新（3か月前）していて、ダウンロード数も多いようです。リンクを貼ったサイトは、インストールや使用方法などの説明（英文ですが）があるので、それを参考に作業します。

Svelte用の小さなFontAwesomeコンポーネント

https://www.npmjs.com/package/svelte-fa

まずは、パッケージと筆者が利用しているアイコンデータのインストールを行います。

npm install svelte-fa
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons

アイコン表示コーディング例

アイコンを表示するようにコーディングしてみます。src/routes/+page.svelte を次のように編集しました。

<script lang="ts">
  import Fa from "svelte-fa"
  import { faClock, faFolder } from "@fortawesome/free-regular-svg-icons"
  import { faClockRotateLeft, faTag } from "@fortawesome/free-solid-svg-icons";

  const date1 = "2024.4.18";
  const date2 = "2024.4.19";
  const folder = "サンプルフォルダー";
  const tag = "サンプルタグ";
</script>

<div class="c1">
  <Fa icon={faClock} pull="left" color="#00cc00" size="2x"/>
  <div class="c2"> {date1} </div>
</div>

<div class="c1">
  <Fa icon={faClockRotateLeft} pull="left" color="#00cc00" size="2x"/>
  <div class="c2"> {date2} </div>
</div>

<div class="c1">
  <Fa icon={faFolder} pull="left" color="#0000cc" size="2x"/>
  <div class="c2"> {folder} </div>
</div>

<div class="c1">
  <Fa icon={faTag} pull="left" color="#0000cc" size="2x"/>
  <div class="c2"> {tag} </div>
</div>

<style>
  .c1 {
    margin: 20px;
  }
  .c2 {
    margin-left: 40px;
  }
</style>

肝は、<Fa icon={faClock} ..略.. /> の部分です。color=… は見た目が味気ないので色を付け、サイズも小さかったので、size=”2x” を入れてあります。pull=”left” はアイコンの右側に文字を表示したい場合に指定します。以下は、ブラウザのスクリーンショットです。

プロパティ spin はアイコンがスムーズに回転します。pulse はアイコンがカクカク回転します。面白いので次の動画を再生してみてください。

【おまけ】本記事のアイキャッチ

（今回のアイキャッチも例によって記事内容とは何の関係もありません）

最近は温泉のある宿に宿泊していませんが、以前はよく出掛けていました。数年前に、箱根の温泉旅館に宿泊した時のウェルカム饅頭？の写真（筆者撮影）をアイキャッチにしてみました。温泉郷で食べる温泉饅頭は格別だと思います。お土産に買ってきた温泉饅頭だと、同じ物なのに味が違うように感じます。心理的な影響なのでしょうか。