@blocklet/ui-react 2.1.40 → 2.1.43

package/lib/blocklets.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatBlockletInfo = void 0;
+
+var _utils = require("./utils");
+
+var _window, _window$blocklet;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.prefix) || '/';
+/**
+ * 格式化 theme (目前仅考虑 background)
+ */
+
+exports.publicPath = publicPath;
+
+const formatTheme = theme => {
+  const formatted = _objectSpread({}, theme);
+
+  const background = theme === null || theme === void 0 ? void 0 : theme.background;
+
+  if (typeof background === 'string') {
+    formatted.background = {
+      header: background,
+      footer: background,
+      default: background
+    };
+  } else if (background && typeof background === 'object') {
+    formatted.background = {
+      header: background.header || background.default,
+      footer: background.footer || background.default,
+      default: background.default
+    };
+  }
+
+  return formatted;
+};
+/**
+ * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
+ */
+
+
+exports.formatTheme = formatTheme;
+
+const getLocalizedNavigation = function getLocalizedNavigation(navigation) {
+  let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+  if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
+    return navigation;
+  } // eslint-disable-next-line no-shadow
+
+
+  const getTitle = (title, locale) => {
+    if (typeof title === 'string') {
+      return title;
+    }
+
+    if (typeof title === 'object') {
+      return title[locale] || (title === null || title === void 0 ? void 0 : title.en) || (title === null || title === void 0 ? void 0 : title.zh);
+    }
+
+    return title;
+  };
+
+  return (0, _utils.mapRecursive)(navigation, item => {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: getTitle(item.title, locale)
+    });
+  }, 'items');
+};
+
+exports.getLocalizedNavigation = getLocalizedNavigation;
+
+const parseNavigation = navigation => {
+  if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
+    return null;
+  }
+
+  const sections = {
+    header: [],
+    footer: [],
+    // 对应 footer social media
+    social: [],
+    // 对应 footer 底部 links
+    bottom: []
+  }; // 对 navigation 顶层元素按 section 分组
+
+  navigation.forEach(item => {
+    // item#section 为空时, 表示只存在于 header
+    if (!item.section) {
+      sections.header.push(item); // item 出现在指定几个 section 中 (array)
+    } else if (Array.isArray(item.section)) {
+      item.section.forEach(sectionKey => {
+        var _sections$sectionKey;
+
+        (_sections$sectionKey = sections[sectionKey]) === null || _sections$sectionKey === void 0 ? void 0 : _sections$sectionKey.push(item);
+      }); // item 出现在指定的一个 section 中 (string)
+    } else if (typeof item.section === 'string') {
+      var _sections$item$sectio;
+
+      (_sections$item$sectio = sections[item.section]) === null || _sections$item$sectio === void 0 ? void 0 : _sections$item$sectio.push(item);
+    }
+  });
+  return sections;
+};
+/**
+ * 格式化 blocklet info 数据
+ */
+
+
+exports.parseNavigation = parseNavigation;
+
+const formatBlockletInfo = blockletInfo => {
+  if (!blockletInfo) {
+    return null;
+  }
+
+  const formatted = _objectSpread({}, blockletInfo); // theme
+
+
+  formatted.theme = formatTheme(formatted.theme); // navigation
+
+  formatted.navigation = parseNavigation(formatted.navigation);
+  return formatted;
+};
+
+exports.formatBlockletInfo = formatBlockletInfo;

