icons

アイコン

このスキルでは、プロジェクトのアイコンセットに不足しているアイコンを、そのセット独自のスタイルで描きます。新しいグリフはセット全体と照らし合わせて寸法を測り、アニメーションやモーフィングに対応できるように描いたうえで、1枚のシートに表示します。

セットの寸法を測るまで、描画は始めません

仕様は厳密です。シートでは、セットに既存のアイコンすべてから寸法を測り、新しいグリフもその仕様に従います。ストローク、半径、グリッドを推測した場合は、指摘事項になります。

draw an icon for、we need a ... icon、custom icons、the set doesn't have a を依頼された場合に実行します。また、match our icons、filled version、animate this icon、morph、icon sheet、this icon looks off next to the others を依頼された場合も実行します。

どのグリフを描くかは scope の担当です。まずセット内を検索するのは reuse の担当です。見た目を整える微調整は alignment の担当です。アイコンアニメーションの曲線、時間、動きを減らす場合の代替表示は motion の担当です。アクセシブルな名前は defaults の担当です。表示ラベルは copy の担当です。コントラストは color の担当です。

1. セットにないものだけを描く

まず reuse を実行します。アイコンパッケージ、アイコンフォルダー、またはインラインアイコンを格納しているマップを検索し、存在しない場合にのみグリフを描きます。セットにあるグリフを重複して追加した場合は icons-only-missing です。

セットが管理されている場所で、既存アイコンの隣に新しいグリフを追加します。機能ファイルに残された新しいアイコンは icons-in-the-package です。そこで不足しているグリフを追加しても、reuse での指摘にはなりません。

2. セット全体の寸法を測る

sheet.html を .icons/<set>/index.html にコピーします。このフォルダーは無視対象であり、ソースツリーには含めません。ヘッダーコメントに示されているとおり、既存アイコンをすべて含む sheet.js を隣に作成し、開きます。

ロゴとブランドマークには brand: true を指定します。これらは測定、描き直し、スタイル変更の対象外です。

シートでは、最も一般的な viewBox にある既存アイコンすべてから仕様を導き出します。種類ごとに、ストローク、端点、接合部、半径、グリッド間隔、余白、丸みのはみ出し量、インクの占有率を記録します。「Copy Spec」をクリックすると icon-spec.md が作成され、アイコンの隣に保存されます。

icon-spec.md がない状態で描画した場合や、手作業、サンプル、記憶をもとに測定した仕様から描画した場合は icons-measure-the-spec です。同じ viewBox のアイコンが3個未満の場合は、作業を止めて参照セットを依頼してください。

仕様から外れた既存アイコンは、外れ値として表示されます。レポートに記載してそのままにしてください。描き直しは scope で依頼すべき別作業です。

3. セットのグリッドに沿って描く

曲線のハンドルは自由に動かせますが、すべてのアンカーポイントは仕様のグリッド間隔に合わせます。currentColor を使用し、色を直接指定しないでください。グリッド間隔から外れた座標や、16進数のストローク色は icons-on-the-grid です。

グリッド間隔内では、直線のストロークの端を整数ピクセルに合わせます。2のストロークは整数ピクセル、1のストロークは半ピクセルに中心を置きます。1.5のストロークは1/4ピクセルに中心を置くと、外側の端が整数ピクセルに揃います。

セットでサイズごとに個別の描画データを提供している場合は、すべてのサイズを描き、サイズごとに1枚のシートを実行します。

セットのアイコンが整数ピクセル上の矩形だけで構成されている場合、そのセットはピクセルスタイルです。まず各グリフをテキストのグリッドとして描き、その後、そのグリッドを矩形に変換します。滑らかなパスから描き始めたピクセルアイコンは icons-pixel-grid-first です。ピクセルスタイルのセットではステップ5を省略し、motion のクロスフェードに置き換えます。

4. 目に見える形を整える

パーツ同士は、少なくともストローク幅分、かつ1px以上離します。16pxで2本のストロークがつながって塊に見える場合は icons-open-gaps です。

