System Ikon CSS

System ikon używa czystego CSS z maskami SVG, co zapewnia lepszą wydajność niż importowanie tysięcy komponentów Svelte. Ikony są renderowane jako elementy span z odpowiednimi klasami CSS.

Dostępne ikony

Strzałki

Ikony strzałek (arrow) z grotem, które wskazują kierunek:

Chevron (Caret)

Ikony chevron (znane również jako caret) - proste, klinowe wskaźniki kierunku, często używane w interfejsach nawigacyjnych:

Flagi

Ikony flag zachowują swoje oryginalne kolory dzięki użyciu bezpośrednich obrazów SVG. Ikony flag mają proporcje 3:2 (szerokość:wysokość), typowe dla większości flag państwowych, oraz delikatny efekt cienia, co zwiększa ich realizm.

Oznaczenia językowe

Ikony reprezentujące języki:

Sposób użycia

Komponent Icon

Zalecane jest korzystanie z komponentu Icon:

<script>
  import Icon from '$lib/components/Icon.svelte';
</script>

<Icon name="cart" />
<Icon name="heart" size="lg" />
<Icon name="arrow-right" size="sm" className="text-brand-primary" />

Poprzez klasy CSS

Możesz również używać klas CSS bezpośrednio:

<span class="icon icon-cart icon-md"></span>
<span class="icon icon-heart icon-lg text-danger"></span>

Dostępne rozmiary

Kolory brandowe

Domyślnie ikony używają koloru text-primary. Możesz jednak użyć dowolnej klasy koloru lub właściwości CSS color. Poniżej przykłady użycia naszych kolorów brandowych:

Kolory systemowe

Możesz również korzystać z kolorów systemowych zdefiniowanych w CSS:

Efekty specjalne

Możesz łączyć ikony z różnymi efektami z naszego systemu CSS:

Wszystkie ikony w tej dokumentacji mają również efekt powiększania przy najechaniu myszką:

<style>
  .icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease-in-out;
  }
  
  .icon-hover-zoom:hover .icon-wrapper {
    transform: scale(1.3);
  }
</style>

<div class="icon-hover-zoom">
  <div class="icon-wrapper">
    <Icon name="heart" size="xl" />
  </div>
</div>

Przykład użycia 'massive'

Rozmiar 'massive' jest idealny dla wyróżniających się elementów:

Dodawanie nowych ikon

Aby dodać nową ikonę:

1. Dodaj definicję klasy w src/lib/icons/icons.css
2. Konwertuj SVG na URL-encoded format używany w masce CSS
3. Dodaj nazwę ikony do odpowiedniej kategorii w iconCategories w pliku src/lib/icons/index.ts