パーツ番号 04-13-02 ・ CSSのみ

ハート型評価入力(SVGアイコン)

SVGのハートアイコンを並べた評価選択欄。コスメやアパレルなど「かわいい系」ショップのレビュー入力デザインに合う。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-02-row">
          <span class="d04-13-02-heart on"><svg viewBox="0 0 24 24" class="d04-13-02-svg"><path d="M12 21s-6.7-4.3-9.3-8.2C.6 9.9 1.7 6 5 5c2-.1 3.4 1 4 2.3C9.6 6 11 4.9 13 5c3.3 0 4.4 4.9 2.3 7.8C18.7 16.7 12 21 12 21z" fill="currentColor"/></svg></span>
          <span class="d04-13-02-heart on"><svg viewBox="0 0 24 24" class="d04-13-02-svg"><path d="M12 21s-6.7-4.3-9.3-8.2C.6 9.9 1.7 6 5 5c2-.1 3.4 1 4 2.3C9.6 6 11 4.9 13 5c3.3 0 4.4 4.9 2.3 7.8C18.7 16.7 12 21 12 21z" fill="currentColor"/></svg></span>
          <span class="d04-13-02-heart on"><svg viewBox="0 0 24 24" class="d04-13-02-svg"><path d="M12 21s-6.7-4.3-9.3-8.2C.6 9.9 1.7 6 5 5c2-.1 3.4 1 4 2.3C9.6 6 11 4.9 13 5c3.3 0 4.4 4.9 2.3 7.8C18.7 16.7 12 21 12 21z" fill="currentColor"/></svg></span>
          <span class="d04-13-02-heart on"><svg viewBox="0 0 24 24" class="d04-13-02-svg"><path d="M12 21s-6.7-4.3-9.3-8.2C.6 9.9 1.7 6 5 5c2-.1 3.4 1 4 2.3C9.6 6 11 4.9 13 5c3.3 0 4.4 4.9 2.3 7.8C18.7 16.7 12 21 12 21z" fill="currentColor"/></svg></span>
          <span class="d04-13-02-heart"><svg viewBox="0 0 24 24" class="d04-13-02-svg"><path d="M12 21s-6.7-4.3-9.3-8.2C.6 9.9 1.7 6 5 5c2-.1 3.4 1 4 2.3C9.6 6 11 4.9 13 5c3.3 0 4.4 4.9 2.3 7.8C18.7 16.7 12 21 12 21z" fill="currentColor"/></svg></span>
        </div>

CSS

.d04-13-02-row{display:flex;gap:8px}
        .d04-13-02-heart{width:34px;height:34px;color:#e2e8f0;display:inline-block}
        .d04-13-02-heart.on{color:#ef4444}
        .d04-13-02-svg{width:100%;height:100%;display:block}

クラス名 .d04-13-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。