package/lib/types.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /* eslint-disable import/prefer-default-export */
 const blockletMetaProps = _propTypes.default.shape({
-  appLogo: _propTypes.default.string,
+  appLogo: _propTypes.default.node,
   appName: _propTypes.default.string,
   theme: _propTypes.default.shape({
     background: _propTypes.default.string
@@ -19,11 +19,11 @@ const blockletMetaProps = _propTypes.default.shape({
   enableConnect: _propTypes.default.bool,
   enableLocale: _propTypes.default.bool,
   navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
+    title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
     link: _propTypes.default.string,
     icon: _propTypes.default.string,
     items: _propTypes.default.arrayOf(_propTypes.default.shape({
-      title: _propTypes.default.string,
+      title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
       link: _propTypes.default.string
     }))
   }))

package/lib/utils.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.publicPath = exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = void 0;
-
-var _window, _window$blocklet;
+exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.countRecursive = void 0;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -34,11 +32,21 @@ const flatRecursive = function flatRecursive(array) {
   const result = [];
   mapRecursive(array, item => result.push(item), childrenKey);
   return result;
-}; // "http://", "https://", "//" 开头的 3 种情况
+}; // 对有层级结构的 array 元素计数
 
 
 exports.flatRecursive = flatRecursive;
 
+const countRecursive = function countRecursive(array) {
+  let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  let counter = 0;
+  mapRecursive(array, () => counter++, childrenKey);
+  return counter;
+}; // "http://", "https://", "//" 开头的 3 种情况
+
+
+exports.countRecursive = countRecursive;
+
 const isUrl = str => {
   return /^(https?:)?\/\//.test(str);
 };
@@ -85,6 +93,4 @@ const matchPaths = function matchPaths() {
   return mostSpecific.index;
 };
 
-exports.matchPaths = matchPaths;
-const publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.prefix) || '/';
-exports.publicPath = publicPath;
+exports.matchPaths = matchPaths;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.40",
+  "version": "2.1.43",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.40",
-    "@arcblock/ux": "^2.1.40",
+    "@arcblock/did-connect": "^2.1.43",
+    "@arcblock/ux": "^2.1.43",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
@@ -57,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "a5a95afc20fc56c089c46c81dda7e8ff4b48744a"
+  "gitHead": "a9cd5a9d9c5e58bba3a4adbf13069ebc37120515"
 }

package/src/Footer/brand.js

