From 0c3566b9be948f5b626e864c45a99f485e679d85 Mon Sep 17 00:00:00 2001 From: himagone Date: Fri, 27 Dec 2024 14:12:10 +0900 Subject: [PATCH] =?UTF-8?q?readme=E3=81=A8typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +++++++++++++------ ...access-point.svg => wifi-access-point.svg} | 0 2 files changed, 23 insertions(+), 11 deletions(-) rename icons/{wfi-access-point.svg => wifi-access-point.svg} (100%) diff --git a/README.md b/README.md index 0dd503e..ae734ee 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,30 @@ -# Geolonia アイコンセットのテンプレート +# Geolonia アイコンセット テンプレート -Geolonia Maps または Maplibre でアイコンを表示させるためにスプライトシートを作るテンプレート +地図用のSVGアイコンセットとそのプレビューを提供するテンプレートです。主に防災・施設・交通関連のアイコンを収録しています。 -Geolonia Maps の標準アイコンセットはこちらのテンプレートを利用しているので、使い方にご参照にしてください。 [GitHub](https://github.com/geoloniamaps/sprite-gstd) [プレビュー](https://geoloniamaps.github.io/sprite-gstd/) +## 特徴 -## 使い方 +- 70以上の地図用SVGアイコン +- Retina対応（1x, 2x）のスプライトシート +- プレビュー用のWebページ付き +- 防災、施設、交通など、様々なカテゴリのアイコンを収録 + +## アイコンの命名規則 -こちらのレポジトリをテンプレートとして、新しいレポジトリを作成してください。その後、 +- ケバブケースを使用（例: `fire-hose-hanger`, `bicycle-rental-port`） +- 色の指定がある場合は末尾に追加（例: `bicycle-rental-port-green`, `public-facility-navy`） +- 番号がある場合は2桁で表記（例: `evacuation-shelter-01`, `stream-gauge-02`） +- スタイルを表す場合は末尾に追加（例: `speaker-filled`, `speaker-outlined`） + +## 使い方 -1. スプライトシートに追加したいアイコンを `icons` ディレクトリに追加 -1. GitHub Pages を GitHub Actions からデプロイするように設定する（ Settings → Pages → Source を GitHub Actions に変更） -1. この README を編集 -1. `_site/index.html` の `` `h1` タグ等を適切に編集します。 +### スプライトシートの利用 -ローカルで編集する場合は、 `npm install` 後に `npm run start` をすると、ローカルのサーバーが起動され、GitHubにプッシュする前に確認できます。 +スプライトシートは以下の4つのファイルで構成されています： +- `sprite.png` - 1x解像度のスプライト画像 +- `sprite@2x.png` - 2x解像度のスプライト画像 +- `sprite.json` - 1x解像度のスプライト情報 +- `sprite@2x.json` - 2x解像度のスプライト情報 -うまく行けば、スプライトシートが `https://<GitHub username>.github.io/<repository name>/sprite.png` でホスティングされます。MapLibre対応の `.png / .json / @2x.png / @2x.json` の合計4ファイルが作成されます。MapLibreに複数スプライトシートを読み込ませる方法は、 [公式ドキュメンテーション](https://maplibre.org/maplibre-style-spec/sprite/#multiple-sprite-sources) を参照にしてください。 +### プレビューの確認 +https://geolonia.github.io/custom-smartmap-sprite/ diff --git a/icons/wfi-access-point.svg b/icons/wifi-access-point.svg similarity index 100% rename from icons/wfi-access-point.svg rename to icons/wifi-access-point.svg