Icon

Installation

npm i @totejs/icons

Import

import { ColoredWarningIcon, DefenseIcon } from '@totejs/icons';

Usage

<Wrap>
  <ColoredWarningIcon />
  <DefenseIcon />
  <DeleteIcon color="scene.success.normal" />
</Wrap>

Sizes

<Wrap>
  {/* 16px */}
  <ColoredWarningIcon size="sm" />


  {/* 20px */}
  <ColoredWarningIcon size="md" />


  {/* 24px */}
  <ColoredWarningIcon size="lg" />


  {/* 32px */}
  <ColoredWarningIcon size="plus" />


  {/* 40px */}
  <ColoredWarningIcon size="xp" />
</Wrap>

All icons

Creating your custom icons

This enables you to style icons with style props, we provides two ways for creating your custom icons:

  • Using the Icon component
  • Using our Icon Tool(Coming soon...)
import { Icon } from '@totejs/icons';
function Example() {
  function MyIcon(props) {
    return (
      <Icon viewBox="0 0 200 200" color="scene.danger.normal" {...props}>
        <path
          fill="currentColor"
          d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
        />
      </Icon>
    );
  }


  return <MyIcon boxSize={50} />;
}

Props

size

Type:

sm | md | lg | plus | xp

Default:

lg