Web Origamiでアイコンセットを簡単に作成

長年にわたり、私はブログでさまざまなアイコンセットを使用してきました。現在使用しているのは Heroicons です。 推奨される使い方は、ウェブサイトからソースをコピーして直接 HTML に貼り付けることです。非常にシンプルなプロセスです： ウェブサイトにアクセスする 目的のアイコンを検索する アイコンにカーソルを合わせる 「Copy SVG」をクリックする IDE に戻って貼り付ける React や Vue を使用している場合、npm パッケージをインストールしてアイコンをコンポーネントとしてインポートすることも可能です。しかし、私はどちらのフレームワークも使用していないため、生（raw）の SVG が必要であり、npm install のような方法では対応できません。 過去には、プロジェクト内に個別のファイルとして SVG をコピーするアプローチをとっていました。例えば： src/icons/ home.svg about.svg search.svg そして、これらのアイコンをディスクから読み取るための「コンポーネント」を作成し、テンプレートファイルで使用して HTML 内で SVG をインライン化していました。例としては以下のようになります。 // 某ページテンプレートファイル import { Icon } from './Icon.js' const template = `${Icon('search.svg')} Search` // Icon.js import fs from 'fs' import path from 'path' const __dirname = /* ファイルパスを正しく解決するための処理 */ export const Icon = (name) => fs.readFileSync( path.join(__dirname, 'icons', name), 'utf8' ).toString(); これは問題なく動作します。ディスクからファイルを読み取るために、多くの Node.js のボイラープレートが必要ですが、アイコンを変更する際には少し手間がかかります。新しい SVG を見つけ、既存のものを上書きし、ソース管理に再度コミットするなどする必要があります。 もしかすると、「npm install heroicons」のように簡単にできるのが理想なのかもしれません。 アイコンパックによって名称が異なるため、切り替えると名称が一致しません。例えば、あるアイコンは「search」という名前で呼ばれているかもしれません。 アイコンパックは非常に大きくなりがちですが、実際にはその一部しか必要としません。npm i icon-pack そのため、プロジェクトの npm パッケージでは生の SVG ファイルは提供されていません。ウェブサイト上では入手可能ですが、よりプログラム的に必要なアイコンを簡単に取得する方法が欲しいのです。どうすればよいでしょうか？Origami の登場です。 私はブログで Web Origami を使用しており、これにより、Github にホストされている Heroicons 内のアイコンを、私がテンプレート内で使用するアイコンにマッピングすることが容易になります。npm install は不要です。 git submodule add { home.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/home.svg, about.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/question-mark-circle.svg, search.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/magnifying-glass.svg } ご覧の通り、私はアイコンに「search」のような名前を付けています。 美しい不是吗？これは、裸のモジュール指定子を URL にマッピングできる import maps や、Deno の半ば放棄された HTTP インポート（これもまた独自の美しさを持っていました）を連想させます。仕組みについて 折り紙は、ファイルパスを言語の第一級市民にします——「リモート」ファイルパスさえも——ので、コードベース内のアイコン名を、npm 経由でディスクにインストールされるかインターネットから取得されるかにかかわらず、誰かのセットにある他の人のアイコン名にマッピングする単一のファイルを作成するのは非常に簡単です。先ほどの例を簡略化するために、icons.ori というようなファイルを持つことができます。 { home.svg: https://example.com/path/to/home.svg about.svg: https://example.com/path/to/information-circle.svg search.svg: https://example.com/path/to/magnifying-glass.svg } その後、テンプレート内で次のようにこれらのアイコンを参照できます:${icons.ori/home.svg} 検索 簡単です！そして、アイコンを変更したいときは、単に icons.ori のエントリを更新するだけです。 そして、もし本当に一歩先を行きたいなら、折り紙のキャッシュ機能を使用できます:Tree.cache( { home.svg: https://raw.github.com/path/to/home.svg about.svg: https://raw.github.com/path/to/information-circle.svg search.svg: https://raw.github.com/path/to/magnifying-glass.svg }, Origami.projectRoot()/cache ) 単にファイルをメモリ内にキャッシュするだけでなく、これは以下のようなローカルフォルダにキャッシュします:cache/ home.svg about.svg search.svg

Web Origamiでアイコンセットを簡単に作成

背景や根拠まで確認しますか？

関連記事

調べる

選ぶ

サイト