Sari la conținut

Proiect open-source independent. Domeniul oficial este sistem.digital.

Sistem DigitalCatalog versionatsistem.digital
Meniu

Catalog · Fundamente

Iconițe

Un set minim de iconițe decorative, montate lângă text — niciodată în locul lui.

AlphaFundamentFundamente

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Previzualizare din markup-ul canonic

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components
Import CSS
@import '@sistem-digital/components/icons.css';
Import JavaScript opțional
import { iconNames, iconMarkup } from '@sistem-digital/components';
Markup canonic
<div style="display:flex;gap:var(--sd-space-4);align-items:center"><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="12" y1="10.5" x2="12" y2="17"/><circle cx="12" cy="6.5" r="0.75" fill="currentColor" stroke="none"/></svg><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="5 13 10 18 19 7"/></svg><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="12" y1="6" x2="12" y2="14"/><circle cx="12" cy="18" r="0.75" fill="currentColor" stroke="none"/></svg><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="20" y1="20" x2="15.3" y2="15.3"/></svg><svg class="sd-icon" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="5.5" width="16" height="15" rx="1.5"/><line x1="4" y1="10" x2="20" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/></svg></div>

Contract și surse

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

A fost utilă această pagină?

Linkul deschide un formular GitHub precompletat. Nu transmitem nimic până când alegi să publici feedback-ul și îți recomandăm să nu incluzi date personale.