Icon 图标

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

API

图标

代码示例

基本

展示图标基本使用方法。

查看源码在线预览

import { Icon } from "@icedesign/base";
ReactDOM.render(<Icon type="atm" />, mountNode);

尺寸

ICON的尺寸包括：xxs，xs，small，medium，large，xl，xxl，xxxl。

查看源码在线预览

import { Icon } from "@icedesign/base";
const sizes = ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"];
ReactDOM.render(
  <ul className="icon-sizes">
    {sizes.map((size, index) => (
      <li key={index}>
        <Icon type="smile" size={size} />
        <span>{size}</span>
      </li>
    ))}
  </ul>,
  mountNode
);

.icon-sizes {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-sizes li {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.icon-sizes i {
    display: block;
    margin: 12px auto 0 auto;
    text-align: center;
}
.icon-sizes span {
    display: block;
    margin-top: 10px;
    text-align: center;
}

自定义样式

图标字体本质上还是文字，可以使用 style 和 className 设置图标的大小和颜色。

查看源码在线预览

import { Icon } from "@icedesign/base";
ReactDOM.render(
  <div>
    <div className="icon-style-demo">
      <Icon type="success" style={{ color: "#1DC11D", marginRight: "10px" }} />
      这是一个成功的消息
    </div>
    <div className="icon-style-demo">
      <Icon type="warning" style={{ color: "#FFA003", marginRight: "10px" }} />
      这是一个警告的消息
    </div>
    <div className="icon-style-demo">
      <Icon type="error" style={{ color: "#FF3333", marginRight: "10px" }} />
      这是一个失败的消息
    </div>
  </div>,
  mountNode
);

.icon-style-demo {
    margin-bottom: 10px;
    color: #333;
}

图标列表

点击图标复制代码。

查看源码在线预览

import { Icon, Feedback } from "@icedesign/base";
import CopyToClipboard from "react-copy-to-clipboard";
const types = [
  "all",
  "cart",
  "comments",
  "cry",
  "email",
  "favorite",
  "folder",
  "form",
  "help",
  "refresh",
  "set",
  "training",
  "account",
  "atm",
  "clock",
  "attachment",
  "3column",
  "4column",
  "discount",
  "service",
  "print",
  "box",
  "process",
  "bags",
  "electronics",
  "gifts",
  "lights",
  "auto",
  "browse",
  "atm-away",
  "scanning",
  "compare",
  "filter",
  "pin",
  "history",
  "similar-product",
  "link",
  "cut",
  "table",
  "nav-list",
  "image-text",
  "text",
  "move",
  "subtract",
  "dollar",
  "office",
  "operation",
  "download",
  "map",
  "bad",
  "good",
  "skip",
  "play",
  "stop",
  "compass",
  "security",
  "share",
  "store",
  "phone",
  "ellipsis",
  "email-filling",
  "favorites-filling",
  "account-filling",
  "credit-level",
  "credit-level-filling",
  "mobile-phone",
  "smile",
  "personal-center",
  "arrow-up-filling",
  "arrow-right",
  "arrow-left",
  "arrow-down",
  "arrow-up",
  "add",
  "minus",
  "delete-filling",
  "edit",
  "error",
  "select",
  "ashbin",
  "calendar",
  "time",
  "success",
  "warning",
  "search",
  "display",
  "category",
  "prompt",
  "arrow-down-filling",
  "sorting",
  "ascending",
  "descending",
  "success-filling",
  "picture",
  "close",
  "semi-select",
  "tag-subscript",
  "survey",
  "loading",
  "arrow-double-left",
  "arrow-double-right"
];
let customTypes = [];
// 此处代码仅用于 fusion dev 展示自定义组件用
if (window.customIcons) {
  customTypes = window.customIcons;
}
const handleCopy = () => Feedback.toast.success("Copied!");
ReactDOM.render(
  <div>
    <div className="icon-list-title">点击图标复制代码到剪贴板</div>
    <ul className="icon-list">
      {types.map((type, index) => (
        <CopyToClipboard
          key={index}
          text={`<Icon type="${type}" />`}
          onCopy={handleCopy}
        >
          <li>
            <Icon type={type} size="xl" />
            <span>{type}</span>
          </li>
        </CopyToClipboard>
      ))}
    </ul>
    {customTypes.length ? (
      <div>
        <div className="icon-list-custom-title">自定义图标</div>
        <ul className="icon-list">
          {customTypes.map((type, index) => (
            <CopyToClipboard
              key={index}
              text={`<Icon type="${type}" />`}
              onCopy={handleCopy}
            >
              <li>
                <Icon type={type} size="xl" />
                <span>{type}</span>
              </li>
            </CopyToClipboard>
          ))}
        </ul>
      </div>
    ) : null}
  </div>,
  mountNode
);

.icon-list-title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}
.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-list li {
    display: inline-block;
    width: 160px;
    height: 80px;
    color: #333;
    cursor: pointer;
}
.icon-list li:hover {
    background-color: #f7f7f7;
}
.icon-list i {
    display: block;
    margin: 12px auto 0 auto;
    text-align: center;
}
.icon-list span {
    display: block;
    margin-top: 10px;
    text-align: center;
}
.icon-list-custom-title {
    margin: 20px 0 20px 10px;
    font-size: 20px;
    color: #333;
}

相关区块

暂无相关区块