(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6226],{132:function(n,e,s){Promise.resolve().then(s.bind(s,1945))},1945:function(n,e,s){"use strict";s.r(e),s.d(e,{default:function(){return O}});var o=s(4004),c=s(4978),i=s(65),r=s(9819),t=s(6739),a=s(5227),l=s(271),d=s(721),h=s(9524),x=s(988),p=s(2433),j=s(4300),I=s(6551),Z=s(8420),m=s(1753),u=s(9132),f=s(2161),b=s(8730),g=s(770),v=s(180),y=s(2190),w=s(4231),k=s(5536),C=s(1966),P=s(3375),_=s(3686),S=s(7098),A=s(9426),D=s(5891),T=s(5123),N=s(7354),L=s(1943),F=s(5527),M=s(1209),E=s(9513),R=s(959),q=s(2614),z=()=>{let{fragmentId:n,setFragmentId:e}=(0,c.useContext)(R.Z),s=n=>{e(n.target.hash)};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(j.Z,{variant:"h3",fw:"semibold",children:"Table of Contents"}),(0,o.jsxs)(F.Z,{indent:!1,children:[(0,o.jsx)(M.Z,{onClick:s,children:(0,o.jsx)(x.Z,{variant:"transparent",href:"#icons-api",active:/#icons-api$/.test(n),"data-testid":"icons_api",children:"Icons API"})}),(0,o.jsx)(M.Z,{onClick:s,children:(0,o.jsx)(x.Z,{variant:"transparent",href:"#import",active:/#import$/.test(n),"data-testid":"import",children:"Import"})}),(0,o.jsx)(M.Z,{onClick:s,children:(0,o.jsx)(x.Z,{variant:"transparent",href:"#icons-props",active:/#icons-props$/.test(n),"data-testid":"icons_props",children:"Icons Props"})}),(0,o.jsx)(E.Z,{}),(0,o.jsx)(M.Z,{onClick:s,children:(0,o.jsx)(x.Z,{variant:"transparent",fw:"bold",href:"#system-props",active:/#system-props$/.test(n),"data-testid":"system_props",children:"System Props"})})]}),(0,o.jsx)(q.Z,{})]})},G=s(9362),W=s(176),$=s(1064);let B=(0,i.zo)(r.Z).withConfig({componentId:"sc-f3c658ae-0"})(["width:100%;"]);function O(){let n=(0,k.Z)({query:{media:"(min-width: 1281px)"}}),e=(0,k.Z)({query:{media:"(max-width: 1280px)"}}),s=(0,k.Z)({query:{media:"(max-width: 768px)"}}),c=["icons-api","import","icons-props","system-props",...$.Z];return(0,o.jsx)(G.Z,{children:(0,o.jsxs)(t.Z,{children:[(0,o.jsx)(D.Z,{currentPage:"root/icons/children"}),(0,o.jsxs)(a.Z,{display:"flex",children:[n&&(0,o.jsx)(l.Z,{children:(0,o.jsx)(d.Z,{fluid:!0,children:(0,o.jsx)(L.Z,{})})}),(0,o.jsxs)(B,{borderLeft:s?"none":e?"none":"dark",borderRight:s?"none":"dark",children:[(0,o.jsx)(a.Z,{borderBottom:"dark",children:(0,o.jsx)(d.Z,{children:(0,o.jsxs)(h.Z,{children:[(0,o.jsx)(x.Z,{variant:"transparent",href:"/icons",width:"auto","data-testid":"breadcrumbs_icons",children:"icons"}),(0,o.jsx)(C.Z,{}),(0,o.jsx)(x.Z,{variant:"transparent",href:"/icons/api",active:!0,width:"auto","data-testid":"breadcrumbs_api",children:"api"})]})})}),(0,o.jsxs)(d.Z,{fluid:!1,children:[(0,o.jsxs)(p.Z,{id:"icons-api",children:[(0,o.jsx)(j.Z,{variant:"h1",children:"React Icons API"}),(0,o.jsx)(j.Z,{variant:"body1",children:"API reference for the React Icons component from Modj.js. Learn about how to use the Icons component and all the valid props that can be supplied to these component."})]}),(0,o.jsxs)(p.Z,{id:"import",children:[(0,o.jsx)(j.Z,{variant:"h2",children:"Import "}),(0,o.jsx)(I.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,o.jsxs)(a.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,o.jsx)(P.Z,{height:"2em",width:"1.5em"}),(0,o.jsx)(j.Z,{variant:"small",fs:1,children:"App.jsx"})]}),headerContent:(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(Z.Z,{arrow:!0,el:(0,o.jsx)(x.Z,{variant:"icon",href:"https://github.com/modjs-org/modjs/blob/main/packages/icons/src/index.ts",target:"_blank","data-testid":"import_github",children:(0,o.jsx)(_.Z,{})}),children:(0,o.jsx)(m.Z,{displayPosition:"left",children:(0,o.jsx)(j.Z,{variant:"small",color:"white",children:"View Source on Github"})})})}),children:"import { \n    AccountIcon,\n    AngularIcon,\n    AnimatedLaodingIcon,\n    AwsIcon,\n    BabelIcon,\n    BackendIcon,\n    CloseIcon,\n    CloudIcon,\n    CopyIcon,\n    CPlusPlusIcon,\n    CssIcon,\n    CypressIcon,\n    DarkThemeIcon,\n    DatabaseIcon,\n    DesktopIcon,\n    DevOpsIcon,\n    DjangoIcon,\n    DockerIcon,\n    DownChevronIcon,\n    DownloadIcon,\n    EmailIcon,\n    ErrorIcon,\n    EsLintIcon,\n    FacebookIcon,\n    FlutterIcon,\n    ForwardSlashIcon,\n    FrontendIcon,\n    FullStackProIcon,\n    GithubIcon,\n    GitIcon,\n    GoogleCloudIcon,\n    HtmlIcon,\n    InfrastructureIcon,\n    JavascriptIcon,\n    KotlinIcon,\n    KubernetesIcon,\n    LeftArrowIcon,\n    LightThemeIcon,\n    LinkedInIcon,\n    LoginIcon,\n    MailIcon,\n    MenuIcon,\n    MinusIcon,\n    MobileIcon,\n    MobileSettingsIcon,\n    MongoDbIcon,\n    NextJsIcon,\n    NodeIcon,\n    NotVisibleIcon,\n    NpmIcon,\n    PasswordIcon,\n    PilotProIcon,\n    PlayIcon,\n    PlusIcon,\n    PostgreSqlIcon,\n    PythonIcon,\n    QtIcon,\n    QuoteIcon,\n    ReactIcon,\n    RightArrowIcon,\n    RightChevronIcon,\n    SearchIcon,\n    SettingsIcon,\n    SquareIcon,\n    SubmitIcon,\n    SuccessIcon,\n    TerminalIcon,\n    TerraformIcon,\n    TypescriptIcon,\n    UpChevronIcon,\n    VisibleIcon,\n    WebpackIcon,\n    WorldWideWebIcon,\n    XIcon,\n    YoutubeIcon\n} from '@modjs/icons'\n"})]}),(0,o.jsxs)(p.Z,{id:"icons-props",pb:"normal",mt:16,children:[(0,o.jsx)(j.Z,{variant:"h2",children:"Icons Props"}),(0,o.jsx)(j.Z,{variant:"body1",children:"The following props are specific to the Icons component and can be applied to all the icons component. Note that some of these props may have no effect on brands icons and is only applied to ui icons."}),(0,o.jsxs)(u.Z,{children:[(0,o.jsx)(f.Z,{children:(0,o.jsxs)(b.Z,{children:[(0,o.jsx)(g.Z,{children:"Name"}),(0,o.jsx)(g.Z,{children:"Type"}),(0,o.jsx)(g.Z,{children:"Default"}),(0,o.jsx)(g.Z,{children:"Description"})]})}),(0,o.jsxs)(v.Z,{children:[(0,o.jsxs)(b.Z,{children:[(0,o.jsx)(y.Z,{children:"fill"}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:"string"})}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:'"primary"'})}),(0,o.jsx)(y.Z,{children:"Adjust the fill value based on theme color or with custom CSS hex color."})]}),(0,o.jsxs)(b.Z,{children:[(0,o.jsx)(y.Z,{children:"stroke"}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:"string"})}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:'"primary"'})}),(0,o.jsx)(y.Z,{children:"The stroke for the AnimatedLoadingIcon component."})]}),(0,o.jsxs)(b.Z,{children:[(0,o.jsx)(y.Z,{children:"height"}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:"string"})}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:'"sm / md / lg"'})}),(0,o.jsx)(y.Z,{children:"The height of the component."})]}),(0,o.jsxs)(b.Z,{children:[(0,o.jsx)(y.Z,{children:"width"}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:"string"})}),(0,o.jsx)(y.Z,{children:(0,o.jsx)(w.Z,{color:"success",children:'"sm / md / lg"'})}),(0,o.jsx)(y.Z,{children:"The width of the component."})]})]})]})]}),(0,o.jsx)(N.Z,{}),(0,o.jsxs)(a.Z,{display:"flex",justifyContent:"space-between",my:32,children:[(0,o.jsxs)(x.Z,{href:"/icons/customization",variant:"inline",display:"flex",alignItems:"center","data-testid":"prev_customization",children:[(0,o.jsx)(S.Z,{}),"Customization"]}),(0,o.jsxs)(x.Z,{href:"/icons",variant:"inline",display:"flex",alignItems:"center","data-testid":"next_icons",children:["Icons",(0,o.jsx)(A.Z,{})]})]})]}),(0,o.jsx)(T.Z,{})]}),(0,o.jsx)(W.Z,{defaultFragmentId:"#icons-api",sections:c,children:(0,o.jsx)(z,{})})]})]})})}}},function(n){n.O(0,[4293,65,6071,4663,8322,3375,1041,8470,9594,1744],function(){return n(n.s=132)}),_N_E=n.O()}]);