(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5695],{2327:function(e,t,r){Promise.resolve().then(r.bind(r,8796))},8796:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return D}});var n=r(4004),i=r(4978),o=r(65),l=r(9819),s=r(6739),a=r(5227),c=r(271),u=r(721),d=r(9524),f=r(988),h=r(2433),p=r(4300),y=r(5527),m=r(1209),b=r(6551),j=r(5536),v=r(1966),g=r(5864),w=r(1041),x=r(7098),O=r(9426),Z=r(5891),P=r(5123),S=r(1943),I=r(959),k=()=>{let{fragmentId:e,setFragmentId:t}=(0,i.useContext)(I.Z),r=e=>{t(e.target.hash)};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(p.Z,{variant:"h3",fw:"semibold",children:"Table of Contents"}),(0,n.jsxs)(y.Z,{indent:!1,children:[(0,n.jsx)(m.Z,{onClick:r,children:(0,n.jsx)(f.Z,{variant:"transparent",href:"#installation",active:/#installation$/.test(e),"data-testid":"installation",children:"Installation"})}),(0,n.jsx)(m.Z,{onClick:r,children:(0,n.jsx)(f.Z,{variant:"transparent",href:"#prerequisites",active:/#prerequisites$/.test(e),"data-testid":"prerequisites",children:"Prerequisites"})}),(0,n.jsx)(m.Z,{onClick:r,children:(0,n.jsx)(f.Z,{variant:"transparent",href:"#peer-dependencies",active:/#peer-dependencies$/.test(e),"data-testid":"peer_dependencies",children:"Peer Dependencies"})}),(0,n.jsx)(m.Z,{onClick:r,children:(0,n.jsx)(f.Z,{variant:"transparent",href:"#quick-install",active:/#quick-install$/.test(e),"data-testid":"quick_install",children:"Quick Install"})})]})]})},N=r(9362),E=r(176);let q=(0,o.zo)(l.Z).withConfig({componentId:"sc-652c956c-0"})(["width:100%;"]);function D(){let e=(0,j.Z)({query:{media:"(min-width: 1281px)"}}),t=(0,j.Z)({query:{media:"(max-width: 1280px)"}}),r=(0,j.Z)({query:{media:"(max-width: 768px)"}});return(0,n.jsx)(N.Z,{children:(0,n.jsxs)(s.Z,{children:[(0,n.jsx)(Z.Z,{currentPage:"root/icons/children"}),(0,n.jsxs)(a.Z,{display:"flex",children:[e&&(0,n.jsx)(c.Z,{children:(0,n.jsx)(u.Z,{fluid:!0,children:(0,n.jsx)(S.Z,{})})}),(0,n.jsxs)(q,{borderLeft:r?"none":t?"none":"dark",borderRight:r?"none":"dark",children:[(0,n.jsx)(a.Z,{borderBottom:"dark",children:(0,n.jsx)(u.Z,{children:(0,n.jsxs)(d.Z,{children:[(0,n.jsx)(f.Z,{variant:"transparent",href:"/icons",width:"auto","data-testid":"breadcrumbs_icons",children:"icons"}),(0,n.jsx)(v.Z,{}),(0,n.jsx)(f.Z,{variant:"transparent",href:"/icons/installation",active:!0,width:"auto","data-testid":"breadcrumbs_installation",children:"installation"})]})})}),(0,n.jsxs)(u.Z,{fluid:!1,children:[(0,n.jsxs)(h.Z,{id:"installation",children:[(0,n.jsx)(p.Z,{variant:"h1",children:"Installation"}),(0,n.jsx)(p.Z,{variant:"body1",children:"This installation guide will help you get started with installing and using the icons library in your React projects."})]}),(0,n.jsxs)(h.Z,{id:"prerequisites",children:[(0,n.jsx)(p.Z,{variant:"h2",children:"Prerequisites"}),(0,n.jsx)(p.Z,{variant:"body1",children:"Before you begin, ensure you have met the following requirements:"}),(0,n.jsxs)(y.Z,{indent:!0,children:[(0,n.jsxs)(m.Z,{listStyle:"square",children:[(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsxs)(p.Z,{variant:"strong",children:["Node.js:"," "]}),"Make sure you have Node.js installed. You can download it from",(0,n.jsxs)(f.Z,{variant:"inline",href:"https://nodejs.org/en",target:"_blank","data-testid":"prerequisites_here",children:["here. ",(0,n.jsx)(g.Z,{})]}),"Verify that you have Node.js installed by running:"]}),(0,n.jsx)(b.Z,{variant:"filled",notched:!0,type:"script",className:"no-highlight",fileName:(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(p.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,n.jsx)(w.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"node -v"})]}),(0,n.jsxs)(m.Z,{listStyle:"square",children:[(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsx)(p.Z,{variant:"strong",children:"npm or yarn:"})," ","npm is included with Node.js, but ensure you have the latest version by running:"]}),(0,n.jsx)(b.Z,{variant:"filled",notched:!0,type:"script",className:"no-highlight",fileName:(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(p.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,n.jsx)(w.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"npm -v"})]}),(0,n.jsxs)(m.Z,{listStyle:"square",children:[(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsxs)(p.Z,{variant:"strong",children:["React:"," "]}),"The icons library is designed to work with",(0,n.jsxs)(f.Z,{variant:"inline",href:"https://react.dev/",target:"blank","data-testid":"prerequisites_react",children:["React. ",(0,n.jsx)(g.Z,{})]}),"Ensure you have a React project set up. You can create a new React project using Create React App (CRA):"]}),(0,n.jsx)(b.Z,{variant:"filled",notched:!0,type:"script",className:"no-highlight",fileName:(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(p.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,n.jsx)(w.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"npx create-react-app my-app\ncd my-app"})]})]})]}),(0,n.jsxs)(h.Z,{id:"peer-dependencies",children:[(0,n.jsx)(p.Z,{variant:"h2",children:"Peer Dependencies"}),(0,n.jsx)(p.Z,{variant:"body1",children:"The icons library has peer dependencies that you need to include in your project. All components under @modjs/icons has been thoroughly tested with the following versions of peerDependencies. The library will then use the version of the following peerDependencies that you install in your project."}),(0,n.jsxs)(y.Z,{indent:!0,children:[(0,n.jsx)(m.Z,{listStyle:"square",children:(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsxs)(p.Z,{variant:"strong",children:["React:"," "]}),">=18.3.1"]})}),(0,n.jsx)(m.Z,{listStyle:"square",children:(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsxs)(p.Z,{variant:"strong",children:["React DOM:"," "]})," ",">=18.3.1"]})}),(0,n.jsx)(m.Z,{listStyle:"square",children:(0,n.jsxs)(p.Z,{variant:"body1",children:[(0,n.jsxs)(p.Z,{variant:"strong",children:["Styled Components:"," "]})," ",">=6.1.11"]})})]}),(0,n.jsx)(b.Z,{variant:"filled",notched:!0,type:"script",className:"no-highlight",fileName:(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(p.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,n.jsx)(w.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"npm install react react-dom styled-components"})]}),(0,n.jsxs)(h.Z,{id:"quick-install",children:[(0,n.jsx)(p.Z,{variant:"h2",children:"Quick Install"}),(0,n.jsx)(p.Z,{variant:"body1",children:"After you have Node.js and npm installed and have React app configured and running, you can run the following command to install all dependencies for @modjs/icons."}),(0,n.jsx)(b.Z,{variant:"filled",notched:!0,type:"script",className:"no-highlight",fileName:(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(p.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,n.jsx)(w.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"npm install @modjs/icons @modjs/utils"})]}),(0,n.jsxs)(a.Z,{display:"flex",justifyContent:"space-between",my:32,children:[(0,n.jsxs)(f.Z,{href:"/icons",variant:"inline",display:"flex",alignItems:"center","data-testid":"prev_icons",children:[(0,n.jsx)(x.Z,{}),"Icons"]}),(0,n.jsxs)(f.Z,{href:"/icons/customization",variant:"inline",display:"flex",alignItems:"center","data-testid":"next_customization",children:["Customization",(0,n.jsx)(O.Z,{})]})]})]}),(0,n.jsx)(P.Z,{})]}),(0,n.jsx)(E.Z,{defaultFragmentId:"#installation",sections:["installation","prerequisites","peer-dependencies","quick-install"],children:(0,n.jsx)(k,{})})]})]})})}},959:function(e,t,r){"use strict";let n=(0,r(4978).createContext)({fragmentId:null,setFragmentId:()=>{}});t.Z=n},176:function(e,t,r){"use strict";var n=r(4004),i=r(4978),o=r(65),l=r(271),s=r(721),a=r(959);let c=(0,o.zo)(l.Z).withConfig({componentId:"sc-1a6f007-0"})(["@media (max-width:768px){display:none;}"]);t.Z=e=>{let{children:t,defaultFragmentId:r,sections:o}=e,[l,u]=(0,i.useState)(null),d=()=>{let e=window.scrollY+50,t=null;for(let r=o.length-1;r>=0;r--){let n=document.getElementById(o[r]);if(n){let{top:i}=n.getBoundingClientRect();if(i+window.scrollY<=e){t=o[r];break}}}t&&u("#".concat(t))};return(0,i.useEffect)(()=>(u(r),window.addEventListener("scroll",d),()=>{window.removeEventListener("scroll",d)}),[]),(0,n.jsx)(a.Z.Provider,{value:{fragmentId:l,setFragmentId:u},children:(0,n.jsx)(c,{children:(0,n.jsx)(s.Z,{fluid:!0,mt:"normal",mb:"wide",children:t})})})}},9524:function(e,t,r){"use strict";var n=r(4978),i=r(65),o=r(925),l=r(4004);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var a=["children"];function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function u(e){for(var t=1;t