Skip to main content
Browse docs

Marwes documentation

Icon

Named SVG icon family with one Icon component, a generated runtime inventory, gallery-driven Storybook discovery, and shared React/Vue contract coverage for decorative versus labelled behavior.

What this family solves

Named SVG icon family with one Icon component, a generated runtime inventory, gallery-driven Storybook discovery, and shared React/Vue contract coverage for decorative versus labelled behavior.

Use when

  • The UI needs a named decorative or labelled icon alongside text, controls, or status copy.
  • The product wants React and Vue icon behavior to stay aligned through the shared icon registry, size scale, stroke-width scale, and contract coverage.
  • Teams need a searchable gallery for the shipped icon inventory before placing icons into larger families like buttons, tabs, inputs, or tooltips.

Avoid when

  • The icon would be carrying the only accessible meaning of an interaction without a parent control label or its own explicit aria-label.
  • A richer component such as Button, IconButton, TooltipGroup, Avatar, or Toast is the more honest family surface for the job.
  • The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current Icon family does not ship.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

Icon

Type

IconProps

Enum

IconName

Vue — @marwes-ui/vue

Component

Icon

Type

IconProps

Enum

IconName

Svelte — @marwes-ui/svelte

Component

Icon

Type

IconProps

Enum

IconName

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Icon } from "@marwes-ui/react"

export function Example() {
  return <Icon name="search" ariaLabel="Search" />
}

Vue

<script setup lang="ts">
import { Icon } from "@marwes-ui/vue"
</script>

<template>
  <Icon name="search" aria-label="Search" />
</template>

Svelte

<script lang="ts">
  import { Icon } from "@marwes-ui/svelte"
</script>

<Icon name="search" aria-label="Search" />

Accessibility requirements

  • Decorative vs informative: Mark every icon decorative or give it a truthful ariaLabel; never leave both unset.
  • Icon-only information review: Verify decorative icons are never the only carrier of required information.
  • Icon-only control naming: Give every icon-only control an accessible name through its public naming prop.
  • Manual review boundary: Product-level review that icon-only buttons, tabs, tooltip triggers, and other parent controls always get an accessible name from the parent surface or an explicit label.
  • Manual review 2: Visual review that the current runtime stroke-based icon rendering still feels aligned with the locally synced Figma inventory and category galleries.
  • Manual review 3: Architectural review of whether the adapters should eventually converge on createIconRecipe and icon.css, or whether the unused recipe-layer affordances should be trimmed.

Theming

Icon uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources