Icon.Stories - Apitable

import { Meta, Canvas } from '@storybook/addon-docs'; import { IconUseInCanvas } from './examples/icon-in-canvas'; import { StarFilled } from '@apitable/icons'; import { StoryType } from './constants';

Icons

How to use

Import the required icons from the '@apitable/icons' library.

jsx

import { StarFilled } from '@apitable/icons';

Basic Examples

Color

Size

Inherit Parent Color

Canvas Support

The icon is formatted by the 'toString' method and becomes a graph drawn by Path. The icon is drawn in canvas.

tsx

import React, { useEffect } from 'react';
import { StarFilled } from '@apitable/icons';

export const Icon2Canvas = () => {
  useEffect(()=>{
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
    if (canvas){
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'red';
      const p = new Path2D(StarFilled.toString());
      ctx.fill(p);
    }
  },[])
  return (
    <div>
      <StarFilled />
      <canvas id="canvas" height="50" style={{ backgroundColor: '#eee' }}/>
    </div>
  )
}

The effect is as follows:

API Interface

Name	Type	Required	Description	Default
size	number \| string	true	icon size	16px
color	string	false	color	16px
currentColor	boolean	false	display the same color as the parent element
className	string	false	override style passed in className

All Icons

import * as Icons from '@apitable/icons'; const names = Object.keys(Icons);

<ul className="icons-wrap" > { names.map((iconName) => { const Icon = Icons[iconName]; return <li className="icon-wrap" key={iconName}> <Icon size={60} /> <span className="icon-name">{iconName}</span> </li> }) } </ul>