Zum Hauptinhalt springen

Symbolkomponente

Symbolkomponente in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Symbols und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Das Paket @jutro/icons enthält die vorgefertigten Symbolkomponenten. In der Liste der Symbole finden Sie die gesamte Palette der Optionen.

import {
    AccessTimeIcon,
    ChevronLeftIcon,
    CheckIcon,
    CoveragesIcon,
} from '@jutro/icons';

<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />

Benutzerdefiniertes Beispiel​

Um ein benutzerdefiniertes Symbol hinzuzufügen, müssen Sie mithilfe der Wrapper-Komponente Icon eine neue Komponente definieren und untergeordnete SVG-Elemente verwenden.

Hinzufügen aus Datei​

  1. Erstellen Sie einen Ordner für Ihre benutzerdefinierten Symbole. Es wird empfohlen, src/assets/icons zu verwenden.
  2. Fügen Sie dem Ordner eine SVG-Datei hinzu, z. B. cust-helicopter.svg.
  3. Definieren Sie eine Symbolkomponente mit der hochgeladenen SVG-Datei:

export const CustomIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <image href="/icons/cust-helicopter.svg" height={'100%'}/>
    </Icon>
)

...

import { CustomIcon } from ...;

<CustomIcon
    className="customClass"
    size="small"
/>

  1. Fügen Sie den Pfad zum Symbol-Ordner in Ihrer Umgebung hinzu:
ICONS_PATH=./src/assets/icons

Zeichnung an​

Wenn Sie ein Symbol an Ort und Stelle zeichnen möchten, anstatt es aus einer Datei zu laden, können Sie SVG-Pfad- oder -Formelemente verwenden. Mit dem folgenden Code wird beispielsweise ein Kreis gezeichnet:

import { Icon } from "@jutro/icons";

export const CustomCircleIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <circle cx="50" cy="50" r="50" />
    </Icon>
);

...

import { CustomCircleIcon } from ...;

<CustomCircleIcon
    className="customClass"
    size="small"
/>