umwd-components 0.1.138 → 0.1.140

package/dist/cjs/components/Footer.js

@@ -15,6 +15,8 @@ var Link = require('next/link');
 var Image = require('next/image');
 var getIcon = require('../lib/getIcon.js');
 var PropTypes = require('prop-types');
+require('@mui/material/SvgIcon');
+var MuiLink = require('./MuiLink.js');
 
 Footer.propTypes = {
   site_title: PropTypes.string.isRequired,
@@ -58,6 +60,7 @@ function Footer(_ref) {
     maxWidth = "lg"
   } = _ref;
   const theme = material.useTheme();
+  const APIcon = getIcon.default("APIcon");
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "relative",
     sx: {
@@ -94,7 +97,10 @@ function Footer(_ref) {
     }
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
-    color: "#ffffff"
+    color: "#ffffff",
+    sx: {
+      mb: 2
+    }
   }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
       display: "flex",
@@ -113,7 +119,10 @@ function Footer(_ref) {
     sm: 4,
     align: "center"
   }, /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h6"
+    variant: "h6",
+    sx: {
+      mb: 2
+    }
   }, "Contact Information"), /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6"
   }, company_name), parent_company_name && /*#__PURE__*/React.createElement(material.Typography, {
@@ -136,25 +145,25 @@ function Footer(_ref) {
     sm: 4,
     align: "center"
   }, company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h6"
+    variant: "h6",
+    sx: {
+      mb: 2
+    }
   }, "Socials"), /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
     sx: {
       width: "min-content",
-      color: "primary.contrastText"
+      color: "primary.contrastText",
+      alignContent: "space-between"
     }
   }, company_socials.map((company_social, index) => {
     const Icon = getIcon.default(company_social.icon);
     return /*#__PURE__*/React.createElement(material.IconButton, {
       key: index,
       color: "inherit",
-      href: company_social.url
-    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
-      sx: {
-        mr: 2,
-        mt: 0.2
-      }
-    }));
+      href: company_social.url,
+      size: "large"
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, null));
   })))), /*#__PURE__*/React.createElement(material.Grid, {
     item: true,
     xs: 12
@@ -205,7 +214,18 @@ function Footer(_ref) {
       justifyContent: "center",
       alignItems: "center"
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, null, "Made possible by Atelier Paulus"))))));
+  }, /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
+    href: "https://atelierpaulus.nl/"
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    color: "secondary.contrastText",
+    sx: {
+      textDecoration: "underline"
+    }
+  }, "Made possible by", " ", APIcon !== null && /*#__PURE__*/React.createElement(APIcon, {
+    sx: {
+      mx: 2
+    }
+  }), "Atelier Paulus")))))));
 }
 
 exports.default = Footer;

package/dist/cjs/components/HeroSection.js

@@ -27,7 +27,9 @@ function HeroSection(_ref) {
     glass = false
   } = data;
   const theme = material.useTheme();
-  utils.setOpacity(theme.palette.background.paper, 0.1);
+
+  // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+
   return /*#__PURE__*/React.createElement("header", {
     style: {
       position: "relative",
@@ -46,7 +48,9 @@ function HeroSection(_ref) {
       py: 6,
       ...sx
     }
-  }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+  }, bgImage && /*#__PURE__*/React.createElement(material.Box, {
+    className: "manipulator"
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     alt: "Background",
     style: {
       position: "absolute",
@@ -58,7 +62,7 @@ function HeroSection(_ref) {
     height: bgImage.height || 1080,
     src: bgImage.url,
     width: bgImage.width || 1920
-  }), /*#__PURE__*/React.createElement(material.Container, {
+  })), /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
       my: 1,

package/dist/cjs/lib/APIcon.js

@@ -0,0 +1,51 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var SvgIcon = require('@mui/material/SvgIcon');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function APIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(SvgIcon, props, /*#__PURE__*/React__namespace.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    strokeWidth: 0,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M23.55.48s-3.79-.94-4.73,0c-.51.51-1.55,4.73-2.39,8.43-.24,1.05.6,1.83,1.3,2.32.87.59,1.52,1.47,1.84,2.49.15.48.4,1.48,1.55,1.41,1.16-.07,2.12-.23,2.42-.53.93-.93,0-14.12,0-14.12Z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M15.06,8.99c-.06-3.7-.25-7.95-.82-8.52C13.22-.55.46.48.46.48.46.48-.58,10.31.46,11.36c.57.57,4.79,1.61,8.49,2.43.92.2,1.8-.47,2.09-.98.56-1,1.47-1.77,2.57-2.14.87-.3,1.46-.92,1.45-1.67Z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M23.55,17.24c-.34-.34-1.34-.68-2.53-.98-.75-.19-1.44.28-1.7.83-.6,1.25-1.73,2.19-3.1,2.52-.55.13-1.15.77-1.12,1.37.07,1.24.21,2.27.48,2.54.8.8,7.97,0,7.97,0,0,0,1.02-5.26,0-6.28Z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.88,15.17c-3.72.08-7.94.29-8.42.76-.87.87,0,7.59,0,7.59,0,0,11.45,1.02,12.47,0,.36-.36.71-1.43,1.02-2.69.21-.84-.48-1.33-1.05-1.63-1.12-.6-1.96-1.63-2.31-2.88-.17-.63-.74-1.17-1.73-1.15Z"
+  })));
+}
+
+exports.default = APIcon;

