Icon 图标

基本使用

tsx

import { Icon, icons, utils } from "@lite-code/pro-shineout";
import { Message } from "shineout";

export default () => {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 20,
        alignContent: "flex-start",
        background: "var(--soui-neutral-fill-1)",
      }}
    >
      {icons.map((name) => {
        return (
          <Icon
            circle
            name={name}
            tooltip="点击复制代码"
            onClick={async () => {
              await utils.copyToClipBoard(`<Icon name="${name}" />`);
              Message.success(`已复制 <Icon name="${name}" />`);
            }}
          />
        );
      })}
    </div>
  );
};

高亮主题

tsx

import { Icon } from "@lite-code/pro-shineout";
import { Gap } from "shineout";

export default () => {
  return (
    <Gap>
      <Icon
        name="Check"
        type="primary"
        circle
        onClick={async () => {
          await new Promise((res) => setTimeout(res, 1000));
        }}
      />
      <Icon
        name="Download"
        type="primary"
        mode="outline"
        circle
        
      />
      <Icon name="theme" tooltip="切换主题" circle />
    </Gap>
  );
};