自分で必要な svg を選んで、コンポーネント集として 1 つのファイルに集めるプロジェクト

src/{iconPack} にそれぞれ必要なアイコンをカテゴリごとに手動で整理し、ビルドコマンドでそれを読み取ってリスト化して出力します。

コマンド

パッケージ公開

npm publish --access public

npmのスコープ付きパッケージ（@loos/icon-pack）はデフォルトでプライベートになるため、明示的にpublicにする。

全部ビルド

npm run build

特定のパックのみビルド

npm run build:icon {packName}

プレビュービルド

/master の整理状況を html ファイルでプレビュー用に吐き出す。

npm run build:prev {packName}

↓

src/{packName}/index.htmlが生成される。

プロジェクト構造

• /src: ビルド対象のアイコンを整理して格納している。
• /dist: ビルド後のファイル。
• /__master: SVG 元データ。こっちで整理し、使うものだけsrcに移動させる
• /__structure/__structure: カテゴリ構造コピペ用

アイコンファイル名

fill/olutline の場合

• icon-name.svg / icon-name-outline.svg

fill/regular/thin の場合

• icon-name.svg / icon-name-fill.svg / icon-name-thin.svg

各アイコンパックごとの構成

• io: Ionicons. fill/outline の 2 種類
• hero: Heroicon. fill/outline の 2 種類
• fa: Font Awesom. fill/outline の 2 種類
• fi: Feather アイコン. regular/thin の 2 種類(今は regular サイズが {icon}-bold で名前ついてるがのちのち変更予定 )
• ph: Phosphoricons アイコン. regular/thin の 2 種類 を予定。容量がそこまででかくならなければ light も入れる？
• ls: 自作アイコン

カテゴライズのルール

• arrows : 矢印系、caret・chevron...
• symbols
  • 形・記号・シンボル系。数字や計算記号・通貨のシンボルもここ
• communication
  • 電話・メール・チャット・SNS 操作系（星・ハート・ブックマーク・シェアなど）
• Media
  • 画像・写真・映像・カメラ・音楽・ラジオ・停止・再生などのメディア操作アイコン
• works-study : 仕事・勉強
• design
• ~gadget~
• system & devices
• life-shopping : 生活・フード・ファッション・ショッピング → 　 living & money ? 生活・暮らし　テレビ・ベッドはここ
• game-sports → entertainment : エンターテイメント (ゲーム、スポーツ、楽器など)
• wellness : 健康・医療 (美容・フィットネスもここ)
• transportation-buildings : 交通・建築物
• nature-weather : 自然・天気
• people : 人々
• others : その他

カテゴリー分けでややしいこと

• 電気（稲妻）アイコンはフラッシュアイコンとして syetem へ。
• 矢印でも、シャッフルとリピートアイコンは /media/player へ。share は /communication へ。
• テレビは game に。
• ヘッドフォンは　ガジェット、ヘッドセットは game
• RSS は media
• #(hash) → communication

その他メモ

• 企業ロゴ・アプリロゴなどは入れない（fa のやつだけ使う）
• fill/outline で同じものは削除する
• 矢印・シンボル系以外で、○ や □ で囲んだだけのバリエーションは基本的に除外する
• アプリで使ような状態系は除外（メール開いたやつや未読のドットが付いたもの、クラウドオンライン・オフライン状態、バッグに追加・削除など）
• キーボードのアイコンは一旦除外。（あとで自分で作る?）
• git / form 系アイコンも一旦除外。

迷い中

• aperture (カメラレンズ？)をどこに入れるか。
• ハートのハーフをどうするか
• 新聞は works にしてるが、media か？
• language 切り替えアイコンどこにするか。（今は system）
• ブログでよく使うバルブやメガフォンアイコンどうする (今は others)
• SNS のアプリアイコンくらいは入れるべきか？

ビルド順についての注意

フォルダも含め、名前順になる。フォルダ分けしておくと階層ごとに処理されるので、順番操作のためにフォルダに番号を降っている。

• 1_hoge
• 2_hoge
• 10_hoge

だと、10* が 2* の前にくることに注意。01*, 02*, ..., 10_ ... にする。

また、svg ファイル名の方でも、一部 _ を順序操作のために使用している（ビルド時にアンスコ(_)は無視されるようにしてる）。 ファイル名を変えたものには赤色ラベルを付けてる。（忘れてるものもある）

▼ 注意

• 01_hoge
• 01_hoge_foo

のように数字が同じフォルダが並んでいる場合、これらの取得順序が変になる。

一括ファイル名操作する方法

zmv を使うと便利そう

▼ 例 1: 今いるディレクトリ直下の svg をリネーム

zmv '(*).svg' '$1-outline.svg'

-n オプションで確認だけできる。 **/でディレクトリ内を再帰的に処理可能

▼ 例 2: ディレクトリ内も処理。＆ 一旦確認だけ

zmv -n '(**/)(*).svg' '$1$2-fab.svg'

アイコンピッカー開発予定メモ

・テーマ側でよく使うものを登録できるようにしたい ・fill/outline や線の細さのバリエーションを切り替える UI を付ける ・SVG 入力エリア、フォイルアップロード機能つけたい

ソース

Ionicons

./node_modules/ionicons/dist/svg/

fi 24:1/24:2

fontawesome-6.2.1

HeroIcons

https://github.com/tailwindlabs/heroicons/tree/master/optimized/24