Icons Komponenten

Viele unserer Komponenten haben die Möglichkeit, ein optionales Icons anzuzeigen. Überall dort, wo die Komponente ein Icon erwartet, kann eines der hier aufgelisteten Icons angegeben werden. Mit der %(icon)s-Komponente können überall nach Belieben weitere Icons eingebaut werden.

Verwendung

Die Komponente wird über das {% icon %} Tag eingebunden.

{% load insight_tags %} {% icon name="home" size="m" %} {% icon name="check" color="success" %} {% icon name="exclamation-triangle" color="warning" size="l" %}

Parameter

Name Typ Beschreibung Standardwert Erforderlich
name str

Name des Icons (siehe Tabelle unten).

 question-mark False
size Size
Size

Standard size scale used for spacing, icons, and component dimensions.

xs s m l xl
Typen Dokumentation →

Größe des Icons.

 m False
color IconColor
IconColor

Color tokens for icons (semantic colors and text colors).

"" primary secondary success warning danger info text-headline text-body text-muted text-link
Typen Dokumentation →

Farb-Token für das Icon. Bei einer leeren Zeichenfolge wird der Wert vom übergeordneten Element übernommen.

 "" False

Icon Portfolio

INFO:

Die hier gezeigten Icons stammen von Heroicons. Heroicons stellt Icons unter der MIT-Lizenz zur Verfügung. Derzeit bieten wir nur die outline Varianten an.

Icons: 325
Klicke auf das Symbol, um das Tag mit dem entsprechenden Icon-Namen in die Zwischenablage zu kopieren.

Größen

Alles Icons können in unterschiedlichen Größen verwendet werden:

xs s m l xl

Farben

Icons können mithilfe von Design-Tokens farblich gestaltet werden. Die Farbe wird über CSS-Klassen zugewiesen, wodurch die Konsistenz mit dem Designsystem gewährleistet wird.

Semantische Farben

primary secondary success warning danger info

Textfarben

text-headline text-body text-muted text-link

Benutzerdefinierte Icons hinzufügen

Mit dem Django Commandcompile_icons können eigene Icons hinzugefügt werden. Dieser Befehl generiert eine neues icons.html Template, indem die benutzerdefinierten Icons mit den mitgelieferten Icons zusammenführt werden. Benutzerdefinierte Icons überschreiben mitgelieferte Icons mit demselben Namen.

Verwendung

# From a directory of SVG files python manage.py compile_icons --dir path/to/icons/ # From an SVG sprite sheet python manage.py compile_icons --sprite path/to/sprite.svg # Combine both sources python manage.py compile_icons --dir path/to/icons/ --sprite path/to/sprite.svg

Optionen

  • --dir – Verzeichnis mit einzelnen SVG-Dateien
  • --sprite – Pfad zu einer SVG-Sprite-Sheet-Datei (extrahiert <symbol>-Elemente)
  • --output – Benutzerdefinierter Ausgabepfad (Standard: templates/insight_ui/components/icons.html)
  • --list-bundled – Alle Namen der enthaltenen Icons auflisten und beenden

Icon Benennung

Die Namen der Icons werden aus den Dateinamen (bei Verzeichnissen) oder den Symbol-IDs (bei Sprites) abgeleitet. Die Namen werden normalisiert: Sie werden in Kleinbuchstaben umgewandelt, Unterstriche werden zu Bindestrichen, und gängige Präfixe wie icon- oder ic_ werden entfernt.

my_custom_icon.svg → my-custom-icon Icon-ArrowLeft.svg → arrowleft ic_home.svg → home

Beispiel: Ein mitgeliefertes Icon überschreiben

Um das mitgelieferte Icon home durch eine eigene Version zu ersetzen, erstelle in deinem Icon-Verzeichnis eine Datei mit dem Namen home.svg:

python manage.py compile_icons --dir my_project/icons/ # Output: Total icons: 287 (1 custom, 287 bundled)