All files / src/icon/_example IconExample.jsx

100% Statements 5/5
100% Branches 0/0
100% Functions 3/3
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48            1x                       1x     1x       73x                   3x                        
import React from "react";
import { Icon } from "@tencent/tea-component/lib/icon";
import { Bubble } from "@tencent/tea-component/lib/bubble";
 
// 暂无 SVG:'records', 'sales', 'shutdown', 'running', 'deploy', 'links', 'client', 'alarm', 'try', 'new', 'favorable'
// prettier-ignore
const iconTypes = [
  "close", "dismiss", "delete", "shopcart", "more", "folderclose", "folderopen", "notice",
  "guide", "consult", "realname", "realnamev", "show", "hide", "success",
  "warning", "loading", "error", "sort", "sortup", "sortdown", "btnback", "plus", "minus", "setting",
  "pencil", "copy", "remind", "phone", "phonev", "wechat", "wechatv", "email", "emailv", "qq",
  "viewgrid", "viewlist", "monitor", "download", "filter", "convertip--blue", "convertip",
  "info", "arrowup", "arrowdown", "arrowleft", "arrowright", "externallink", "refresh",
  "fullscreen", "fullscreenquit", "trenddown", "trendup", "drop", "news", "help", "pending",
  "infoblue", "lastpage", "firstpage", "search", "transfer", "cur", "cur-active", "fold", "check",
  "not", "and", "detail", "qrcode", "database", "datasheet", "daily",
];
 
const smallIconTypes = ["close", "dismiss", "check"];
 
export default function IconExample() {
  return (
    <>
      <section>
        {iconTypes.map(type => (
          <Bubble key={type} content={`<Icon type="${type}" />`}>
            <Icon
              type={type}
              style={{ margin: "0 10px 10px 0", cursor: "pointer" }}
            />
          </Bubble>
        ))}
      </section>
      <section>
        {smallIconTypes.map(type => (
          <Bubble key={type} content={`<Icon type="${type}" size="s" />`}>
            <Icon
              type={type}
              size="s"
              style={{ margin: "0 10px 10px 0", cursor: "pointer" }}
            />
          </Bubble>
        ))}
      </section>
    </>
  );
}