meowerse_
docs menu

Icon

A curated set of Tabler outline icons, drawn as inline SVG paths in the current text colour.

import { Icon } from "@meowerse/ui"; · source packages/ui/src/components/Icon.tsx

variants and states

decorative
with a label — becomes an image with a name
  • moon
  • sun
  • eye
  • eye-off
  • alert-triangle
  • circle-check
  • info-circle
  • copy
  • check
  • x
  • mail
  • brand-telegram
  • brand-instagram
  • brand-github
  • brand-linkedin
  • rosette-discount-check
  • logout
  • menu-2
  • settings
  • search
  • link
  • dots
  • plus
  • trash
  • edit
  • message
  • users
  • user
  • arrow-left
  • send
  • mood-smile
  • broadcast
  • reply
  • forward
  • refresh
  • share
every icon

props

proptypedefaultrequired
namestring the icon to draw; an unknown name renders nothing.—yes
sizenumber the icon's width and height, in pixels.18no
classNamestring extra class names to append.—no
labelstring gives the icon a name, making it an image instead of decorative.—no

css custom properties

Its rules use no custom properties.

Classes: .mw-icon. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

decorative

tsx
import { Icon } from "@meowerse/ui";

<Icon name="send" />

html (needs @meowerse/ui/tokens.css)
<svg class="mw-icon" data-icon="send" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14l11 -11"></path><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path></svg>

with a label

tsx
import { Icon } from "@meowerse/ui";

<Icon name="check" label="done" />

html (needs @meowerse/ui/tokens.css)
<svg class="mw-icon" data-icon="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="done"><path d="M5 12l5 5l10 -10"></path></svg>

accessibility

  • Decorative by default (aria-hidden); pass label to give it a name.
  • Paths are elements, not innerHTML, so it renders under Trusted Types.

do and don't

do

  • Pair icons with text, except in 44 px icon buttons that have an aria-label.

don't

  • Don't use an unknown name: it renders nothing.