UIコンポーネントライブラリ向けスプライトシート

UIコンポーネント用スプライトシート

UIコンポーネントライブラリはボタン、ナビゲーションメニュー、フォームコントロール、ステータスインジケーターで機能する一貫したアイコンシステムが必要です。設計されたスプライトシートはこの基盤を最小限のオーバーヘッドで提供します。

コンポーネントアイコンアーキテクチャ

[class^="ui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  background-image: url('ui-sprites.png');
  background-repeat: no-repeat;
}

.ui-icon-sm { width: 16px; height: 16px; }
.ui-icon-md { width: 24px; height: 24px; }
.ui-icon-lg { width: 32px; height: 32px; }

マルチサイズサポートの場合、1つのシートをスケーリングするのではなく、各サイズで個別のスプライトシートを作成します。これによりピクセルパーフェクトレンダリングが保証されます。

ダークモードサポート

.icon { background-image: url('sprites-dark.png'); }

@media (prefers-color-scheme: light) {
  .icon { background-image: url('sprites-light.png'); }
}

またはCSSフィルターで簡単な色反転：

.theme-light .icon {
  filter: invert(1);
}