{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/icon","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"12ec8ac1-aac8-51cc-ac17-e91be717d063","title":"Icon","slug":"/contrast/react/components/icon"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Icon\",\n  \"metaTitle\": \"Icon Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building an Icon Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Icon\"), mdx(\"p\", null, \"Icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Examples\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, \"Default Icon example.\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-primary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-stack-overflow\"\n  }), mdx(\"span\", null, \" click me \")), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-secondary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook\"\n  }), mdx(\"span\", null, \"click me \")), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-reddit\"\n  }), mdx(\"span\", null, \" click me \")), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-danger\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  }), mdx(\"span\", null, \" click me \")), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-dark\"\n  }, mdx(\"i\", {\n    className: \"fab fa-instagram\"\n  }), mdx(\"span\", null, \" click me \")), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-warning\"\n  }, mdx(\"i\", {\n    className: \"fab fa-google\"\n  }), mdx(\"span\", null, \" click me \")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\">\\n            <CDBIcon fab icon=\\\"stack-overflow\\\" />\\n            click me\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\">\\n            <CDBIcon fab icon=\\\"facebook\\\" />\\n            click me\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\">\\n            <CDBIcon fab icon=\\\"reddit\\\" />\\n            click me\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\">\\n            <CDBIcon fab icon=\\\"twitter\\\" />\\n            click me\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\">\\n            <CDBIcon fab icon=\\\"instagram\\\" />\\n            click me\\n          </CDBBtn>\\n          <CDBBtn color=\\\"warning\\\">\\n            <CDBIcon fab icon=\\\"google\\\" />\\n            click me\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Border Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab fa-stack-overflow icon-border\"\n  }), mdx(\"i\", {\n    className: \"fab fa-facebook icon-border\"\n  }), mdx(\"i\", {\n    className: \"fab fa-reddit icon-border\"\n  }), mdx(\"i\", {\n    className: \"fab fa-twitter icon-border\"\n  }), mdx(\"i\", {\n    className: \"fab fa-instagram icon-border\"\n  }), mdx(\"i\", {\n    className: \"fab fa-google icon-border\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab border icon=\\\"stack-overflow\\\" />\\n          <CDBIcon fab border icon=\\\"facebook\\\" />\\n          <CDBIcon fab border icon=\\\"reddit\\\" />\\n          <CDBIcon fab border icon=\\\"twitter\\\" />\\n          <CDBIcon fab border icon=\\\"instagram\\\" />\\n          <CDBIcon fab border icon=\\\"google\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Spin Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab p-2 fa-stack-overflow icon-spin\"\n  }), mdx(\"i\", {\n    className: \"fab p-2 fa-facebook icon-spin\"\n  }), mdx(\"i\", {\n    className: \"fab p-2 fa-reddit icon-spin\"\n  }), mdx(\"i\", {\n    className: \"fab p-2 fa-twitter icon-spin\"\n  }), mdx(\"i\", {\n    className: \"fab p-2 fa-instagram icon-spin\"\n  }), mdx(\"i\", {\n    className: \"fab p-2 fa-google icon-spin\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab spin icon=\\\"stack-overflow\\\" />\\n          <CDBIcon fab spin icon=\\\"facebook\\\" />\\n          <CDBIcon fab spin icon=\\\"reddit\\\" />\\n          <CDBIcon fab spin icon=\\\"twitter\\\" />\\n          <CDBIcon fab spin icon=\\\"instagram\\\" />\\n          <CDBIcon fab spin icon=\\\"google\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pull Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab fa-stack-overflow icon-pull\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab pull=\\\"left\\\" icon=\\\"stack-overflow\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pulse Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab p-1 fa-stack-overflow icon-pulse\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook icon-pulse\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-reddit icon-pulse\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-twitter icon-pulse\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-instagram icon-pulse\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-google icon-pulse\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab pulse icon=\\\"stack-overflow\\\" />\\n          <CDBIcon fab pulse icon=\\\"facebook\\\" />\\n          <CDBIcon fab pulse icon=\\\"reddit\\\" />\\n          <CDBIcon fab pulse icon=\\\"twitter\\\" />\\n          <CDBIcon fab pulse icon=\\\"instagram\\\" />\\n          <CDBIcon fab pulse icon=\\\"google\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Flip Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab p-1 fa-stack-overflow fa-flip-vertical\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-flip-vertical\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab flip=\\\"horizontal\\\" icon=\\\"stack-overflow\\\" />\\n          <CDBIcon fab flip=\\\"vertical\\\" icon=\\\"facebook\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Rotate Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab p-1 fa-stack-overflow icon-rotate\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook icon-rotate\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab rotate=\\\"90\\\" icon=\\\"stack-overflow\\\" />\\n          <CDBIcon fab rotate=\\\"180\\\" icon=\\\"facebook\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sizes\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-sm\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-md\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-lg\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-2x\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-3x\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-4x\"\n  }), mdx(\"i\", {\n    className: \"fab p-1 fa-facebook fa-5x\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Icon = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"sm\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"md\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"lg\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"3x\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"4x\\\" />\\n          <CDBIcon fab icon=\\\"facebook\\\" size=\\\"5x\\\" />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Icon component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Icon Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Icon component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Icon Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBIcon component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Required!\"), \" The Font Awesome icon name, which you want to use\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon icon=\\\"facebook\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"border\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds border around icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon border .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"brand\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets brand icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: fab\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon brand icon=\\\"chevron\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fab\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets brand icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: brand\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon fab icon=\\\"twitter\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: light\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon fal icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"far\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: regular\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon far icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fixed\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets fixed with of icons (i.e. inside list)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon fixed icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"flip\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Flips icon; acceptable props: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon flip=\\\"vertical\\\" icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"inverse\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets alternative icon color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon inverse icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"light\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: fal\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon light icon=\\\"facebook\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"list\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fa-li\"), \" to the className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon list icon=\\\"facebook\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"pull\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Pulls icon to the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon pull=\\\"left\\\" icon=\\\"user\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"pulse\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Rotates icon in 8 steps\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon pulse icon=\\\"facebook\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"rotate\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Rotates icon by \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"90\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"180\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"270\"), \" degrees\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon rotate=\\\"90\\\" icon=\\\"facebook\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Increase icon size; accepts parameters: \", \"[\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"2x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"3x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"4x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"5x\"), \"]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon size=\\\"5x\\\" icon=\\\"facebook\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"spin\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Spins the icon, you can combine this prop with \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pulse\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBIcon spin  .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"stack\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Use class \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fa-stack\"), \" on wrapper to stack multiple icons; use \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"1x\"), \" for regular sized icon and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"2x\"), \" for larger one\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<span className=\\\"fa-stack\\\" ...> <CDBIcon far icon=\\\"square\\\" stack=\\\"2x\\\" .../> <CDBIcon fab icon=\\\"twitter\\\" stack=\\\"1x\\\" .../> <.../span>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#icon","title":"Icon","items":[{"url":"#examples","title":"Examples"},{"url":"#border-icons","title":"Border Icons"},{"url":"#spin-icons","title":"Spin Icons"},{"url":"#pull-icons","title":"Pull Icons"},{"url":"#pulse-icons","title":"Pulse Icons"},{"url":"#flip-icons","title":"Flip Icons"},{"url":"#rotate-icons","title":"Rotate Icons"},{"url":"#sizes","title":"Sizes"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-icon-import-statement","title":"Contrast Icon Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/icon.mdx"},"frontmatter":{"metaTitle":"Icon Component for Contrast Bootstrap React","metaDescription":"Building an Icon Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"12ec8ac1-aac8-51cc-ac17-e91be717d063"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}