Icon

Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.GitHub

Beispiel

import { IconHome } from "@mittwald/flow-react-components/Icons";

<IconHome />

Mit Tabler Icon

import Icon from "@mittwald/flow-react-components/Icon";
import { IconStar } from "@tabler/icons-react";

<Icon>
  <IconStar />
</Icon>

Mit SVG

import Icon from "@mittwald/flow-react-components/Icon";

<Icon>
  <svg
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="50" cy="50" r="50" />
  </svg>
</Icon>

Mit SVG string

import Icon from "@mittwald/flow-react-components/Icon";

export default () => {
  const svgString = `\
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="50" />
    </svg>
  `;

  return <Icon>{svgString}</Icon>;
}

Farben

Wenn das SVG Farben unterstützt, kann es per CSS eingefärbt werden.

import { IconHome } from "@mittwald/flow-react-components/Icons";

<IconHome
  style={{ color: "var(--primary--color--800)" }}
/>

Größen

import { IconHome } from "@mittwald/flow-react-components/Icons";

<Row>
  <IconHome size="s" />
  <IconHome size="m" />
  <IconHome size="l" />
</Row>

Colors

Dark

import { IconHome } from "@mittwald/flow-react-components/Icons";

<IconHome color="dark" />

Light

import { IconHome } from "@mittwald/flow-react-components/Icons";

<IconHome color="light" />

Verfügbare Icons

Decorative

mittwald

Star

Star Filled

Project

Server

Customer

Support

E-Mail

Delivery Box

App

Domain

Subdomain

Database

Changelog

Extension

Order

Performance

Ticket

ContractPartner

Invoice

Payment

Contract Position

Camera

Backup

Cronjob

Member

User

Search Engine

Ssh Sftp

Inbox

Spam Protection Off

Spam Protection On

Number

Clock

Calendar

Dashboard

Terminate

Security

SshKey

import {
  IconApp,
  IconBackup,
  IconCalendar,
  IconCamera,
  IconChangelog,
  IconClock,
  IconContractPartner,
  IconContractPosition,
  IconCronjob,
  IconCustomer,
  IconDashboard,
  IconDatabase,
  IconDeliveryBox,
  IconDomain,
  IconEmail,
  IconExtension,
  IconInbox,
  IconInvoice,
  IconMember,
  IconMittwald,
  IconNumber,
  IconOrder,
  IconPayment,
  IconPerformance,
  IconProject,
  IconSearchEngine,
  IconSecurity,
  IconServer,
  IconSpamProtectionOff,
  IconSpamProtectionOn,
  IconSshKey,
  IconSshSftp,
  IconStar,
  IconStarFilled,
  IconSubdomain,
  IconSupport,
  IconTerminate,
  IconTicket,
  IconUser,
} from "@mittwald/flow-react-components/Icons";
import Label from "@mittwald/flow-react-components/Label";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";

<ColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}>
  <LabeledValue>
    <Label>mittwald</Label>
    <IconMittwald />
  </LabeledValue>
  <LabeledValue>
    <Label>Star</Label>
    <IconStar />
  </LabeledValue>
  <LabeledValue>
    <Label>Star Filled</Label>
    <IconStarFilled />
  </LabeledValue>
  <LabeledValue>
    <Label>Project</Label>
    <IconProject />
  </LabeledValue>
  <LabeledValue>
    <Label>Server</Label>
    <IconServer />
  </LabeledValue>
  <LabeledValue>
    <Label>Customer</Label>
    <IconCustomer />
  </LabeledValue>
  <LabeledValue>
    <Label>Support</Label>
    <IconSupport />
  </LabeledValue>
  <LabeledValue>
    <Label>E-Mail</Label>
    <IconEmail />
  </LabeledValue>
  <LabeledValue>
    <Label>Delivery Box</Label>
    <IconDeliveryBox />
  </LabeledValue>
  <LabeledValue>
    <Label>App</Label>
    <IconApp />
  </LabeledValue>
  <LabeledValue>
    <Label>Domain</Label>
    <IconDomain />
  </LabeledValue>
  <LabeledValue>
    <Label>Subdomain</Label>
    <IconSubdomain />
  </LabeledValue>
  <LabeledValue>
    <Label>Database</Label>
    <IconDatabase />
  </LabeledValue>
  <LabeledValue>
    <Label>Changelog</Label>
    <IconChangelog />
  </LabeledValue>
  <LabeledValue>
    <Label>Extension</Label>
    <IconExtension />
  </LabeledValue>
  <LabeledValue>
    <Label>Order</Label>
    <IconOrder />
  </LabeledValue>
  <LabeledValue>
    <Label>Performance</Label>
    <IconPerformance />
  </LabeledValue>
  <LabeledValue>
    <Label>Ticket</Label>
    <IconTicket />
  </LabeledValue>
  <LabeledValue>
    <Label>ContractPartner</Label>
    <IconContractPartner />
  </LabeledValue>
  <LabeledValue>
    <Label>Invoice</Label>
    <IconInvoice />
  </LabeledValue>
  <LabeledValue>
    <Label>Payment</Label>
    <IconPayment />
  </LabeledValue>
  <LabeledValue>
    <Label>Contract Position</Label>
    <IconContractPosition />
  </LabeledValue>
  <LabeledValue>
    <Label>Camera</Label>
    <IconCamera />
  </LabeledValue>
  <LabeledValue>
    <Label>Backup</Label>
    <IconBackup />
  </LabeledValue>
  <LabeledValue>
    <Label>Cronjob</Label>
    <IconCronjob />
  </LabeledValue>
  <LabeledValue>
    <Label>Member</Label>
    <IconMember />
  </LabeledValue>
  <LabeledValue>
    <Label>User</Label>
    <IconUser />
  </LabeledValue>
  <LabeledValue>
    <Label>Search Engine</Label>
    <IconSearchEngine />
  </LabeledValue>
  <LabeledValue>
    <Label>Ssh Sftp</Label>
    <IconSshSftp />
  </LabeledValue>
  <LabeledValue>
    <Label>Inbox</Label>
    <IconInbox />
  </LabeledValue>
  <LabeledValue>
    <Label>Spam Protection Off</Label>
    <IconSpamProtectionOff />
  </LabeledValue>
  <LabeledValue>
    <Label>Spam Protection On</Label>
    <IconSpamProtectionOn />
  </LabeledValue>
  <LabeledValue>
    <Label>Number</Label>
    <IconNumber />
  </LabeledValue>
  <LabeledValue>
    <Label>Clock</Label>
    <IconClock />
  </LabeledValue>
  <LabeledValue>
    <Label>Calendar</Label>
    <IconCalendar />
  </LabeledValue>
  <LabeledValue>
    <Label>Dashboard</Label>
    <IconDashboard />
  </LabeledValue>
  <LabeledValue>
    <Label>Terminate</Label>
    <IconTerminate />
  </LabeledValue>
  <LabeledValue>
    <Label>Security</Label>
    <IconSecurity />
  </LabeledValue>
  <LabeledValue>
    <Label>SshKey</Label>
    <IconSshKey />
  </LabeledValue>
</ColumnLayout>

Functional

Home

Notification

Logout

View

Filter

Sorting

Context Menu

Maximize

Minimize

Edit

Save

Settings

Delete

Copy

Backlink

External Link

Chevron Down

Chevron Left

Chevron Right

ChevronUp

Show

Hide

Plus

Minus

Code

Checkbox Checked

Checkbox Empty

Checkbox Indeterminate

RadioOff

RadioOn

Refresh

Check

Download

Redo

Undo

import {
  IconBackLink,
  IconCheck,
  IconCheckboxChecked,
  IconCheckboxEmpty,
  IconCheckboxIndeterminate,
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
  IconChevronUp,
  IconClose,
  IconCode,
  IconContextMenu,
  IconCopy,
  IconDelete,
  IconDownload,
  IconEdit,
  IconExternalLink,
  IconFilter,
  IconHide,
  IconHome,
  IconLogout,
  IconMaximize,
  IconMenu,
  IconMinimize,
  IconMinus,
  IconNotification,
  IconPlus,
  IconRadioOff,
  IconRadioOn,
  IconRedo,
  IconRefresh,
  IconSave,
  IconSearch,
  IconSettings,
  IconShare,
  IconShow,
  IconSorting,
  IconUndo,
  IconView,
} from "@mittwald/flow-react-components/Icons";
import Label from "@mittwald/flow-react-components/Label";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";

<ColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}>
  <LabeledValue>
    <Label>Home</Label>
    <IconHome />
  </LabeledValue>
  <LabeledValue>
    <Label>Notification</Label>
    <IconNotification />
  </LabeledValue>

  <LabeledValue>
    <Label>Logout</Label>
    <IconLogout />
  </LabeledValue>
  <LabeledValue>
    <Label>Search</Label>
    <IconSearch />
  </LabeledValue>
  <LabeledValue>
    <Label>Menu</Label>
    <IconMenu />
  </LabeledValue>
  <LabeledValue>
    <Label>View</Label>
    <IconView />
  </LabeledValue>
  <LabeledValue>
    <Label>Filter</Label>
    <IconFilter />
  </LabeledValue>
  <LabeledValue>
    <Label>Sorting</Label>
    <IconSorting />
  </LabeledValue>
  <LabeledValue>
    <Label>Context Menu</Label>
    <IconContextMenu />
  </LabeledValue>
  <LabeledValue>
    <Label>Maximize</Label>
    <IconMaximize />
  </LabeledValue>
  <LabeledValue>
    <Label>Minimize</Label>
    <IconMinimize />
  </LabeledValue>
  <LabeledValue>
    <Label>Edit</Label>
    <IconEdit />
  </LabeledValue>
  <LabeledValue>
    <Label>Share</Label>
    <IconShare />
  </LabeledValue>
  <LabeledValue>
    <Label>Save</Label>
    <IconSave />
  </LabeledValue>
  <LabeledValue>
    <Label>Settings</Label>
    <IconSettings />
  </LabeledValue>
  <LabeledValue>
    <Label>Delete</Label>
    <IconDelete />
  </LabeledValue>
  <LabeledValue>
    <Label>Copy</Label>
    <IconCopy />
  </LabeledValue>
  <LabeledValue>
    <Label>Backlink</Label>
    <IconBackLink />
  </LabeledValue>
  <LabeledValue>
    <Label>External Link</Label>
    <IconExternalLink />
  </LabeledValue>
  <LabeledValue>
    <Label>Chevron Down</Label>
    <IconChevronDown />
  </LabeledValue>
  <LabeledValue>
    <Label>Chevron Left</Label>
    <IconChevronLeft />
  </LabeledValue>
  <LabeledValue>
    <Label>Chevron Right</Label>
    <IconChevronRight />
  </LabeledValue>
  <LabeledValue>
    <Label>ChevronUp</Label>
    <IconChevronUp />
  </LabeledValue>
  <LabeledValue>
    <Label>Close</Label>
    <IconClose />
  </LabeledValue>
  <LabeledValue>
    <Label>Show</Label>
    <IconShow />
  </LabeledValue>
  <LabeledValue>
    <Label>Hide</Label>
    <IconHide />
  </LabeledValue>
  <LabeledValue>
    <Label>Plus</Label>
    <IconPlus />
  </LabeledValue>
  <LabeledValue>
    <Label>Minus</Label>
    <IconMinus />
  </LabeledValue>
  <LabeledValue>
    <Label>Code</Label>
    <IconCode />
  </LabeledValue>
  <LabeledValue>
    <Label>Checkbox Checked</Label>
    <IconCheckboxChecked />
  </LabeledValue>
  <LabeledValue>
    <Label>Checkbox Empty</Label>
    <IconCheckboxEmpty />
  </LabeledValue>
  <LabeledValue>
    <Label>Checkbox Indeterminate</Label>
    <IconCheckboxIndeterminate />
  </LabeledValue>
  <LabeledValue>
    <Label>RadioOff</Label>
    <IconRadioOff />
  </LabeledValue>
  <LabeledValue>
    <Label>RadioOn</Label>
    <IconRadioOn />
  </LabeledValue>
  <LabeledValue>
    <Label>Refresh</Label>
    <IconRefresh />
  </LabeledValue>
  <LabeledValue>
    <Label>Check</Label>
    <IconCheck />
  </LabeledValue>
  <LabeledValue>
    <Label>Download</Label>
    <IconDownload />
  </LabeledValue>
  <LabeledValue>
    <Label>Redo</Label>
    <IconRedo />
  </LabeledValue>
  <LabeledValue>
    <Label>Undo</Label>
    <IconUndo />
  </LabeledValue>
</ColumnLayout>

Status

Danger

Warning

Success

Info

Pending

Failed

Succeeded

import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import Label from "@mittwald/flow-react-components/Label";
import {
  IconDanger,
  IconFailed,
  IconInfo,
  IconPending,
  IconSucceeded,
  IconSuccess,
  IconWarning,
} from "@mittwald/flow-react-components/Icons";

<ColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}>
  <LabeledValue>
    <Label>Danger</Label>
    <IconDanger />
  </LabeledValue>
  <LabeledValue>
    <Label>Warning</Label>
    <IconWarning />
  </LabeledValue>
  <LabeledValue>
    <Label>Success</Label>
    <IconSuccess />
  </LabeledValue>
  <LabeledValue>
    <Label>Info</Label>
    <IconInfo />
  </LabeledValue>
  <LabeledValue>
    <Label>Pending</Label>
    <IconPending />
  </LabeledValue>
  <LabeledValue>
    <Label>Failed</Label>
    <IconFailed />
  </LabeledValue>
  <LabeledValue>
    <Label>Succeeded</Label>
    <IconSucceeded />
  </LabeledValue>
</ColumnLayout>

Feedback geben

Flow

Components