widgets

Symbol

Graphic elements that quickly and concisely convey information to the user.

Features

Scalable vector graphic
Fully stylizable
Multiple visual styles
Auto adjust style based on rendering size

Links

Open in playground Open in Storybook View source

Anatomy

import { Symbol } from "@wonderflow/react-components";

export default () => {
  return <Symbol source="bell">;
};

tsx

Using custom symbols

The source property can be used to specify a custom symbol too. If you pass a component generated by SVGR or a custom svg element, it will be rendered in place of the built-in symbol.

The custom rendered symbol will be automatically sized according to the other properties set.

const CustomReactSymbol = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={48}
    height={48}
    viewBox="0 0 256 256"
    {...props}
  >
    <path d="M128 16a96.2 96.2 0 0 0-96 96c0 24 12.6 55.1 33.6 83s44.5 45 62.4 45 41.2-16.8 62.4-45 33.6-59 33.6-83a96.2 96.2 0 0 0-96-96ZM64 116v-4a12 12 0 0 1 12-12 36 36 0 0 1 36 36v4a12 12 0 0 1-12 12 36 36 0 0 1-36-36Zm80 84h-32a8 8 0 0 1 0-16h32a8 8 0 0 1 0 16Zm48-84a36 36 0 0 1-36 36 12 12 0 0 1-12-12v-4a36 36 0 0 1 36-36 12 12 0 0 1 12 12Z" />
  </svg>
)

const MyComponent = () => (
  <Symbol source={<CustomReactSymbol />} dimension={48} />
);

jsx

API Reference

PROPERTY

TYPE

DEFAULT

source*

enum

dimension

enum

16

weight

enum

outline

Accessibility

Svg are considered as images. If they are coupled with a text you have to hide them to AT by using the aria-hidden attribute.