y-icons 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 hamayou-61
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# y-icons
+
+MDI に不足するアイコンを **簡単に作って・簡単に使う** ための独自アイコンパッケージ。
+
+**1 つの真実の源（`icons/` 配下の SVG）** から、Vue/Vuetify・Web/ERB・Figma の **3 経路すべて** を
+自動生成・配布する。
+
+```
+icons/<name>.svg  ← 真実の源（SoT）。1 枚置くだけ
+        │  npm run build
+        ├─ コード(Vuetify) … y: アイコンセット（<v-icon icon="y:name"> など全 icon プロパティ）
+        ├─ コード(Web/ERB) … アイコンフォント（<i class="yicon yicon-name">）
+        ├─ Figma          … Storybook からコピー＆ペースト（グリフ or SVG）
+        └─ 安定コードポイント（codepoints.json・追記専用）
+```
+
+---
+
+## クイックスタート
+
+```bash
+npm install
+npm run build        # build:set + build:font + tsc
+
+npm run storybook    # ギャラリー・候補・利用例・フォントDL を閲覧
+```
+
+---
+
+## アイコンを追加する
+
+1. **作る**：`icons/<name>.svg` を置く。
+   - デザイナーは Figma で作図 → SVG 書き出し（下記「設計仕様」準拠）。
+   - 開発者は **`/create-icon <要望>`** スキルで AI 叩き台を 10 案生成 → Storybook `icons/Candidates` で
+     MDI と見比べて選定 → `icons/` へ昇格。
+2. **ビルド**：`npm run build`（`build:set` が仕様＋バウンディングボックスを検証）。
+3. **配布**：CI がフォント／npm を生成・配布（後述）。
+
+---
+
+## 使い方（3 経路）
+
+### 1. Vue / Vuetify
+
+```ts
+import { vuetifyIcons } from 'y-icons/vuetify'
+createVuetify({ icons: vuetifyIcons })
+```
+
+```vue
+<v-icon icon="y:inventory-transfer" />
+<!-- v-icon 以外の全 icon プロパティでも同じ書き方で動く -->
+<v-text-field prepend-icon="y:inventory-transfer" />
+<v-btn :icon="'y:inventory-transfer'" />
+```
+
+FW 非依存に使う場合：`import { yIconPaths } from 'y-icons'` ／ 個別 SVG は `y-icons/svg/<name>.svg`。
+
+### 2. Web の生 class / Rails ERB（Vuetify を介さない場所）
+
+`dist/font/y-icons.css` を読み込み：
+
+```html
+<i class="yicon yicon-inventory-transfer"></i>           <!-- クラス -->
+<span class="yicon">inventory-transfer</span>             <!-- 名前リガチャ（ブラウザのみ） -->
+```
+
+### 3. Figma（Storybook からコピー＆ペースト）
+
+Storybook `icons/CustomIcons` の各アイコンに 2 つのコピーボタン。MDI(pictogrammers) と同じ運用：
+
+| ボタン | コピー内容 | Figma 結果 | フォント要否 |
+|---|---|---|---|
+| **グリフをコピー** | PUA 文字＋`font-family: y-icons` | テキスト（y-icons フォント）= MDI の Copy Glyph と同じ | **要インストール** |
+| **SVGをコピー** | `<svg fill="currentColor">` | ベクター図形 | 不要 |
+
+フォントは `icons/DownloadFont` ストーリーからダウンロードしてインストール。
+詳細なデザイナー手順は [`docs/figma-guide.md`](docs/figma-guide.md)。
+
+> Figma のリガチャ（名前を打つと変換）は信頼性が低いため使わない。リガチャは Web/ERB（ブラウザ）専用。
+
+---
+
+## Storybook（運用の入口）
+
+| ストーリー | 役割 |
+|---|---|
+| `icons/CustomIcons` | 一覧 ＋ グリフ/SVG コピー（Figma 貼付） |
+| `icons/Candidates` | 候補プレビュー ＋ MDI 参照（採点） |
+| `icons/VuetifyUsage` | `y:` が全 Vuetify icon プロパティで効く実証 |
+| `icons/DownloadFont` | フォント一式（ttf/woff/css/cheatsheet）を DL |
+
+---
+
+## 設計仕様（Material Design アイコン規格準拠：24dp グリッド／キーライン）
+
+| 項目 | 値 |
+|---|---|
+| グリッド | 24×24 dp（viewBox `0 0 24 24` 固定） |
+| ライブエリア / 余白 | 中身 ~20×20dp（座標 2〜22）、外周 2dp padding |
+| ストローク幅 | 2dp（2dp 以下は角を丸めない） |
+| 角丸 | 既定 2dp |
+| キーラインシェイプ | 円⌀20 / 正方形18 / 縦長16×20 / 横長20×16 |
+
+形式：**単一 `<path>`**（`<g>`・`transform`・複数 path 不可）／**`fill` を書かない**（`currentColor`）／
+`stroke` 不使用（中空は外形＋内形の逆回りサブパス、帯幅 2dp 一貫）／座標 0.5dp 刻み。
+`npm run build:set` が SVGO 正規化＋仕様＋bbox を検証（違反で停止）。
+
+---
+
+## 成果物とリポ構成
+
+| パス | 内容 |
+|---|---|
+| `icons/*.svg` | **SoT**（デザイナーが置く） |
+| `candidates/*.svg` | 採用前の候補（`/create-icon` が書き込む下書き） |
+| `src/registry.generated.ts` | 自動生成（name→d） |
+| `src/vuetify.ts` | Vuetify アダプタ（`vuetifyIcons` / `yIconSet`） |
+| `scripts/build-set.mjs` / `build-font.mjs` | 生成（registry/svg ・ フォント） |
+| `dist/` | 配布物（gitignore。CI/publish 時に生成） |
+| `codepoints.json` | 名前→コードポイントの固定割当（**コミット対象・追記専用**） |
+
+`package.json` の exports：`.`（FW 非依存）／`./vuetify`／`./font/*`／`./svg/*`。
+
+---
+
+## CI
+
+- **push / PR**（`.github/workflows/ci.yml`）：`npm run build` ＋ **生成物ドリフト検査** ＋
+  **アイコンフォントを成果物としてアップロード**（各実行からダウンロード可）。
+- **Release 公開**（`.github/workflows/release.yml`）：`y-icons` を publish ＋ フォントを Releases に添付。
+
+稼働前 TODO：registry 確定（GitHub Packages 等）、`package.json` の `private` 解除＋`publishConfig` 設定。