package/dist/cjs/lib/getIcon.js

@@ -34,6 +34,7 @@ var FaceBookIcon = require('@mui/icons-material/Facebook');
 var TwitterIcon = require('@mui/icons-material/Twitter');
 var LocalShippingIcon = require('@mui/icons-material/LocalShipping');
 var InstagramIcon = require('@mui/icons-material/Instagram');
+var APIcon = require('./APIcon.js');
 
 function getIcon(icon) {
   switch (icon) {
@@ -89,6 +90,8 @@ function getIcon(icon) {
       return LocalShippingIcon;
     case "InstagramIcon":
       return InstagramIcon;
+    case "APIcon":
+      return APIcon.default;
     default:
       return null;
   }

package/dist/esm/components/Footer.js

@@ -11,6 +11,8 @@ import Link$1 from 'next/link';
 import Image from 'next/image';
 import getIcon from '../lib/getIcon.js';
 import PropTypes from 'prop-types';
+import '@mui/material/SvgIcon';
+import { MuiLink } from './MuiLink.js';
 
 Footer.propTypes = {
   site_title: PropTypes.string.isRequired,
@@ -54,6 +56,7 @@ function Footer(_ref) {
     maxWidth = "lg"
   } = _ref;
   const theme = useTheme();
+  const APIcon = getIcon("APIcon");
   return /*#__PURE__*/React__default.createElement(AppBar, {
     position: "relative",
     sx: {
@@ -90,7 +93,10 @@ function Footer(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6",
-    color: "#ffffff"
+    color: "#ffffff",
+    sx: {
+      mb: 2
+    }
   }, site_title), logo && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       display: "flex",
@@ -109,7 +115,10 @@ function Footer(_ref) {
     sm: 4,
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h6"
+    variant: "h6",
+    sx: {
+      mb: 2
+    }
   }, "Contact Information"), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6"
   }, company_name), parent_company_name && /*#__PURE__*/React__default.createElement(Typography, {
@@ -132,25 +141,25 @@ function Footer(_ref) {
     sm: 4,
     align: "center"
   }, company_socials.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h6"
+    variant: "h6",
+    sx: {
+      mb: 2
+    }
   }, "Socials"), /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,
     sx: {
       width: "min-content",
-      color: "primary.contrastText"
+      color: "primary.contrastText",
+      alignContent: "space-between"
     }
   }, company_socials.map((company_social, index) => {
     const Icon = getIcon(company_social.icon);
     return /*#__PURE__*/React__default.createElement(IconButton, {
       key: index,
       color: "inherit",
-      href: company_social.url
-    }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, {
-      sx: {
-        mr: 2,
-        mt: 0.2
-      }
-    }));
+      href: company_social.url,
+      size: "large"
+    }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, null));
   })))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -201,7 +210,18 @@ function Footer(_ref) {
       justifyContent: "center",
       alignItems: "center"
     }
-  }, /*#__PURE__*/React__default.createElement(Typography, null, "Made possible by Atelier Paulus"))))));
+  }, /*#__PURE__*/React__default.createElement(MuiLink, {
+    href: "https://atelierpaulus.nl/"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    color: "secondary.contrastText",
+    sx: {
+      textDecoration: "underline"
+    }
+  }, "Made possible by", " ", APIcon !== null && /*#__PURE__*/React__default.createElement(APIcon, {
+    sx: {
+      mx: 2
+    }
+  }), "Atelier Paulus")))))));
 }
 
 export { Footer as default };