@@ -37,7 +37,6 @@ Brand.defaultProps = {
 const Root = styled.div`
   display: flex;
   flex-direction: column;
-  width: 240px;
   font-size: 14px;
   a {
     text-decoration: none;

package/src/Footer/copyright.js

@@ -21,5 +21,5 @@ Copyright.defaultProps = {
 
 const Root = styled.p`
   margin: 0;
-  font-size: 14px;
+  font-size: 13px;
 `;

package/src/Footer/index.js

@@ -1,15 +1,12 @@
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import { withErrorBoundary } from 'react-error-boundary';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import Brand from './brand';
-import Links from './links';
-import SocialMedia from './social-media';
-import Copyright from './copyright';
-import Row from './row';
+import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
+import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
 import { blockletMetaProps } from '../types';
 
@@ -17,52 +14,50 @@ import { blockletMetaProps } from '../types';
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
 function Footer({ meta, ...rest }) {
-  const theme = useTheme();
+  const muiTheme = useTheme();
+  const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = useMemo(() => {
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
   if (!blocklet.appName) {
     return null;
   }
 
-  const {
-    appLogo,
-    appName,
-    appDescription,
-    description,
-    theme: blockletTheme,
-    navigation = [],
-    copyrightOwner,
-    footerNavigation,
-    footerLinks,
-    socialMedia,
-  } = blocklet;
-  const navMenuItems = mapRecursive(
-    // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
-    footerNavigation || navigation,
-    (item) => ({
-      ...item,
-      label: item.title,
-      link: item.link,
-    }),
-    'items'
-  );
+  const { appLogo, appName, appDescription, description, theme, copyright } = formattedBlocklet;
 
-  return (
-    <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
-      <Container>
-        <Row>
-          <Box>
-            <Brand name={appName} logo={appLogo} description={appDescription || description} />
-            <SocialMedia items={socialMedia} style={{ marginTop: 24 }} />
-          </Box>
-          <Links links={navMenuItems} />
-        </Row>
-        <Row autoCenter style={{ marginTop: 72 }}>
-          <Copyright owner={copyrightOwner || appName} />
-          <Links flowLayout links={footerLinks} style={{ color: '#999' }} />
-        </Row>
-      </Container>
-    </Root>
-  );
+  const localized = {
+    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
+    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
+    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || [],
+  };
+
+  const props = {
+    brand: {
+      name: appName,
+      description: appDescription || description,
+      logo: appLogo,
+    },
+    navigation: mapRecursive(
+      localized.footerNav,
+      (item) => ({
+        ...item,
+        label: item.title,
+        link: item.link,
+      }),
+      'items'
+    ),
+    copyright,
+    socialMedia: localized.socialMedia,
+    links: localized.links.map((item) => ({ ...item, label: item.title })),
+  };
+
+  return <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} $theme={muiTheme} />;
 }
 
 Footer.propTypes = {
@@ -73,11 +68,12 @@ Footer.defaultProps = {
   meta: {},
 };
 
-const Root = styled.div`
-  padding: 48px 0;
+const StyledInternalFooter = styled(InternalFooter)`
   border-top: 1px solid #eee;
   color: ${(props) => props.$theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
+  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 
 export default withErrorBoundary(Footer, {

package/src/Footer/internal-footer.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import Brand from './brand';
+import Links from './links';
+import SocialMedia from './social-media';
+import Copyright from './copyright';
+import StandardLayout from './layout/standard';
+import PlainLayout from './layout/plain';
+
+const layouts = [
+  {
+    // navigation 数据为空时, 使用简单布局
+    support: (_, data) => !data.navigation?.length,
+    component: PlainLayout,
+  },
+  {
+    // 默认标准布局
+    support: () => true,
+    component: StandardLayout,
+  },
+];
+
+/**
+ * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
+ */
+function InternalFooter(props) {
+  const { brand, navigation, socialMedia, copyright, links, ...rest } = props;
+  const renderBrand = () => {
+    return brand ? <Brand {...brand} /> : null;
+  };
+  const renderNavigation = () => {
+    return navigation?.length ? <Links links={navigation} /> : null;
+  };
+  const renderSocialMedia = () => {
+    return socialMedia?.length ? <SocialMedia items={socialMedia} /> : null;
+  };
+  const renderCopyright = () => {
+    // 如果 copyright.owner 不存在, 则使用 brand.name, 如果 brand.name 也不存在, copyright 元素为空
+    const copyrightOwner = copyright?.owner || brand?.name;
+    if (!copyrightOwner) {
+      return null;
+    }
+    return <Copyright owner={copyrightOwner} year={copyright?.year || undefined} />;
+  };
+  const renderLinks = () => {
+    return links?.length ? <Links flowLayout links={links} /> : null;
+  };
+
+  const elements = {
+    brand: renderBrand(),
+    navigation: renderNavigation(),
+    socialMedia: renderSocialMedia(),
+    copyright: renderCopyright(),
+    links: renderLinks(),
+  };
+  const LayoutComponent = layouts.find((layout) => layout.support(elements, props)).component;
+  return <LayoutComponent elements={elements} {...rest} />;
+}
+
+InternalFooter.propTypes = {
+  brand: PropTypes.shape({
+    name: PropTypes.node,
+    description: PropTypes.string,
+    logo: PropTypes.node,
+  }),
+  navigation: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      link: PropTypes.string,
+    })
+  ),
+  socialMedia: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.node,
+      link: PropTypes.string,
+    })
+  ),
+  copyright: PropTypes.shape({
+    owner: PropTypes.string,
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      link: PropTypes.string,
+    })
+  ),
+};
+
+InternalFooter.defaultProps = {
+  brand: null,
+  navigation: null,
+  copyright: null,
+  socialMedia: null,
+  links: null,
+};
+
+export default InternalFooter;

package/src/Footer/layout/plain.js

@@ -0,0 +1,42 @@
+import { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Container from '@mui/material/Container';
+
+/**
+ * footer plain layout
+ */
+function PlainLayout({ elements, ...rest }) {
+  return (
+    <Root {...rest}>
+      <Container className="plain-layout-container">
+        {cloneElement(elements.brand, { name: null, description: null })}
+        {elements.copyright}
+      </Container>
+    </Root>
+  );
+}
+
+PlainLayout.propTypes = {
+  elements: PropTypes.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element,
+  }).isRequired,
+};
+
+const Root = styled.div`
+  padding: 24px 0;
+  border-top: 1px solid #eee;
+  .plain-layout-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`;
+
+export default PlainLayout;

package/src/Footer/layout/standard.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Row from './row';
+
+/**
+ * footer standard layout
+ */
+function Footer({ elements, ...rest }) {
+  return (
+    <Root {...rest}>
+      <Container>
+        <Row>
+          <Box>
+            <Box width={{ md: 240 }}>{elements.brand}</Box>
+            <Box mt={2}>{elements.socialMedia}</Box>
+          </Box>
+          {elements.navigation}
+        </Row>
+        <Row autoCenter style={{ marginTop: 72 }}>
+          {elements.copyright}
+          {elements.links}
+        </Row>
+      </Container>
+    </Root>
+  );
+}
+
+Footer.propTypes = {
+  elements: PropTypes.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element,
+  }).isRequired,
+};
+
+const Root = styled.div`
+  padding: 48px 0;
+`;
+
+export default Footer;

package/src/Header/index.js

@@ -1,4 +1,4 @@
-import { useContext, createElement, Fragment } from 'react';
+import { useContext, createElement, Fragment, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ThemeProvider } from '@mui/material/styles';
@@ -13,10 +13,11 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
-import '@iconify/iconify';
+import Icon from '../Icon';
 
 import { blockletMetaProps, sessionManagerProps } from '../types';
-import { mapRecursive, flatRecursive, matchPaths, publicPath } from '../utils';
+import { mapRecursive, flatRecursive, matchPaths } from '../utils';
+import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
 const muiTheme = create();
 
@@ -27,7 +28,7 @@ const parseNavigation = (navigation) => {
   }
   let counter = 1;
   const parseItem = (item) => {
-    const icon = item.icon ? <span className="iconify" data-icon={item.icon} /> : null;
+    const icon = item.icon ? <Icon icon={item.icon} /> : null;
     if (item.items) {
       return {
         id: `${counter++}`,
@@ -68,11 +69,20 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
   const sessionInfo = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = useMemo(() => {
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
+
   if (!blocklet.appName) {
     return null;
   }
-
-  const { did, appLogo, appName, theme, navigation = [], enableConnect = true, enableLocale = true } = blocklet;
+  const { did, appLogo, appName, theme, enableConnect = true, enableLocale = true } = formattedBlocklet;
+  const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const { navItems, activeId } = parseNavigation(navigation);
 
   const renderAddons = () => {
@@ -119,7 +129,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
         }
         addons={renderAddons()}
         {...rest}
-        $bgcolor={theme?.background}
+        $bgcolor={theme?.background?.header}
         $theme={muiTheme}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {!navItems?.length
@@ -131,6 +141,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
                 items={navItems}
                 className="header-nav"
                 bgColor="transparent"
+                textColor="#888"
               />
             )}
       </StyledUxHeader>
@@ -159,6 +170,8 @@ Header.defaultProps = {
 
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
+  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   .header-logo {
     min-width: 44px;
   }

package/src/Icon/index.js

@@ -6,20 +6,29 @@ import { isUrl } from '../utils';
 /**
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
  */
-export default function Icon({ icon, size, ...rest }) {
-  const sx = { ...rest.sx };
+export default function Icon({ icon, size, sx, ...rest }) {
+  const _sx = [...(Array.isArray(sx) ? sx : [sx])];
   if (size) {
-    sx.width = size;
-    sx.height = size;
+    _sx.push({ width: size, height: size });
+  }
+  // 禁用默认的 circular variant 样式
+  if (!rest.variant) {
+    _sx.push({
+      '&.MuiAvatar-root': {
+        color: 'inherit',
+        backgroundColor: 'transparent',
+        borderRadius: 0,
+      },
+    });
   }
   if (isUrl(icon)) {
-    return <Avatar {...rest} src={icon} sx={sx} />;
+    return <Avatar as="span" {...rest} src={icon} sx={_sx} />;
   }
   if (icon) {
     // y = 0.6 * x + 4
     const iconHeight = size ? 0.6 * size + 4 : 0;
     return (
-      <Avatar {...rest} sx={sx}>
+      <Avatar as="span" {...rest} sx={_sx}>
         <span className="iconify" data-icon={icon} {...(iconHeight && { 'data-height': iconHeight })} />
       </Avatar>
     );
@@ -33,8 +42,10 @@ Icon.propTypes = {
   // 2. url
   icon: PropTypes.string.isRequired,
   size: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object]),
 };
 
 Icon.defaultProps = {
   size: null,
+  sx: null,
 };