2.17 #Components.Icon Icon
Ikony SVG renderowane przez sprite (<use>). Kolor dziedziczy currentColor.
Examples
Default styling
Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)
.icon--sm
Small 15×15px
Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)
.icon--lg
Large 24×24px
Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)
.icon--xl
Extra large 38×38px
Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)
Markup: icon.html
<div style="display: flex; gap: 24px; align-items: center;">
<svg class="icon icon--sm" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
<svg class="icon" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
<svg class="icon icon--lg" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
<svg class="icon icon--xl" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
</div>
<p style="margin-top:12px; font-size:13px; color:#999;">Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)</p>
Source:
src/scss/components/_icon.scss, line 1