package/dist/esm/components/HeroSection.js

@@ -25,7 +25,9 @@ function HeroSection(_ref) {
     glass = false
   } = data;
   const theme = useTheme();
-  setOpacity(theme.palette.background.paper, 0.1);
+
+  // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+
   return /*#__PURE__*/React__default.createElement("header", {
     style: {
       position: "relative",
@@ -44,7 +46,9 @@ function HeroSection(_ref) {
       py: 6,
       ...sx
     }
-  }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
+  }, bgImage && /*#__PURE__*/React__default.createElement(Box, {
+    className: "manipulator"
+  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
     alt: "Background",
     style: {
       position: "absolute",
@@ -56,7 +60,7 @@ function HeroSection(_ref) {
     height: bgImage.height || 1080,
     src: bgImage.url,
     width: bgImage.width || 1920
-  }), /*#__PURE__*/React__default.createElement(Container, {
+  })), /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
       my: 1,

package/dist/esm/lib/APIcon.js

@@ -0,0 +1,28 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+function APIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, props, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    strokeWidth: 0,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M23.55.48s-3.79-.94-4.73,0c-.51.51-1.55,4.73-2.39,8.43-.24,1.05.6,1.83,1.3,2.32.87.59,1.52,1.47,1.84,2.49.15.48.4,1.48,1.55,1.41,1.16-.07,2.12-.23,2.42-.53.93-.93,0-14.12,0-14.12Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.06,8.99c-.06-3.7-.25-7.95-.82-8.52C13.22-.55.46.48.46.48.46.48-.58,10.31.46,11.36c.57.57,4.79,1.61,8.49,2.43.92.2,1.8-.47,2.09-.98.56-1,1.47-1.77,2.57-2.14.87-.3,1.46-.92,1.45-1.67Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.55,17.24c-.34-.34-1.34-.68-2.53-.98-.75-.19-1.44.28-1.7.83-.6,1.25-1.73,2.19-3.1,2.52-.55.13-1.15.77-1.12,1.37.07,1.24.21,2.27.48,2.54.8.8,7.97,0,7.97,0,0,0,1.02-5.26,0-6.28Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.88,15.17c-3.72.08-7.94.29-8.42.76-.87.87,0,7.59,0,7.59,0,0,11.45,1.02,12.47,0,.36-.36.71-1.43,1.02-2.69.21-.84-.48-1.33-1.05-1.63-1.12-.6-1.96-1.63-2.31-2.88-.17-.63-.74-1.17-1.73-1.15Z"
+  })));
+}
+
+export { APIcon as default };

package/dist/esm/lib/getIcon.js

