ContextQMD
Back to Apitable

Icon New Zh.Stories

packages/components/src/stories/icon_new_zh.stories.mdx

1.13.0-beta.12.6 KB
Original Source

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

<Meta title={${StoryType.Design}/Icons 图标} />

Icons 图标

如何使用

需要从 @apitable/icons 库中引入需要的图标。

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

基本演示

<Canvas> <StarFilled /> </Canvas>

颜色

<Canvas> <StarFilled color="rgb(123, 103, 238)" /> </Canvas>

大小

<Canvas> <StarFilled color="rgb(123, 103, 238)" size={32} /> </Canvas>

继承父级颜色

<Canvas> <span style={{ color: 'rgb(123, 103, 238)' }}> <StarFilled currentColor size={32} /> </span> </Canvas>

Canvas 支持

图标经过 toString 方法统一的处理，变成由 Path 绘制的图形，在 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>
  )
}

效果如下：

<IconUseInCanvas />

API 接口

名称类型是否必须描述默认值
sizenumber | string必填icon 大小16px
colorstring选填颜色16px
currentColorboolean选填显示与父级元素相同的颜色
classNamestring选填覆盖样式传入 className

所有图标

<style>{` .icons-wrap { margin: 0; padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; } .icon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 150px; height: 100px; margin: 0 12px 12px 0; padding: 10px; border: 1px solid #eee; border-radius: 4px; } .icon-name { font-size: 12px; color: #999; } `}</style>

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>