丸い形は、仕様で定められた丸みのはみ出し量を超えない範囲で余白の外側にはみ出せます。矢印や再生形状には、alignment の微調整を座標に反映して描き込みます。正方形と同じサイズで描いた円は alignment-visual-weight、枠の中央に配置した再生アイコンは alignment-optical-glyph です。

5. 新しいアイコンはすべて Morph Form で作成する

新しいアイコンはそれぞれアニメーションし、同じ種類のほかの新しいアイコンすべてにモーフィングします。各アイコンの path 要素の数は同じで、各パスは絶対座標の M で始まり、同じ数の明示的な C セグメントが続きます。

シートでは、最も複雑な新しいアイコンを基準に、両方の数を決めて Morph Form として表示します。短いパスの末尾には、長さゼロのセグメントを追加して数を合わせます。

背面と前面のように、同じ形を回転させた2つのアイコンは、1つの描画を共有します。切り替え時はポイントを動かすのではなく、アイコン全体を回転させます。シートでは、このペアに Spins と表示します。

直線セグメントは、ハンドルを両端に配置した3次ベジェ曲線です。閉じたストロークは Z を使わず、開始点に戻します。未使用のパスは、別のストローク上の1点に折りたたみ、その位置に隠しておきます。

各パスは最も上にあるアンカーから始めます。同じ高さのアンカーが複数ある場合は、最も左のアンカーから始めます。大きなストロークが大きなストロークにモーフィングするよう、パスは長いものから順に並べます。既存のアイコンにモーフィングさせるには、そのアイコンの Morph Form を同じインク色の新しいアイコンとして追加します。

パスを結合したり、シェイプを変換したりするオプティマイザーは Morph Form を壊すため、これらのファイルでは mergePaths と convertShapeToPath を無効にします。circle、rect、line、Z、相対コマンド、または Morph Form と異なるパス数がある場合は、icons-morph-form です。

6. 1つのスケルトンからアウトラインと塗りつぶしを作成する

アウトライン版と塗りつぶし版では、1つのスケルトンと1つの Morph Form を共有します。塗りつぶし版ではアウトライン自体のパスを塗りつぶし、シルエットを維持します。内側のディテールは幅を少なくとも 1px としたカウンターにし、それより狭いカウンターは削除します。塗りつぶしアイコンを一から描き直した場合は、icons-one-skeleton です。塗りつぶし版はモーフィングできないため、アウトライン版と塗りつぶし版は motion のクロスフェードで切り替えます。

7. 仕様に照らしてすべてのアイコンをリントする

シートでは、新しいアイコンごとに viewBox、ストローク、端点が開いている箇所のキャップ、角がある箇所のジョイン、グリッド、パディング、角丸、3桁を超える小数などをリントします。また、transform、id、class、インラインスタイル、マスク、クリップパスも拒否します。

インクの占有率は、アウトライン同士、塗りつぶし同士を比較し、セットがすでにカバーしている範囲内にあるかを確認します。セットにない種類は Not Verified と表示され、シート上で判定されます。不適合があれば icons-lint-the-spec です。

8. 1枚のシートでセット全体を確認する

シートでは名前順に並べるため、新しいグリフは既存のものの間に配置され、新しいアイコンにはそれぞれバッジが付きます。上部の Style、Size、Dark Tiles で、グリッドに表示する内容を設定します。

Pixels では、各アイコンをネイティブサイズで、1単位あたり1デバイスピクセルとしてラスタライズし、3倍に拡大します。ここでエッジがぼやけたり二重になったりする場合は、グリッドに問題があります。

Weight では、48px のアイコンに 2px のぼかしを適用し、ウェイトだけを残します。ここで新しいグリフが周囲より濃く、または薄く見える場合は、詰め込みすぎか、細すぎます。

Morph では、motion のカーブに沿って、それぞれの新しいアイコンを同じ種類の次のアイコンへとモーフィングします。モーフィング時にねじれたり、自己交差したり、点滅する点が現れたりする場合は、パスの順序が間違っています。