@@ -30,6 +30,7 @@ import FaceBookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import InstagramIcon from '@mui/icons-material/Instagram';
+import APIcon from './APIcon.js';
 
 function getIcon(icon) {
   switch (icon) {
@@ -85,6 +86,8 @@ function getIcon(icon) {
       return LocalShippingIcon;
     case "InstagramIcon":
       return InstagramIcon;
+    case "APIcon":
+      return APIcon;
     default:
       return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.138",
+  "version": "0.1.140",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/public/Logo.svg

@@ -0,0 +1,6 @@
+<svg id="o" data-name="AP logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <path d="M98.12,1.99s-15.8-3.91-19.72,0c-2.14,2.14-6.47,19.71-9.94,35.14-.99,4.39,2.48,7.64,5.43,9.65,3.61,2.46,6.35,6.1,7.66,10.38.61,1.98,1.66,6.16,6.47,5.86,4.83-.3,8.84-.94,10.1-2.21,3.87-3.87,0-58.82,0-58.82Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M62.74,37.47c-.24-15.42-1.04-33.13-3.4-35.48C55.08-2.27,1.94,1.99,1.94,1.99c0,0-4.36,40.97,0,45.32,2.39,2.39,19.96,6.7,35.36,10.11,3.82.85,7.52-1.95,8.71-4.07,2.33-4.15,6.14-7.36,10.71-8.91,3.63-1.23,6.08-3.83,6.03-6.97Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M98.12,71.85c-1.41-1.41-5.59-2.83-10.54-4.09-3.12-.8-5.99,1.18-7.08,3.46-2.48,5.19-7.21,9.11-12.92,10.51-2.28.56-4.8,3.21-4.67,5.69.28,5.15.86,9.45,2,10.59,3.31,3.31,33.21,0,33.21,0,0,0,4.24-21.92,0-26.16Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M37.02,63.21c-15.5.35-33.1,1.19-35.08,3.18-3.63,3.63,0,31.62,0,31.62,0,0,47.71,4.26,51.97,0,1.48-1.48,2.96-5.98,4.27-11.21.87-3.49-2.01-5.55-4.36-6.8-4.66-2.49-8.18-6.81-9.6-12.01-.72-2.64-3.1-4.88-7.19-4.78Z" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/src/components/Footer.js

@@ -21,6 +21,8 @@ import Image from "next/image";
 import getIcon from "../lib/getIcon.ts";
 
 import PropTypes from "prop-types";
+import APIcon from "../lib/APIcon.tsx";
+import { MuiLink } from "./MuiLink.tsx";
 
 Footer.propTypes = {
   site_title: PropTypes.string.isRequired,
@@ -67,6 +69,8 @@ function Footer({
 }) {
   const theme = useTheme();
 
+  const APIcon = getIcon("APIcon");
+
   return (
     <AppBar
       position="relative"
@@ -87,7 +91,7 @@ function Footer({
                     height: "100%",
                   }}
                 >
-                  <Typography variant="h6" color="#ffffff">
+                  <Typography variant="h6" color="#ffffff" sx={{ mb: 2 }}>
                     {site_title}
                   </Typography>
                   {logo && (
@@ -111,7 +115,9 @@ function Footer({
               </Link>
             </Grid>
             <Grid item xs={12} sm={4} align="center">
-              <Typography variant="h6">Contact Information</Typography>
+              <Typography variant="h6" sx={{ mb: 2 }}>
+                Contact Information
+              </Typography>
               <Typography variant="h6">{company_name}</Typography>
               {parent_company_name && (
                 <Typography variant="h6">By {parent_company_name}</Typography>
@@ -139,10 +145,16 @@ function Footer({
             <Grid item xs={12} sm={4} align="center">
               {company_socials.length > 0 && (
                 <>
-                  <Typography variant="h6">Socials</Typography>
+                  <Typography variant="h6" sx={{ mb: 2 }}>
+                    Socials
+                  </Typography>
                   <Stack
                     spacing={2}
-                    sx={{ width: "min-content", color: "primary.contrastText" }}
+                    sx={{
+                      width: "min-content",
+                      color: "primary.contrastText",
+                      alignContent: "space-between",
+                    }}
                   >
                     {company_socials.map((company_social, index) => {
                       const Icon = getIcon(company_social.icon);
@@ -151,8 +163,9 @@ function Footer({
                           key={index}
                           color="inherit"
                           href={company_social.url}
+                          size="large"
                         >
-                          {Icon !== null && <Icon sx={{ mr: 2, mt: 0.2 }} />}
+                          {Icon !== null && <Icon />}
                           {/* {company_social.icon} */}
                         </IconButton>
                       );
@@ -232,7 +245,16 @@ function Footer({
                 alignItems: "center",
               }}
             >
-              <Typography>Made possible by Atelier Paulus</Typography>
+              <MuiLink href="https://atelierpaulus.nl/">
+                <Typography
+                  color="secondary.contrastText"
+                  sx={{ textDecoration: "underline" }}
+                >
+                  Made possible by{" "}
+                  {APIcon !== null && <APIcon sx={{ mx: 2 }} />}
+                  Atelier Paulus
+                </Typography>
+              </MuiLink>
             </Grid>
           </Grid>
         </Toolbar>

package/src/components/HeroSection.tsx

@@ -59,7 +59,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
 
   const theme = useTheme();
 
-  const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+  // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
 
   return (
     <header style={{ position: "relative", padding: 0, margin: 0 }}>
@@ -77,19 +77,21 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
         }}
       >
         {bgImage && (
-          <StrapiImage
-            alt="Background"
-            style={{
-              position: "absolute",
-              inset: 0,
-              objectFit: "cover",
-              width: "100%",
-              height: "100%",
-            }}
-            height={bgImage.height || 1080}
-            src={bgImage.url}
-            width={bgImage.width || 1920}
-          />
+          <Box className="manipulator">
+            <StrapiImage
+              alt="Background"
+              style={{
+                position: "absolute",
+                inset: 0,
+                objectFit: "cover",
+                width: "100%",
+                height: "100%",
+              }}
+              height={bgImage.height || 1080}
+              src={bgImage.url}
+              width={bgImage.width || 1920}
+            />
+          </Box>
         )}
         <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, zIndex: 1 }}>
           <Paper

package/src/components/IconSection.tsx

@@ -18,7 +18,7 @@ interface IconSectionProps {
   title: string;
   description: string;
   icon: IconProps[];
-  maxWidth: MaxWidth;
+  maxWidth?: MaxWidth;
   sx?: SxProps<Theme>;
 }
 

package/src/lib/APIcon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="o" data-name="Layer 16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M23.55.48s-3.79-.94-4.73,0c-.51.51-1.55,4.73-2.39,8.43-.24,1.05.6,1.83,1.3,2.32.87.59,1.52,1.47,1.84,2.49.15.48.4,1.48,1.55,1.41,1.16-.07,2.12-.23,2.42-.53.93-.93,0-14.12,0-14.12Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M15.06,8.99c-.06-3.7-.25-7.95-.82-8.52C13.22-.55.46.48.46.48.46.48-.58,10.31.46,11.36c.57.57,4.79,1.61,8.49,2.43.92.2,1.8-.47,2.09-.98.56-1,1.47-1.77,2.57-2.14.87-.3,1.46-.92,1.45-1.67Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M23.55,17.24c-.34-.34-1.34-.68-2.53-.98-.75-.19-1.44.28-1.7.83-.6,1.25-1.73,2.19-3.1,2.52-.55.13-1.15.77-1.12,1.37.07,1.24.21,2.27.48,2.54.8.8,7.97,0,7.97,0,0,0,1.02-5.26,0-6.28Z" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M8.88,15.17c-3.72.08-7.94.29-8.42.76-.87.87,0,7.59,0,7.59,0,0,11.45,1.02,12.47,0,.36-.36.71-1.43,1.02-2.69.21-.84-.48-1.33-1.05-1.63-1.12-.6-1.96-1.63-2.31-2.88-.17-.63-.74-1.17-1.73-1.15Z" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/src/lib/APIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+
+export default function APIcon(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        strokeWidth={0}
+        stroke="currentColor"
+      >
+        <path d="M23.55.48s-3.79-.94-4.73,0c-.51.51-1.55,4.73-2.39,8.43-.24,1.05.6,1.83,1.3,2.32.87.59,1.52,1.47,1.84,2.49.15.48.4,1.48,1.55,1.41,1.16-.07,2.12-.23,2.42-.53.93-.93,0-14.12,0-14.12Z" />
+        <path d="M15.06,8.99c-.06-3.7-.25-7.95-.82-8.52C13.22-.55.46.48.46.48.46.48-.58,10.31.46,11.36c.57.57,4.79,1.61,8.49,2.43.92.2,1.8-.47,2.09-.98.56-1,1.47-1.77,2.57-2.14.87-.3,1.46-.92,1.45-1.67Z" />
+        <path d="M23.55,17.24c-.34-.34-1.34-.68-2.53-.98-.75-.19-1.44.28-1.7.83-.6,1.25-1.73,2.19-3.1,2.52-.55.13-1.15.77-1.12,1.37.07,1.24.21,2.27.48,2.54.8.8,7.97,0,7.97,0,0,0,1.02-5.26,0-6.28Z" />
+        <path d="M8.88,15.17c-3.72.08-7.94.29-8.42.76-.87.87,0,7.59,0,7.59,0,0,11.45,1.02,12.47,0,.36-.36.71-1.43,1.02-2.69.21-.84-.48-1.33-1.05-1.63-1.12-.6-1.96-1.63-2.31-2.88-.17-.63-.74-1.17-1.73-1.15Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/lib/getIcon.ts

@@ -24,6 +24,7 @@ import FaceBookIcon from "@mui/icons-material/Facebook";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import LocalShippingIcon from "@mui/icons-material/LocalShipping";
 import InstagramIcon from "@mui/icons-material/Instagram";
+import APIcon from "./APIcon.tsx";
 
 export default function getIcon(icon: string): React.ElementType | null {
   switch (icon) {
@@ -79,6 +80,8 @@ export default function getIcon(icon: string): React.ElementType | null {
       return LocalShippingIcon;
     case "InstagramIcon":
       return InstagramIcon;
+    case "APIcon":
+      return APIcon;
     default:
       return null;
   }