Icons beta

VelinStyle enthält ein eigenes Icon-System auf Basis der <velin-icon> Web Component und eines SVG-Spritesheets. English: Icons

Reifegrad: This surface is beta / foundation in VelinStyle 1.2.0 — usable now; schemas and coverage still expanding. CSS / Web Components / runtime remain stable. Studio and the complete Utility Engine stay planned.

Wann verwenden

Folge diesem Leitfaden, wenn du VelinStyle integrierst oder erweiterst (Icons).
Pinne @birdapi/velinstyle@1.2.0 und prüfe Reifegrad-Badges für Beta-Oberflächen.

Wann nicht

Behandle beta plan/review/meta nicht als fertiges AI-Designsystem.
Erfinde keine Studio- oder Utility-Engine-APIs, die noch geplant sind.

Usage

Standard-Sprite-Auflösung (when sprite is omitted): sprite attribute → <meta name="velin-icon-sprite"> or html[data-velin-icon-sprite] → VelinIcon.defaultSprite → relative velin-icons.svg (not a hardcoded /dist/… path). Use CDN icons with provider="lucide" (etc.) when you do not ship a local sprite.

<!-- Basic icon -->
<velin-icon name="heart" size="24"></velin-icon>

<!-- With color -->
<velin-icon name="star" size="20" class="velin-text-warning"></velin-icon>

<!-- Inside a button -->
<button class="velin-btn velin-btn--primary">
  <velin-icon name="download" size="16"></velin-icon> Download
</button>

Verfügbare Icons

VelinStyle liefert über 200 Icons für typische UI-Anforderungen:

arrow-up
arrow-down
arrow-left
arrow-right
check
x
plus
minus
search
menu
home
user
settings
heart
star
bell
mail
phone
camera
image
link
external-link
download
upload
copy
trash
edit
eye
moon
sun
github
twitter

Die vollständige Liste findest du in der Icon-Referenz des Quell-SVG-Sprites.

Externe Icon-Provider

Since v0.8.0, <velin-icon> supports loading icons from external providers via CDN. Use the provider attribute:

<!-- Lucide icon -->
<velin-icon name="heart" provider="lucide"></velin-icon>

<!-- Heroicons -->
<velin-icon name="academic-cap" provider="heroicons"></velin-icon>

<!-- Bootstrap Icons -->
<velin-icon name="star-fill" provider="bootstrap"></velin-icon>

<!-- Material Symbols -->
<velin-icon name="home" provider="material"></velin-icon>

<!-- Tabler Icons -->
<velin-icon name="brand-github" provider="tabler"></velin-icon>

Unterstützte Provider

Provider-Key	Name	License	Homepage
`lucide`	Lucide Icons	ISC	lucide.dev
`heroicons`	Heroicons	MIT	heroicons.com
`bootstrap`	Bootstrap Icons	MIT	icons.getbootstrap.com
`material`	Material Symbols	Apache 2.0	fonts.google.com/icons
`fontawesome`	Font Awesome (Free)	CC BY 4.0	fontawesome.com
`tabler`	Tabler Icons	MIT	tabler.io/icons

Icons werden vom CDN geladen und im Speicher gecacht. Wenn das CDN ausfällt, fällt VelinStyle auf das lokale Sprite zurück.

Eigene Provider (JS-API)

// Register your own provider at runtime
VelinIcon.registerProvider('myicons', 'https://mycdn.com/icons/{name}.svg');

// Then use it in HTML
// <velin-icon name="custom" provider="myicons"></velin-icon>

CLI-Icon-Verwaltung

Die VelinStyle-CLI bietet Befehle, um Icons externer Provider in dein lokales SVG-Sprite zu laden und zu verwalten:

# List available providers and installed icons
velinstyle icons list

# Download specific icons from a provider
velinstyle icons add lucide --icons heart,star,check,arrow-right

# Download with specific variant
velinstyle icons add heroicons --icons academic-cap --variant solid

# Remove all icons from a provider
velinstyle icons remove lucide

# Rebuild the SVG sprite after changes
velinstyle icons build

Eigene Inline-Icons

Du kannst auch Inline-SVG direkt verwenden:

<svg class="velin-icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
</svg>