@orca-fe/pocket/lib/svg-icon/demo/DemoBasic.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
require("antd/lib/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _icon = require("./icon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * title: 基础用法
 * desc: 这里展示了
 */

var Demo = function Demo() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "\u6E32\u67D3\u6240\u6709\u56FE\u6807"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_space.default, {
      wrap: true,
      children: _icon.iconList.map(function (icon, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
          title: icon.name,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.IconButton, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
              icon: icon
            })
          })
        }, index);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "\u4FEE\u6539\u56FE\u6807\u9ED8\u8BA4\u989C\u8272\uFF08\u4EC5\u65E0\u8272\u56FE\u6807\uFF09"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_space.default, {
      wrap: true,
      children: _icon.iconList.map(function (icon, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
          title: icon.name,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
            icon: icon,
            color: "orange"
          })
        }, index);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        marginTop: 8
      },
      children: "\u81EA\u5B9A\u4E49\u5C3A\u5BF8"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_space.default, {
      wrap: true,
      children: _icon.iconList.map(function (icon, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
          title: icon.name,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
            icon: icon,
            size: 32
          })
        }, index);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        marginTop: 8
      },
      children: "\u65CB\u8F6C\u56FE\u6807"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
      icon: _icon.iconPolygon,
      spinning: true,
      size: 20
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        marginTop: 8
      },
      children: "\u4FEE\u6539\u591A\u8272\u56FE\u6807\u7684\u7279\u5B9A\u989C\u8272"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
      wrap: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
        icon: _icon.iconChat,
        size: 20,
        customPathProps: [{
          fill: '#66cc66'
        }]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
        icon: _icon.iconChat,
        size: 20,
        customPathProps: [{
          fill: '#ff9911'
        }]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
        icon: _icon.iconChat,
        size: 20,
        customPathProps: [{
          fill: '#cc0000'
        }, {
          fill: '#ffc711'
        }]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
        icon: _icon.iconLocationPointRed,
        size: 32,
        customPathProps: [{
          fill: '#2f6b2f'
        }, {
          fill: '#16de16'
        }, {
          fill: '#359b35'
        }]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SvgIcon, {
        icon: _icon.iconLocationPointRed,
        size: 32,
        customPathProps: [{
          fill: '#6830ad'
        }, {
          fill: '#a637ff'
        }, {
          fill: '#1153cc'
        }]
      })]
    })]
  });
};
var _default = exports.default = Demo;