Icons

Das Icon-Set ist geschlossen: tuix-icon zeichnet eines der 88 Icons unten und sonst nichts. Der Enum-Eintrag ist der Attributwert in SCREAMING_CASE, IconName.ARROW_DOWN ist also name="arrow-down".

<tuix-icon name="arrow-down"></tuix-icon>

import { TuixIcon } from 'tuix-webcomponents/react'
import { IconName } from 'tuix-webcomponents'
 
;<TuixIcon name={IconName.ARROW_DOWN} />

Unten stehen alle Icons. Das Feld über dem Raster filtert sie nach Namen, und ein Klick kopiert den Namen in die Zwischenablage. In jeder Grösse und Farbe stehen sie im Storybook.

Namen

Icons werden geladen…

Enum-Einträge

Eintrag	`name`
`IconName.ARROW_DOWN`	`arrow-down`
`IconName.ARROW_LEFT`	`arrow-left`
`IconName.ARROW_UP`	`arrow-up`
`IconName.ARROW_RIGHT`	`arrow-right`
`IconName.SEARCH`	`search`
`IconName.EYE_ON`	`eye-on`
`IconName.EYE_OFF`	`eye-off`
`IconName.EYE_CLOSE_LINE`	`eye-close-line`
`IconName.TRIANGLE_EXCLAMATION`	`triangle-exclamation`
`IconName.CIRCLE_X`	`circle-x`
`IconName.LOADER`	`loader`
`IconName.LOADER_CIRCLE`	`loader-circle`
`IconName.CIRCLE_CHECK`	`circle-check`
`IconName.CHEVRON_DOWN`	`chevron-down`
`IconName.CHEVRON_UP`	`chevron-up`
`IconName.CHEVRON_LEFT`	`chevron-left`
`IconName.CHEVRON_RIGHT`	`chevron-right`
`IconName.CHECK`	`check`
`IconName.NAV_HAMBURGUER`	`nav-hamburguer`
`IconName.SUN`	`sun`
`IconName.MOON`	`moon`
`IconName.BOOKMARK`	`bookmark`
`IconName.UPLOAD`	`upload`
`IconName.DOWNLOAD`	`download`
`IconName.MAP_PIN`	`map-pin`
`IconName.PHONE`	`phone`
`IconName.MAIL`	`mail`
`IconName.MAILS`	`mails`
`IconName.LAYERS`	`layers`
`IconName.SEND`	`send`
`IconName.FILE`	`file`
`IconName.FORMAT_LIST`	`format-list`
`IconName.SAVE`	`save`
`IconName.SQUARE_CODE`	`square-code`
`IconName.BRACES`	`braces`
`IconName.ADD_MAIL`	`add-mail`
`IconName.MAIL_LOGO`	`mail-logo`
`IconName.BUILDING`	`building`
`IconName.CODE`	`code`
`IconName.USER_PLUS`	`user-plus`
`IconName.FACEBOOK`	`facebook`
`IconName.TWITTER`	`twitter`
`IconName.LINKEDIN`	`linkedin`
`IconName.SHARE`	`share`
`IconName.COPY`	`copy`
`IconName.GOOGLE`	`google`
`IconName.BELL`	`bell`
`IconName.GEAR`	`gear`
`IconName.LOGOUT`	`logout`
`IconName.CIRCLE_EXCLAMATION`	`circle-exclamation`
`IconName.CAMERA`	`camera`
`IconName.PENCIL`	`pencil`
`IconName.X`	`x`
`IconName.PLUS`	`plus`
`IconName.INVOICE`	`invoice`
`IconName.DELETE`	`delete`
`IconName.TRIANGLE_ARROW_DOWN`	`triangle-arrow-down`
`IconName.USERS`	`users`
`IconName.CLOCK`	`clock`
`IconName.CHECK_CLOCK`	`check-clock`
`IconName.GLOBE`	`globe`
`IconName.CALENDAR`	`calendar`
`IconName.STATS`	`stats`
`IconName.HOLIDAYS`	`holidays`
`IconName.TRENDING_UP`	`trending-up`
`IconName.ARCHIVE`	`archive`
`IconName.ACCESS_TOKEN`	`access-token`
`IconName.RESIZE`	`resize`
`IconName.CHAT`	`chat`
`IconName.MESSAGE_CIRCLE`	`message-circle`
`IconName.BOOK`	`book`
`IconName.BOOK_PLUS`	`book-plus`
`IconName.BOOKS`	`books`
`IconName.BOOK_SEARCH`	`book-search`
`IconName.MORE_HORIZONTAL`	`more-horizontal`
`IconName.BOT`	`bot`
`IconName.SCROLL_DOWN`	`scroll-down`
`IconName.PLAY`	`play`
`IconName.EXTERNAL_LINK`	`external-link`
`IconName.TRIANGLE_RIGHT`	`triangle-right`
`IconName.FILE_PLUS`	`file-plus`
`IconName.FILE_TEXT`	`file-text`
`IconName.HIGHLIGHT`	`highlight`
`IconName.MCP_LOGO`	`mcp-logo`
`IconName.ENDPOINTS`	`endpoints`
`IconName.PLAY_OUTLINE`	`play-outline`
`IconName.REFRESH`	`refresh`
`IconName.SHIELD`	`shield`

Fehlt ein Icon?

Der Satz ist geschlossen: ein Icon, das oben nicht aufgeführt ist, lässt sich nicht an name übergeben. Neue Icons kommen in die Bibliothek selbst, auf einer 24x24-viewBox: die Form wird mit stroke gezeichnet, das äussere <svg> bleibt auf fill="none". Jedes stroke wird dann beim Rendern aus color neu gefärbt, und fill füllt die umschlossene Fläche, sobald es gesetzt ist. Ein Icon muss also nur einmal gezeichnet werden und funktioniert dann in jeder Farbe und in beiden Themes. Ein Issue im Repository mit dem SVG genügt, dann kommt es mit dem nächsten Release.

Icons

Namen

Enum-Einträge

Fehlt ein Icon?

Auf dieser Seite