(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5011],{1687:function(n,e,s){Promise.resolve().then(s.bind(s,8618))},8618:function(n,e,s){"use strict";s.r(e),s.d(e,{default:function(){return N}});var t=s(4004),i=s(4978),r=s(65),a=s(9819),o=s(6739),d=s(5227),l=s(271),c=s(721),h=s(9524),m=s(988),p=s(2433),x=s(4300),f=s(6551),g=s(5536),j=s(1966),y=s(8711),Z=s(5864),u=s(3375),v=s(7098),b=s(9426),w=s(5891),k=s(5123),C=s(1943),I=s(5527),_=s(1209),T=s(959),S=()=>{let{fragmentId:n,setFragmentId:e}=(0,i.useContext)(T.Z),s=n=>{e(n.target.hash)};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(x.Z,{variant:"h3",fw:"semibold",children:"Table of Contents"}),(0,t.jsxs)(I.Z,{indent:!1,children:[(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#customization",active:/#customization$/.test(n),"data-testid":"customization",children:"Customization"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#theming",fw:"bold",active:/#theming$/.test(n),"darta-testid":"theming",children:"Theming"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#light-theme",active:/#light-theme$/.test(n),"data-testid":"light_theme",children:"Light Theme"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#dark-theme",active:/#dark-theme$/.test(n),"data-testid":"dark_theme",children:"Dark Theme"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#override-styles",fw:"bold",active:/#override-styles$/.test(n),"data-testid":"override_styles",children:"Override Styles"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#system-props",active:/#system-props$/.test(n),"data-testid":"system_props",children:"System Props"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#styled-components",active:/#styled-components$/.test(n),"data-testid":"styled_components",children:"Styled Components"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#custom-classnames",active:/#custom-classnames$/.test(n),"data-testid":"custom_classnames",children:"Custom classNames"})}),(0,t.jsx)(_.Z,{onClick:s,children:(0,t.jsx)(m.Z,{variant:"transparent",href:"#inline-styles",active:/#inline-styles$/.test(n),"data-testid":"inline_styles",children:"Inline Styles"})})]})]})},z=s(9362),A=s(176);let M=(0,r.zo)(a.Z).withConfig({componentId:"sc-a0ff8f86-0"})(["width:100%;"]);function N(){let n=(0,g.Z)({query:{media:"(min-width: 1281px)"}}),e=(0,g.Z)({query:{media:"(max-width: 1280px)"}}),s=(0,g.Z)({query:{media:"(max-width: 768px)"}});return(0,t.jsx)(z.Z,{children:(0,t.jsxs)(o.Z,{children:[(0,t.jsx)(w.Z,{currentPage:"root/icons/children"}),(0,t.jsxs)(d.Z,{display:"flex",children:[n&&(0,t.jsx)(l.Z,{children:(0,t.jsx)(c.Z,{fluid:!0,children:(0,t.jsx)(C.Z,{})})}),(0,t.jsxs)(M,{borderLeft:s?"none":e?"none":"dark",borderRight:s?"none":"dark",children:[(0,t.jsx)(d.Z,{borderBottom:"dark",children:(0,t.jsx)(c.Z,{children:(0,t.jsxs)(h.Z,{children:[(0,t.jsx)(m.Z,{variant:"transparent",href:"/icons",width:"auto","data-testid":"breadcrumbs_icons",children:"icons"}),(0,t.jsx)(j.Z,{}),(0,t.jsx)(m.Z,{variant:"transparent",href:"/icons/customization",active:!0,width:"auto","data-testid":"breadcrumbs_customization",children:"customization"})]})})}),(0,t.jsxs)(c.Z,{fluid:!1,children:[(0,t.jsxs)(p.Z,{id:"customization",children:[(0,t.jsx)(x.Z,{variant:"h1",children:"Customization"}),(0,t.jsx)(x.Z,{variant:"body1",children:"The icons library provides various ways to customize its components to fit your project's design and functionality requirements:"})]}),(0,t.jsxs)(p.Z,{id:"theming",children:[(0,t.jsx)(x.Z,{variant:"h2",children:"Theming"}),(0,t.jsx)(x.Z,{variant:"body1",children:"Customize the appearance and behavior of icons components using a theming system from @modjs/utils."}),(0,t.jsxs)(p.Z,{id:"light-theme",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"Light Theme"}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(y.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"lightTheme.js"})]}),children:"import { ModLightTheme } from '@modjs/utils'\n\n    mode: '#ffffff',\n\n    typography: {\n        ff: {\n            primary: 'KoHo',\n        },\n        fw: {\n            medium: 400,\n            semibold: 600,\n            bold: 700,\n        },\n        fs: {\n            xsm: '0.75rem',\n            sm: '0.875rem',\n            md: '1rem',\n            lg: '1.5rem',\n            xl: '2rem',\n        },\n        color: {\n            primary: '#474747',\n            main: '#474747',\n            light: '#8e8e8e',\n            secondary: '#c2c2c2',\n            white: '#ffffff',\n            success: '#5a6b31',\n            error: '#ca3c1f',\n        },\n    },\n    color: {\n        primary: '#1f8eff',\n        secondary: '#474747',\n        main: '#c2c2c2',\n        success: '#5a6b31',\n        error: '#ca3c1f',\n        light: '#f2f2f2',\n        dark: '#c2c2c2',\n        transparent: 'transparent',\n    },\n    border: {\n        primary: '1px solid #1f8eff',\n        success: '1px solid #5a6b31',\n        error: '1px solid #ca3c1f',\n        light: '1px solid #f2f2f2',\n        dark: '1px solid #c2c2c2',\n        none: 'none',\n    },\n    borderRadius: '2px',\n    avatar: {\n        height: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        width: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    image: {\n        height: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        width: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    icons: {\n        height: {\n            sm: '16px',\n            md: '32px',\n            lg: '64px',\n        },\n        width: {\n            sm: '24px',\n            md: '32px',\n            lg: '64px',\n        },\n    },\n    elevation: {\n        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',\n        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',\n        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',\n        none: 'none',\n    },\n    opacity: {\n        high: 0.95,\n        medium: 0.85,\n        low: 0.5,\n    },\n    scrollbarColor: '#c2c2c2 #f2f2f2',\n    tooltipBg: '#474747',\n}\nexport default lightTheme"})]}),(0,t.jsxs)(p.Z,{id:"dark-theme",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"Dark Theme"}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(y.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"darkTheme.js"})]}),children:"import { ModDarkTheme } from '@modjs/utils'\n\n    ...ModDarkTheme.mode,\n    mode: '#121111',\n    typography: {\n        ...ModDarkTheme.typography,\n        ff: {\n            primary: 'KoHo',\n        },\n        fw: {\n            medium: 400,\n            semibold: 600,\n            bold: 700,\n        },\n        fs: {\n            xsm: '0.75rem',\n            sm: '0.875rem',\n            md: '1rem',\n            lg: '1.5rem',\n            xl: '2rem',\n        },\n        color: {\n            primary: '#ffffff',\n            main: '#c2c2c2',\n            light: '#8e8e8e',\n            secondary: '#474747',\n            white: '#ffffff',\n            success: '#5a6b31',\n            error: '#ca3c1f',\n        },\n    },\n    color: {\n        primary: '#1f8eff',\n        secondary: '#ffffff',\n        main: '#c2c2c2',\n        success: '#5a6b31',\n        error: '#ca3c1f',\n        light: '#1f1d1d',\n        dark: '#474747',\n        transparent: 'transparent',\n    },\n    border: {\n        primary: '1px solid #1f8eff',\n        success: '1px solid #5a6b31',\n        error: '1px solid #ca3c1f',\n        light: '1px solid #1f1d1d',\n        dark: '1px solid #474747',\n        none: 'none',\n    },\n    borderRadius: '2px',\n    avatar: {\n        height: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        width: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    image: {\n        height: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        width: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    icons: {\n        height: {\n            sm: '1rem',\n            md: '2rem',\n            lg: '4rem',\n        },\n        width: {\n            sm: '1.5rem',\n            md: '2rem',\n            lg: '4rem',\n        },\n    },\n    elevation: {\n        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',\n        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',\n        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',\n        none: 'none',\n    },\n    opacity: {\n        high: 0.95,\n        medium: 0.85,\n        low: 0.5,\n    },\n    scrollbarColor: '#474747 #1f1d1d',\n    tooltipBg: '#8e8e8e',\n}\nexport default darkTheme"})]})]}),(0,t.jsxs)(p.Z,{id:"override-styles",children:[(0,t.jsx)(x.Z,{variant:"h2",children:"Override Styles"}),(0,t.jsx)(x.Z,{variant:"body1",children:"To override default styles of the components, you have several options. Note that the following options are listed in accending order based on the precedence. For example: the default styles have lowest precedence followed by the styles from System Props while the inline styles have the highest precedence."}),(0,t.jsxs)(p.Z,{id:"system-props",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"System Props"}),(0,t.jsxs)(x.Z,{variant:"body1",children:["Each component under @modjs/icons is wrapped with a",(0,t.jsxs)(m.Z,{variant:"inline",href:"https://github.com/modjs-org/modjs/tree/main/packages/utils/src/components/withSystemProps",target:"_blank","data-testid":"system_props_withSystemProps",children:["withModSystemProps ",(0,t.jsx)(Z.Z,{})]}),"HOC. All props provided by withModSystemProps can be applied to the component to override default styles."]}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { AccountIcon } from '@modjs/icons' \n                                        \nexport const App = () => {\n    <AccountIcon\n        m={32}\n        p={32}\n    />\n}"})]}),(0,t.jsxs)(p.Z,{id:"styled-components",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"Styled Components"}),(0,t.jsxs)(x.Z,{variant:"body1",children:["All icons components from @modjs/icons are styled using the",(0,t.jsxs)(m.Z,{variant:"inline",href:"https://styled-components.com/",target:"_blank","data-testid":"styled_components_styled_components",children:["styled-components ",(0,t.jsx)(Z.Z,{})]}),"library. The default styles can be overridden using styled-components."]}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { MailIcon } from '@modjs/icons' \nimport {styled} from 'styled-components'\n\nconst StyledMailIcon = styled(MailIcon)`\n    margin: 32px;\n    padding: 32px;\n`\nexport const App = () => {\n    <StyledMailIcon />\n}"})]}),(0,t.jsxs)(p.Z,{id:"custom-classnames",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"Custom classNames"}),(0,t.jsx)(x.Z,{variant:"body1",children:"Each icons components are designed to accept all valid HTML attributes. Therefore, the icons components can be styled using the class attribute."}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { ReactIcon } from '@modjs/icons' \n\nexport const App = () => {\n    <ReactIcon className = \"icon-class\" />\n}"})]}),(0,t.jsxs)(p.Z,{id:"inline-styles",children:[(0,t.jsx)(x.Z,{variant:"h3",children:"Inline Styles"}),(0,t.jsx)(x.Z,{variant:"body1",children:"Since all icons components accept valid HTML attributes, the component can also be styled using the style HTML attribute."}),(0,t.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,t.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,t.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,t.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:'import { JavaScriptIcon } from \'@modjs/core\' \n\nexport const App = () => {\n    <JavaScriptIcon style = {{padding: "8px" margin: "8px"}} />\n}'})]})]}),(0,t.jsxs)(d.Z,{display:"flex",justifyContent:"space-between",my:32,children:[(0,t.jsxs)(m.Z,{href:"/icons/installation",variant:"inline",display:"flex",alignItems:"center","data-testid":"prev_installation",children:[(0,t.jsx)(v.Z,{}),"Installation"]}),(0,t.jsxs)(m.Z,{href:"/icons/api",variant:"inline",display:"flex",alignItems:"center","data-testid":"next_icons_api",children:["Icons API",(0,t.jsx)(b.Z,{})]})]})]}),(0,t.jsx)(k.Z,{})]}),(0,t.jsx)(A.Z,{defaultFragmentId:"#customization",sections:["customization","theming","light-theme","dark-theme","override-styles","system-props","styled-components","custom-classnames","inline-styles"],children:(0,t.jsx)(S,{})})]})]})})}}},function(n){n.O(0,[4293,65,6071,4663,8322,3375,3372,8470,9594,1744],function(){return n(n.s=1687)}),_N_E=n.O()}]);