アイコンをクリックするとダイアログが開きます。Morph タブでは、ステージの下にあるアイコンを、貼り付けたアイコンも含めて連結し、各ステップが回転するのか、描画どおりにモーフィングするのか、変換が必要なのかを表示します。

変換後のプレビューはシート独自の推測であり、出荷する形式ではありません。Prompts を使うと、エージェントが適用する修正、描き直し、または Morph Form の依頼をコピーできます。

一から作成したシートや、アイコンを1つずつ確認した場合は、icons-one-sheet です。すべての指摘を修正し、Findings が空になるまでシートを開き直してください。

9. プロジェクトのアイコンコンポーネントに合わせる

props やファイル形式を含め、プロジェクトで既存のアイコン API に沿ってコンポーネントを生成します。呼び出し元が d をアニメーションしたり、ストロークを描画したりできるよう、各パスはそれぞれ独立した要素にします。独自の props を持つ一度限りのコンポーネントや、aria-hidden のない装飾用アイコンは、icons-match-the-api です。

ホバー、アクティブ、または切り替えアニメーションは、ユーザーから依頼された場合にのみ追加し、motion を通して実行します。コントロール内のコンテンツがアイコンのみの場合は defaults-name-icon-buttons を参照します。コントラストについては color-ui-contrast を参照します。

ペア

各チェックはペアになっています。問題のある行の隣に、それを置き換える行を示します。

ルール	問題のある例	置き換え例
icons-only-missing	セットにあるのに新しい SearchIcon を作成する	セット内の SearchIcon
icons-in-the-package	機能フォルダー内の ReceiptIcon	セット内の兄弟アイコンと並ぶ ReceiptIcon
icons-measure-the-spec	3 つのアイコンを手作業で測定して仕様を作成する	シートからコピーした icon-spec.md と、そのパス
icons-on-the-grid	0.25 刻みのグリッド上で stroke="#111" を使う M5 2.3	stroke="currentColor" を使う M5 2.25
icons-pixel-grid-first	ピクセルグリフを滑らかなパスとして描画する	テキストグリッドを rect に変換する
icons-open-gaps	0.5 離れた 1.5 のストロークを 2 本使う	1.5 離れたストローク
icons-morph-form	<circle r="4.5" /> と <path d="M10.5 10.5l3 3" /> を並べる	それぞれ M と 5 つの C セグメントを含む 3 つのパス
icons-one-skeleton	塗りつぶしアイコンを新しいパスとして描画する	アウトラインのパスを塗りつぶす
icons-lint-the-spec	2px のストロークに transform="translate(0.5 0.5)" を指定する	変換を使わず、仕様書のストロークとパディングを使う
icons-one-sheet	新しいアイコンだけを 24px でスクリーンショットに撮る	sheet.html をコピーし、sheet.js のみ作成する
icons-match-the-api	独自のサイズプロパティを持つ機能ファイルの svg	プロジェクトのアイコンコンポーネントを使い、装飾目的の場合は aria-hidden を指定する

報告

重大度。 HIGH は、仕様書なしで描画されたグリフ、またはセットにすでにあるグリフの重複です。MEDIUM は、グリッドから外れたアイコン、パスとして描画されたピクセルセット、閉じた隙間、失敗した lint、モーフ形式から外れたアイコン、または 2 つ目のスケルトンです。シートがない場合、セット外にファイルがある場合、またはコンポーネントがプロジェクトの API に準拠していない場合も MEDIUM です。シート上でねじれたり、点滅したりするモーフは LOW です。

形式。 根本原因ごとに 1 件の指摘を記載します。

file:line - [rule-id] what is wrong

続けて Rule | Count | Severity の概要と、既存の外れ値を別のリストに記載します。HIGH が 1 件でも残っている場合は Block、それ以外は Approve とします。問題がファイルではなく作業内容にある場合は、request 2 - [rule-id] と記載します。レンダリングできなかったシートには Not verified と記載します。