package/dist/font/codepoints.json

@@ -0,0 +1,4 @@
+{
+  "sample": 61697,
+  "inventory-transfer": 61698
+}

package/dist/font/y-icons.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "y-icons";
+  src: url("./y-icons.woff2") format("woff2"),
+       url("./y-icons.woff") format("woff"),
+       url("./y-icons.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+.yicon {
+  font-family: "y-icons";
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  /* リガチャを有効化（名前を打つとアイコンに変わる） */
+  font-feature-settings: "liga" 1;
+  -webkit-font-feature-settings: "liga" 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+.yicon-inventory-transfer:before { content: "\f102"; }
+.yicon-sample:before { content: "\f101"; }

package/dist/font/y-icons.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>y-icons cheatsheet</title>
+<link rel="stylesheet" href="./y-icons.css" />
+<style>
+  body { font-family: system-ui, sans-serif; margin: 2rem; color: #222; }
+  h1 { font-size: 1.25rem; }
+  h1 small { color: #999; font-weight: normal; }
+  p { color: #666; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
+  figure { margin: 0; padding: 1rem; border: 1px solid #eee; border-radius: 8px; text-align: center; }
+  .glyph { font-size: 2.5rem; line-height: 1; }
+  figcaption { margin-top: .5rem; display: flex; flex-direction: column; gap: .2rem; }
+  code { font-size: .8rem; word-break: break-all; }
+  small { color: #999; font-size: .7rem; }
+</style>
+</head>
+<body>
+  <h1>y-icons <small>(2 icons)</small></h1>
+  <p>Figma/エディタで名前（例: <code>inventory-transfer</code>）を打つとアイコンに変わります（リガチャ）。</p>
+  <div class="grid">
+    <figure>
+      <span class="glyph yicon yicon-inventory-transfer"></span>
+      <figcaption><code>inventory-transfer</code><small>U+F102</small></figcaption>
+    </figure>
+    <figure>
+      <span class="glyph yicon yicon-sample"></span>
+      <figcaption><code>sample</code><small>U+F101</small></figcaption>
+    </figure>
+  </div>
+</body>
+</html>

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `y-icons` のフレームワーク非依存エントリ。
+ *
+ * - `yIconPaths`: name → SVG path の `d`（24×24・currentColor 前提）
+ * - 個別の生 SVG は `y-icons/svg/<name>.svg` から参照できる
+ * - Vuetify 用アダプタは `y-icons/vuetify` を使う
+ */
+export { yIconPaths } from './registry.generated.js';
+export type { YIconName } from './registry.generated.js';
+export declare const yIconNames: string[];

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * `y-icons` のフレームワーク非依存エントリ。
+ *
+ * - `yIconPaths`: name → SVG path の `d`（24×24・currentColor 前提）
+ * - 個別の生 SVG は `y-icons/svg/<name>.svg` から参照できる
+ * - Vuetify 用アダプタは `y-icons/vuetify` を使う
+ */
+export { yIconPaths } from './registry.generated.js';
+/** 登録済みアイコン名の一覧 */
+import { yIconPaths } from './registry.generated.js';
+export const yIconNames = Object.keys(yIconPaths);

package/dist/registry.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const yIconPaths: Record<string, string>;
+export type YIconName = keyof typeof yIconPaths;

package/dist/registry.generated.js

@@ -0,0 +1,6 @@
+/* 自動生成ファイル。直接編集しないこと（SoT は icons/ 配下の SVG）。
+ * 生成: npm run build:set */
+export const yIconPaths = {
+    "inventory-transfer": "M2 7h11v9H2Zm2 2v5h7V9Zm10 2h2.5l2.5 2.5V16h-5Zm-9.6 6.5a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0m10 0a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0",
+    "sample": "M12 2 4 6v12l8 4 8-4V6zm0 2.18L17.66 7 12 9.82 6.34 7zM6 8.62l5 2.5v7.26l-5-2.5zm12 0v7.26l-5 2.5v-7.26z",
+};

package/dist/registry.json

@@ -0,0 +1,4 @@
+{
+  "inventory-transfer": "M2 7h11v9H2Zm2 2v5h7V9Zm10 2h2.5l2.5 2.5V16h-5Zm-9.6 6.5a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0m10 0a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0",
+  "sample": "M12 2 4 6v12l8 4 8-4V6zm0 2.18L17.66 7 12 9.82 6.34 7zM6 8.62l5 2.5v7.26l-5-2.5zm12 0v7.26l-5 2.5v-7.26z"
+}

package/dist/svg/inventory-transfer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 7h11v9H2Zm2 2v5h7V9Zm10 2h2.5l2.5 2.5V16h-5Zm-9.6 6.5a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0m10 0a1.6 1.6 0 1 0 3.2 0 1.6 1.6 0 1 0-3.2 0"/></svg>

package/dist/svg/sample.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 4 6v12l8 4 8-4V6zm0 2.18L17.66 7 12 9.82 6.34 7zM6 8.62l5 2.5v7.26l-5-2.5zm12 0v7.26l-5 2.5v-7.26z"/></svg>

package/dist/vuetify.d.ts

@@ -0,0 +1,8 @@
+import type { IconSet, VuetifyOptions } from 'vuetify';
+/** `y:` カスタムアイコンセット */
+export declare const yIconSet: IconSet;
+/**
+ * createVuetify にそのまま渡せるアイコン設定。
+ * 既定セットは MDI フォント、`y:` でカスタム SVG を共存させる。
+ */
+export declare const vuetifyIcons: VuetifyOptions['icons'];

package/dist/vuetify.js

@@ -0,0 +1,44 @@
+/**
+ * `y-icons` の Vuetify アダプタ。
+ *
+ * `y:` プレフィックスのカスタムアイコン（例: `y:sample`）を解決し、Vuetify 公式の
+ * `VSvgIcon` に委譲して描画する。公式 `mdi-svg` セットと同じ描画経路を通るため、
+ * `<svg class="v-icon__svg">` のマークアップが Vuetify 標準と一致し、size / color / tag がそのまま効く。
+ *
+ * 使い方（消費側）:
+ *   import { vuetifyIcons } from 'y-icons/vuetify'
+ *   createVuetify({ icons: vuetifyIcons })
+ *   // テンプレート: <v-icon icon="y:sample" />
+ *
+ * 既存の `@mdi/font`（フォント）アイコンとは独立して共存する。
+ */
+import { h } from 'vue';
+import { VSvgIcon } from 'vuetify/components';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
+import { yIconPaths } from './registry.generated.js';
+/** `y:` カスタムアイコンセット */
+export const yIconSet = {
+    component: (props) => {
+        const name = String(props.icon);
+        const path = yIconPaths[name];
+        if (path === undefined &&
+            typeof process !== 'undefined' &&
+            process.env?.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn(`[y-icons] Unknown custom icon: "y:${name}"`);
+        }
+        return h(VSvgIcon, { ...props, icon: path ?? '' });
+    },
+};
+/**
+ * createVuetify にそのまま渡せるアイコン設定。
+ * 既定セットは MDI フォント、`y:` でカスタム SVG を共存させる。
+ */
+export const vuetifyIcons = {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+        mdi,
+        y: yIconSet,
+    },
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "y-icons",
+  "version": "0.1.0",
+  "description": "独自アイコン（MDI互換）。単一の真実の源（icons/ 配下のSVG群）から、Vue/Vuetify用アイコンセット・生SVG/d-map・Figma用アイコンフォントを生成・配布する。",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hamayou-61/y-icons.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vuetify": {
+      "types": "./dist/vuetify.d.ts",
+      "import": "./dist/vuetify.js"
+    },
+    "./font/*": "./dist/font/*",
+    "./svg/*": "./dist/svg/*"
+  },
+  "scripts": {
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "prebuild": "npm run clean",
+    "build": "node scripts/build-set.mjs && node scripts/build-font.mjs && tsc -p tsconfig.build.json",
+    "build:set": "node scripts/build-set.mjs",
+    "build:font": "node scripts/build-font.mjs",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": ">=3.4",
+    "vuetify": ">=3.5"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "vuetify": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/vue3-vite": "^8.6.14",
+    "@types/node": "^20.19.43",
+    "storybook": "^8.6.14",
+    "svg-path-bounds": "^1.0.2",
+    "svg2ttf": "^6.1.0",
+    "svgicons2svgfont": "^12.0.0",
+    "svgo": "^3.3.2",
+    "ttf2woff": "^3.0.0",
+    "ttf2woff2": "^5.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0",
+    "vue": "^3.5.13",
+    "vuetify": "^3.5.0"
+  }
+}