1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.24.5"/><meta data-react-helmet="true" name="description" content="Transforms SVG into React Components."/><meta data-react-helmet="true" property="og:title" content="SVGR - Transforms SVG into React Components. - SVGR"/><meta data-react-helmet="true" property="og:url" content="https://react-svgr.com"/><meta data-react-helmet="true" property="og:description" content="Transforms SVG into React Components."/><meta data-react-helmet="true" property="og:type" content="website"/><meta data-react-helmet="true" property="og:image" content="https://react-svgr.com/static/821ffd692c8ad7633a053f1ab87482e1/f2f1c/social.jpg"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:image:src" content="https://react-svgr.com/static/821ffd692c8ad7633a053f1ab87482e1/f2f1c/social.jpg"/><meta data-react-helmet="true" name="twitter:creator" content="Greg Bergé"/><meta data-react-helmet="true" name="twitter:title" content="SVGR - Transforms SVG into React Components. - SVGR"/><meta data-react-helmet="true" name="twitter:description" content="Transforms SVG into React Components."/><style data-href="/styles.089d7a56c16d88f63db6.css" data-identity="gatsby-global-css">/*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}
1.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1 1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input:-ms-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);-webkit-animation:none;animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}}.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);-webkit-animation:fade-in .1s ease-in forwards;animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top center;transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{f
1ill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}</style><style data-styled="" data-styled-version="5.3.6">body{--xstyled-colors-background:#ffffff;--xstyled-colors-editor-background:#18181b;--xstyled-colors-background-light:#f4f4f5;--xstyled-colors-background-primary:#ffedd5;--xstyled-colors-background-mark:#fef08a;--xstyled-colors-background-light-a50:rgba(244,244,245,0.95);--xstyled-colors-on-background:#000000;--xstyled-colors-on-background-light:#3f3f46;--xstyled-colors-on-background-primary:#c2410c;--xstyled-colors-on-background-primary-dark:#9a3412;--xstyled-colors-layout-border:#d4d4d8;--xstyled-colors-control-background:#f4f4f5;--xstyled-colors-control-placeholder:#52525b;--xstyled-colors-control-on:#18181b;--xstyled-colors-control-border:#d4d4d8;--xstyled-colors-control-border-hover:#71717a;--xstyled-colors-control-border-active:#fb923c;--xstyled-colors-blockquote-link:#854d0e;--xstyled-colors-blockquote-background:#fef08a;--xstyled-colors-blockquote-border:yellow;--xstyled-colors-doc-search-suggestion-highlight-background:#fed7aa;--xstyled-colors-doc-search-suggestion-highlight-on-background:#9a3412;--xstyled-colors-doc-search-suggestion-content-background:#ffedd5;--xstyled-colors-doc-search-suggestion-content-underline:#c2410c;}/*!sc*/ 2@media (prefers-color-scheme:dark){body{--xstyled-colors-background:#18181b;--xstyled-colors-editor-background:#000000;--xstyled-colors-background-light:#27272a;--xstyled-colors-background-primary:#7c2d12;--xstyled-colors-background-mark:#eab308;--xstyled-colors-background-light-a50:rgba(39,39,42,0.95);--xstyled-colors-on-background:#ffffff;--xstyled-colors-on-background-light:#d4d4d8;--xstyled-colors-on-background-primary:#fdba74;--xstyled-colors-on-background-primary-dark:#fed7aa;--xstyled-colors-layout-border:#3f3f46;--xstyled-colors-control-background:#27272a;--xstyled-colors-control-placeholder:#a1a1aa;--xstyled-colors-control-on:#f4f4f5;--xstyled-colors-control-border:#3f3f46;--xstyled-colors-control-border-hover:#71717a;--xstyled-colors-control-border-active:#ea580c;--xstyled-colors-blockquote-link:#fef08a;--xstyled-colors-blockquote-background:#713f12;--xstyled-colors-blockquote-border:#fde047;--xstyled-colors-doc-search-suggestion-highlight-background:#9a3412;--xstyled-colors-doc-search-suggestion-highlight-on-background:#fed7aa;--xstyled-colors-doc-search-suggestion-content-background:#7c2d12;--xstyled-colors-doc-search-suggestion-content-underline:#fdba74;}}/*!sc*/ 3body.xstyled-color-mode-light{--xstyled-colors-background:#ffffff;--xstyled-colors-editor-background:#18181b;--xstyled-colors-background-light:#f4f4f5;--xstyled-colors-background-primary:#ffedd5;--xstyled-colors-background-mark:#fef08a;--xstyled-colors-background-light-a50:rgba(244,244,245,0.95);--xstyled-colors-on-background:#000000;--xstyled-colors-on-background-light:#3f3f46;--xstyled-colors-on-background-primary:#c2410c;--xstyled-colors-on-background-primary-dark:#9a3412;--xstyled-colors-layout-border:#d4d4d8;--xstyled-colors-control-background:#f4f4f5;--xstyled-colors-control-placeholder:#52525b;--xstyled-colors-control-on:#18181b;--xstyled-colors-control-border:#d4d4d8;--xstyled-colors-control-border-hover:#71717a;--xstyled-colors-control-border-active:#fb923c;--xstyled-colors-blockquote-link:#854d0e;--xstyled-colors-blockquote-background:#fef08a;--xstyled-colors-blockquote-border:yellow;--xstyled-colors-doc-search-suggestion-highlight-background:#fed7aa;--xstyled-colors-doc-search-suggestion-highlight-on-background:#9a3412;--xstyled-colors-doc-search-suggestion-content-background:#ffedd5;--xstyled-colors-doc-search-suggestion-content-underline:#c2410c;}/*!sc*/ 4body.xstyled-color-mode-dark{--xstyled-colors-background:#18181b;--xstyled-colors-editor-background:#000000;--xstyled-colors-background-light:#27272a;--xstyled-colors-background-primary:#7c2d12;--xstyled-colors-background-mark:#eab308;--xstyled-colors-background-light-a50:rgba(39,39,42,0.95);--xstyled-colors-on-background:#ffffff;--xstyled-colors-on-background-light:#d4d4d8;--xstyled-colors-on-background-primary:#fdba74;--xstyled-colors-on-background-primary-dark:#fed7aa;--xstyled-colors-layout-border:#3f3f46;--xstyled-colors-control-background:#27272a;--xstyled-colors-control-placeholder:#a1a1aa;--xstyled-colors-control-on:#f4f4f5;--xstyled-colors-control-border:#3f3f46;--xstyled-colors-control-border-hover:#71717a;--xstyled-colors-control-border-active:#ea580c;--xstyled-colors-blockquote-link:#fef08a;--xstyled-colors-blockquote-background:#713f12;--xstyled-colors-blockquote-border:#fde047;--xstyled-colors-doc-search-suggestion-highlight-background:#9a3412;--xstyled-colors-doc-search-suggestion-highlight-on-background:#fed7aa;--xstyled-colors-doc-search-suggestion-content-background:#7c2d12;--xstyled-colors-doc-search-suggestion-content-underline:#fdba74;}/*!sc*/ 5data-styled.g1[id="sc-global-iEDSUG1"]{content:"sc-global-iEDSUG1,"}/*!sc*/ 6.bbVuTt{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:-8px;margin-left:-8px;}/*!sc*/ 7.eOAQEY{box-sizing:border-box;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;padding-right:8px;padding-left:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ 8.dJEIZh{box-sizing:border-box;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:none;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;padding-right:8px;padding-left:8px;display:none;}/*!sc*/ 9@media (min-width:768px){.dJEIZh{display:block;}}/*!sc*/ 10.bVBhKd{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}/*!sc*/ 11@media (min-width:768px){.cldefo{width:50%;}}/*!sc*/ 12.ZakAx{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:-8px;-webkit-box-pack:center;
12-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ 13@media (min-width:768px){.ZakAx{-webkit-box-pack:initial;-webkit-justify-content:initial;-ms-flex-pack:initial;justify-content:initial;}}/*!sc*/ 14.cLiaKc{box-sizing:border-box;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:none;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;padding:8px;}/*!sc*/ 15data-styled.g31[id="sc-cwSeag"]{content:"bbVuTt,eOAQEY,dJEIZh,bVBhKd,cldefo,ZakAx,cLiaKc,"}/*!sc*/ 16.gOZkoP{box-sizing:border-box;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:none;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;padding-right:8px;padding-left:8px;}/*!sc*/ 17data-styled.g54[id="sc-AHaJN"]{content:"gOZkoP,"}/*!sc*/ 18.cItLhx{padding-top:24px;padding-bottom:24px;border-top:1px solid;border-bottom:1px solid;border-color:var(--xstyled-colors-layout-border,#d4d4d8);}/*!sc*/ 19data-styled.g90[id="sc-bWOGAC"]{content:"cItLhx,"}/*!sc*/ 20.fJEFRw{margin:0;padding:0;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ 21data-styled.g112[id="sc-EJAja"]{content:"fJEFRw,"}/*!sc*/ 22.GEtRI{width:100%;max-width:1440px;margin:0 auto;padding-left:16px;padding-right:16px;}/*!sc*/ 23.jGAvcV{width:100%;max-width:1440px;margin:0 auto;padding-left:16px;padding-right:16px;background-image:url(/static/hero-bg-63a965df103d9d0d086505a000b2706a.png);}/*!sc*/ 24.cGEWLO{width:100%;max-width:1440px;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-24px;margin-bottom:-24px;padding-right:16px;padding-left:16px;}/*!sc*/ 25data-styled.g144[id="ScreenContainer-sc-cql6od-0"]{content:"GEtRI,jGAvcV,cGEWLO,"}/*!sc*/ 26.kXpMXK{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--xstyled-colors-control-background,#f4f4f5);border-radius:4px;border-style:solid;border-width:1px;border-color:var(--xstyled-colors-control-border,#d4d4d8);line-height:1.4;padding:4px 8px;color:var(--xstyled-colors-control-on,#18181b);-webkit-transition:300ms ease all;transition:300ms ease all;}/*!sc*/ 27.kXpMXK::-webkit-input-placeholder{color:var(--xstyled-colors-control-placeholder,#52525b);}/*!sc*/ 28.kXpMXK::-moz-placeholder{color:var(--xstyled-colors-control-placeholder,#52525b);}/*!sc*/ 29.kXpMXK:-ms-input-placeholder{color:var(--xstyled-colors-control-placeholder,#52525b);}/*!sc*/ 30.kXpMXK::placeholder{color:var(--xstyled-colors-control-placeholder,#52525b);}/*!sc*/ 31.kXpMXK:hover{border-color:var(--xstyled-colors-control-border-hover,#71717a);}/*!sc*/ 32.kXpMXK:focus{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,0.5);border-color:var(--xstyled-colors-control-border-active,#fb923c);}/*!sc*/ 33data-styled.g145[id="Input-sc-8fgpy5-0"]{content:"kXpMXK,"}/*!sc*/ 34.kOPWjT{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--xstyled-colors-control-placeholder,#52525b);-webkit-transition:300ms ease all;transition:300ms ease all;position:relative;}/*!sc*/ 35.kOPWjT:focus-within{color:var(--xstyled-colors-control-on,#18181b);}/*!sc*/ 36.kOPWjT > .Input-sc-8fgpy5-0{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;min-width:0;padding-left:32px;}/*!sc*/ 37.kOPWjT > .algolia-autocomplete{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;min-width:0;}/*!sc*/ 38.kOPWjT > .algolia-autocomplete > .Input-sc-8fgpy5-0{padding-left:32px;}/*!sc*/ 39data-styled.g146[id="Input__InputGroup-sc-8fgpy5-1"]{content:"kOPWjT,"}/*!sc*/ 40.bzkvxx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;padding:4px 8px;
40height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;z-index:1;}/*!sc*/ 41data-styled.g147[id="Input__InputGroupIcon-sc-8fgpy5-2"]{content:"bzkvxx,"}/*!sc*/ 42body.xstyled-color-mode-dark{--docsearch-text-color:rgb(245,246,247);--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:rgb(21,23,42);--docsearch-modal-shadow:inset 1px 1px 0 0 rgb(44,46,64),0 3px 8px 0 rgb(0,3,9);--docsearch-searchbox-background:rgb(9,10,17);--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:rgb(190,195,201);--docsearch-hit-shadow:none;--docsearch-hit-background:rgb(9,10,17);--docsearch-key-gradient:linear-gradient( -26.5deg,rgb(86,88,114) 0%,rgb(49,53,91) 100% );--docsearch-key-shadow:inset 0 -2px 0 0 rgb(40,45,85),inset 0 0 1px 1px rgb(81,87,125),0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-footer-background:rgb(30,33,54);--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:rgb(255,255,255);--docsearch-muted-color:rgb(127,132,151);}/*!sc*/ 43data-styled.g148[id="sc-global-dKpFov1"]{content:"sc-global-dKpFov1,"}/*!sc*/ 44.jXKulL{border:1px solid;border-color:var(--xstyled-colors-control-border,#d4d4d8);margin-right:4px;background-color:var(--xstyled-colors-control-background,#f4f4f5);text-align:center;padding:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:0.8em;line-height:1.2;font-family:sans-serif;border-radius:4px;min-width:1.5em;}/*!sc*/ 45data-styled.g149[id="DocSearch__Kbd-sc-z4bwrs-0"]{content:"jXKulL,"}/*!sc*/ 46@media (max-width:767.98px){.iwPoGo{overflow-x:auto;max-width:calc(100vw - 72px) !important;}}/*!sc*/ 47data-styled.g150[id="Nav-sc-1gjftm8-0"]{content:"iwPoGo,"}/*!sc*/ 48.eOUaRG{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--xstyled-colors-on-background,#000000);-webkit-transition:300ms ease all;transition:300ms ease all;-webkit-transition-property:color;transition-property:color;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;padding:0;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:-8px;margin-left:-8px;}/*!sc*/ 49.eOUaRG:hover,.eOUaRG:focus{color:var(--xstyled-colors-on-background-light,#3f3f46);}/*!sc*/ 50.huMkvp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--xstyled-colors-on-background,#000000);-webkit-transition:300ms ease all;transition:300ms ease all;-webkit-transition-property:color;transition-property:color;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;padding:0;}/*!sc*/ 51.huMkvp:hover,.huMkvp:focus{color:var(--xstyled-colors-on-background-light,#3f3f46);}/*!sc*/ 52data-styled.g151[id="Nav__InnerNavLink-sc-1gjftm8-1"]{content:"eOUaRG,huMkvp,"}/*!sc*/ 53.kSzfVc{list-style-type:none;white-space:nowrap;margin:0;padding:0 8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ 54data-styled.g152[id="Nav__NavListItem-sc-1gjftm8-2"]{content:"kSzfVc,"}/*!sc*/ 55.bbKdTH{background-color:var(--xstyled-colors-background,#ffffff);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--xstyled-colors-layout-border,#d4d4d8);padding:8px 0;height:50px;}/*!sc*/ 56@media (max-width:639.98px){.bbKdTH{overflow-x:auto;}}/*!sc*/ 57data-styled.g153[id="AppHeader__OuterHeader-sc-1h3vgiu-0"]{content:"bbKdTH,"}/*!sc*/ 58.chbMWU{-webkit-text-decoration:none;text-decoration:none;left:-999px;position:absolute;top:auto;width:1px;height:1px;overflow:hidden;z-index:-999;color:#f97316;}/*!sc*/ 59.chbMWU:focus{background-color:var(--xstyled-colors-background,#ffffff);border-radius:4px;left:auto;top:auto;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;overflow:auto;padding:8px;margin:8px;text-align:center;z-index:999;}/*!sc*/ 60data-styled.g154[id="AppHeader__NavSkipLink-sc-1h3vgiu-1"]{content:"chbMWU,"}/*!sc*/ 61.cSWeuh{position:-webkit-sticky;position:sticky;top:0;left:0;right:0;z-index:10;}/*!sc*/ 62data-styled.g155[id="PageLayout__StickyHeader-sc-1dbknlt-0"]{content:"cSWeuh,"}/*!sc*/ 63.iqFjRs{background-color:var(--xstyled-colors-background,#ffffff);-webkit-flex:1;-ms-flex:1;flex:1;}/*!sc*/ 64data-styled.g156[id="PageLayout__Main-sc-1dbknlt-1"]{content:"iqFjRs,"}/*!sc*/ 65.hgzvAb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}/*!sc*/ 66data-styled.g157[id="PageLayout__Container-sc-1dbknlt-2"]{content:"hgzvAb,"}/*!sc*/ 67.kiWFIj{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:4px;-webkit-transition:300ms ease all;transition:300ms ease all;font-weight:500;border:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:16px;padding:8px 16px;-webkit-text-decoration:none !important;text-decoration:none !important;}/*!sc*/ 68.kiWFIj:disabled{opacity:0.5;cursor:default;}/*!sc*/ 69.kiWFIj[data-variant='primary']{background-color:#ea580c;color:#ffffff;}/*!sc*/ 70.kiWFIj[data-variant='primary']:hover:not(:disabled){background-color:#c2410c;color:#ffffff;}/*!sc*/ 71.kiWFIj[data-variant='primary']:active:not(:disabled){background-color:#c2410c;color:#ffffff;}/*!sc*/ 72.kiWFIj[data-variant='success']{background-color:#16a34a;color:#ffffff;}/*!sc*/ 73.kiWFIj[data-variant='success']:hover:not(:disabled){background-color:#15803d;color:#ffffff;}/*!sc*/ 74.kiWFIj[data-variant='success']:active:not(:disabled){background-color:#15803d;color:#ffffff;}/*!sc*/ 75.kiWFIj[data-variant='danger']{background-color:#dc2626;color:#ffffff;}/*!sc*/ 76.kiWFIj[data-variant='danger']:hover:not(:disabled){background-color:#b91c1c;color:#ffffff;}/*!sc*/ 77.kiWFIj[data-variant='danger']:active:not(:disabled){background-color:#b91c1c;color:#ffffff;}/*!sc*/ 78.kiWFIj[data-variant='neutral']{background-color:#d4d4d8;color:#000000;}/*!sc*/ 79.kiWFIj[data-variant='neutral']:hover:not(:disabled){background-color:#a1a1aa;color:#000000;}/*!sc*/ 80.kiWFIj[data-variant='neutral']:active:not(:disabled){background-color:#a1a1aa;color:#000000;}/*!sc*/ 81data-styled.g172[id="Button__InnerButton-sc-1qxez5q-0"]{content:"kiWFIj,"}/*!sc*/ 82.iOuSTG{border-left:1px solid;border-left-style:dashed;border-left-color:var(--xstyled-colors-layout-border,#d4d4d8);padding-right:48px !important;box-sizing:border-box;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;padding-right:8px;padding-left:8px;padding-top:24px;padding-bottom:8px;}/*!sc*/ 83@media (min-width:768px){.iOuSTG{-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%;padding-bottom:48px;}}/*!sc*/ 84data-styled.g173[id="Feature__InnerFeature-sc-17n9iec-0"]{content:"iOuSTG,"}/*!sc*/ 85.khtaTT{margin:16px 0;font-size:16px;font-weight:500;border-left:1px solid;border-color:#fb923c;margin-left:-9px;padding-left:9px;}/*!sc*/ 86data-styled.g174[id="Feature__FeatureTitle-sc-17n9iec-1"]{content:"khtaTT,"}/*!sc*/ 87.ctLxqT{color:var(--xstyled-colors-on-background-light,#3f3f46);font-size:15px;text-align:justify;margin:24px 0;}/*!sc*/ 88data-styled.g175[id="Feature__FeatureText-sc-17n9iec-2"]{content:"ctLxqT,"}/*!sc*/ 89.frczFL{font-size:38px;font-weight:600;line-height:1.2;-webkit-letter-spacing:-1.12px;-moz-letter-spacing:-1.12px;-ms-letter-spacing:-1.12px;letter-spacing:-1.12px;margin:0 0 8px;}/*!sc*/ 90@media (min-width:768px){.frczFL{padding-top:24px;font-size:48px;}}/*!sc*/ 91@media (min-width:1280px){.frczFL{font-size:60px;}}/*!sc*/ 92data-styled.g177[id="Hero__HeroTitle-sc-18tbum5-0"]{content:"frczFL,"}/*!sc*/ 93.eCKLki{font-size:18px;margin:16px 0;}/*!sc*/ 94@media (min-width:768px){.eCKLki{font-size:20px;}}/*!sc*/ 95@media (min-width:1280px){.eCKLki{font-size:24px;}}/*!sc*/ 96data-styled.g178[id="Hero__HeroTeaser-sc-18tbum5-1"]{content:"eCKLki,"}/*!sc*/ 97.krfIOu{background-repeat:no-repeat;background-position:top -5% center;background-size:100% auto;padding-top:65%;text-align:center;}/*!sc*/ 98@media (min-width:768px){.krfIOu{padding-top:0;margin-top:48px;background-position:center right;background-size:58% auto;min-height:400px;text-align:left;}}/*!sc*/ 99@media (min-width:1280px){.krfIOu{margin-top:96px;}}/*!sc*/ 100data-styled.g179[id="Hero__InnerHero-sc-18tbum5-2"]{content:"krfIOu,"}/*!sc*/ 101.fCsuTC{overflow:hidden;padding-top:8px;padding-bottom:48px;}/*!sc*/ 102data-styled.g180[id="Hero__HeroSection-sc-18tbum5-3"]{content:"fCsuTC,"}/*!sc*/ 103{/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */}/*!sc*/ 104*,::after,::before{box-sizing:border-box;}/*!sc*/ 105:root{-moz-tab-size:4;tab-size:4;}/*!sc*/ 106html{line-height:1.15;-webkit-text-size-adjust:100%;}/*!sc*/ 107body{margin:0;}/*!sc*/ 108body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';}/*!sc*/ 109hr{height:0;color:inherit;}/*!sc*/ 110abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/*!sc*/ 111b,strong{font-weight:bolder;}/*!sc*/
112code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em;}/*!sc*/ 113small{font-size:80%;}/*!sc*/ 114sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}/*!sc*/ 115sub{bottom:-.25em;}/*!sc*/ 116sup{top:-.5em;}/*!sc*/ 117table{text-indent:0;border-color:inherit;}/*!sc*/ 118button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/*!sc*/ 119button,select{text-transform:none;}/*!sc*/ 120[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}/*!sc*/ 121::-moz-focus-inner{border-style:none;padding:0;}/*!sc*/ 122:-moz-focusring{outline:1px dotted ButtonText;}/*!sc*/ 123:-moz-ui-invalid{box-shadow:none;}/*!sc*/ 124legend{padding:0;}/*!sc*/ 125progress{vertical-align:baseline;}/*!sc*/ 126::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto;}/*!sc*/ 127[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}/*!sc*/ 128::-webkit-search-decoration{-webkit-appearance:none;}/*!sc*/ 129::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}/*!sc*/ 130summary{display:list-item;}/*!sc*/
131[role=button],button{cursor:pointer;}/*!sc*/ 132blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}/*!sc*/ 133h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}/*!sc*/ 134ol,ul{list-style:none;margin:0;padding:0;}/*!sc*/ 135img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}/*!sc*/ 136*,::before,::after{border-width:0;border-style:solid;border-color:currentColor;}/*!sc*/ 137*{--x-ring-color:rgba(59,130,246,0.5);}/*!sc*/ 138button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color;}/*!sc*/ 139@-webkit-keyframes x-spin{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}/*!sc*/ 140@keyframes x-spin{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}/*!sc*/ 141@-webkit-keyframes x-ping{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}/*!sc*/ 142@keyframes x-ping{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}/*!sc*/ 143@-webkit-keyframes x-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}/*!sc*/ 144@keyframes x-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}/*!sc*/ 145@-webkit-keyframes x-bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}/*!sc*/ 146@keyframes x-bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}/*!sc*/ 147data-styled.g181[id="sc-global-iEDSUG2"]{content:"sc-global-iEDSUG2,"}/*!sc*/ 148html,body{-webkit-transition:300ms ease-in color,300ms ease-in background-color;transition:300ms ease-in color,300ms ease-in background-color;margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--xstyled-colors-background,#ffffff);color:var(--xstyled-colors-on-background,#000000);line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}/*!sc*/ 149:focus{outline-color:#f97316;}/*!sc*/ 150data-styled.g182[id="sc-global-iEDSUG3"]{content:"sc-global-iEDSUG3,"}/*!sc*/ 151</style><style type="text/css"> 152 .anchor.before { 153 position: absolute; 154 top: 0; 155 left: 0; 156 transform: translateX(-100%); 157 padding-right: 4px; 158 } 159 .anchor.after { 160 display: inline-block; 161 padding-left: 4px; 162 } 163 h1 .anchor svg, 164 h2 .anchor svg, 165 h3 .anchor svg, 166 h4 .anchor svg, 167 h5 .anchor svg, 168 h6 .anchor svg { 169 visibility: hidden; 170 } 171 h1:hover .anchor svg, 172 h2:hover .anchor svg, 173 h3:hover .anchor svg, 174 h4:hover .anchor svg, 175 h5:hover .anchor svg, 176 h6:hover .anchor svg, 177 h1 .anchor:focus svg, 178 h2 .anchor:focus svg, 179 h3 .anchor:focus svg, 180 h4 .anchor:focus svg, 181 h5 .anchor:focus svg, 182 h6 .anchor:focus svg { 183 visibility: visible; 184 } 185 </style>
185<script> 186 document.addEventListener("DOMContentLoaded", function(event) { 187 var hash = window.decodeURI(location.hash.replace('#', '')) 188 if (hash !== '') { 189 var element = document.getElementById(hash) 190 if (element) { 191 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 192 var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 193 var offset = element.getBoundingClientRect().top + scrollTop - clientTop 194 // Wait for the browser to finish rendering before scrolling. 195 setTimeout((function() { 196 window.scrollTo(0, offset - 0) 197 }), 0) 198 } 199 } 200 }) 201 </script>
201<title data-react-helmet="true">SVGR - Transforms SVG into React Components. - SVGR</title><link rel="sitemap" type="application/xml" href="/sitemap/sitemap-index.xml"/><link rel="icon" href="/favicon-32x32.png?v=11f758d81dcf87f968f0ad195b151a4e" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=11f758d81dcf87f968f0ad195b151a4e"/><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://www.google-analytics.com"/></head><body>
201<script>(function() { try { 202 var mode = localStorage.getItem('xstyled-color-mode'); 203 if (mode) document.body.classList.add('xstyled-color-mode-' + mode); 204 } catch (e) {} })();</script>
204<div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="PageLayout__Container-sc-1dbknlt-2 hgzvAb"><div class="PageLayout__StickyHeader-sc-1dbknlt-0 cSWeuh"><header class="AppHeader__OuterHeader-sc-1h3vgiu-0 bbKdTH"><div class="ScreenContainer-sc-cql6od-0 GEtRI"><a href="#main" class="AppHeader__NavSkipLink-sc-1h3vgiu-1 chbMWU">Skip to content</a><div class="sc-cwSeag bbVuTt"><div class="sc-cwSeag eOAQEY"><a aria-current="page" class="Nav__InnerNavLink-sc-1gjftm8-1 eOUaRG" href="/"><img height="32" src="/static/409d9cc9bce72903206da6f71b8d3994/logo-nav-light.svg" alt="SVGR" class="sc-AHaJN gOZkoP"/></a></div><div class="sc-cwSeag dJEIZh"><div><button class="Input__InputGroup-sc-8fgpy5-1 kOPWjT"><div class="Input__InputGroupIcon-sc-8fgpy5-2 bzkvxx"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"></path></g></svg></div><input disabled="" type="search" placeholder="Search..." class="Input-sc-8fgpy5-0 kXpMXK"/><div class="sc-cwSeag bVBhKd"><kbd class="DocSearch__Kbd-sc-z4bwrs-0 jXKulL">â</kbd><kbd class="DocSearch__Kbd-sc-z4bwrs-0 jXKulL">K</kbd></div></button></div></div><nav class="Nav-sc-1gjftm8-0 iwPoGo"><ul class="sc-EJAja fJEFRw"><li class="Nav__NavListItem-sc-1gjftm8-2 kSzfVc"><a class="Nav__InnerNavLink-sc-1gjftm8-1 huMkvp" href="/playground/">Playground</a></li><li class="Nav__NavListItem-sc-1gjftm8-2 kSzfVc"><a class="Nav__InnerNavLink-sc-1gjftm8-1 huMkvp" href="/docs/">Docs</a></li><li class="Nav__NavListItem-sc-1gjftm8-2 kSzfVc"><a href="https://github.com/gregberge/svgr" target="_blank" rel="noopener noreferrer" class="Nav__InnerNavLink-sc-1gjftm8-1 huMkvp"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="width:24px;height:24px" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></g></svg></a></li><li class="Nav__NavListItem-sc-1gjftm8-2 kSzfVc"><button type="button" class="sc-bqWxrE Nav__InnerNavLink-sc-1gjftm8-1 huMkvp"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="width:24px;height:24px" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path fill-rule="nonzero" d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"></path></g></svg></button></li></ul></nav></div></div></header></div><main id="main" class="PageLayout__Main-sc-1dbknlt-1 iqFjRs"><section class="Hero__HeroSection-sc-18tbum5-3 fCsuTC"><div class="ScreenContainer-sc-cql6od-0 GEtRI"><div class="ScreenContainer-sc-cql6od-0 Hero__InnerHero-sc-18tbum5-2 jGAvcV krfIOu"><div class="sc-cwSeag cldefo"><h1 class="Hero__HeroTitle-sc-18tbum5-0 frczFL">Transform SVGs into React components</h1><p class="Hero__HeroTeaser-sc-18tbum5-1 eCKLki">A complete tool box to take advantage of using SVGs in your React applications.</p><div class="sc-cwSeag ZakAx"><div class="sc-cwSeag cLiaKc"><a data-command="" data-variant="primary" class="Button__InnerButton-sc-1qxez5q-0 kiWFIj" href="/docs/getting-started">Getting Started</a></div><div class="sc-cwSeag cLiaKc"><a data-command="" data-variant="neutral" href="https://github.com/gregberge/svgr" class="Button__InnerButton-sc-1qxez5q-0 kiWFIj">Browse GitHub</a></div></div></div></div></div></section><section class="sc-bWOGAC cItLhx"><div class="ScreenContainer-sc-cql6od-0 cGEWLO"><div class="Feature__InnerFeature-sc-17n9iec-0 iOuSTG"><h2 class="Feature__FeatureTitle-sc-17n9iec-1 khtaTT">Powerful</h2><p class="Feature__FeatureText-sc-17n9iec-2 ctLxqT">SVGR handles all type of SVG and transforms it into a React component.</p></div><div class="Feature__InnerFeature-sc-17n9iec-0 iOuSTG"><h2 class="Feature__FeatureTitle-sc-17n9iec-1 khtaTT">Universal</h2><p class="Feature__FeatureText-sc-17n9iec-2 ctLxqT">SVGR is everywhere. Available online, in CLI, Node.js, as a webpack plugin... The list is long.</p></div><div class="Feature__InnerFeature-sc-17n9iec-0 iOuSTG"><h2 class="Feature__FeatureTitle-sc-17n9iec-1 khtaTT">Customizable</h2><p class="Feature__FeatureText-sc-17n9iec-2 ctLxqT">SVGR is entirely configurable. Use built-in settings or create your own plugin for advanced use-cases.</p></div><div class="Feature__InnerFeature-sc-17n9iec-0 iOuSTG"><h2 class="Feature__FeatureTitle-sc-17n9iec-1 khtaTT">Used by everyone</h2><p class="Feature__FeatureText-sc-17n9iec-2 ctLxqT">SVGR is literally everywhere. WordPress, Next.js, Create React App. You probably already use SVGR in your project.</p></div></div></section></main></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;
204border:0" aria-live="assertive" aria-atomic="true"></div></div>
204<script> 205 206 207 if(true) { 208 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 209 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 210 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 211 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 212 } 213 if (typeof ga === "function") { 214 ga('create', 'UA-154496255-2', 'auto', {}); 215 216 217 218 219 220 }</script>
220<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";window.___webpackCompilationHash="909b97865851c86ac5bc";/*]]>*/</script>
220<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-1351e861e7d7b6245c3d.js"],"app":["/app-4d8cb5ebe3600af22650.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-cli-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-cli-mdx-45d412f0d4b44428481b.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-configuration-files-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-configuration-files-mdx-30d5f0c6c91c77ac00dc.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-custom-templates-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-custom-templates-mdx-97d1e966a68b474ce036.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-custom-transformations-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-custom-transformations-mdx-4b40d9bbaaf8fdd71208.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-ecosystem-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-ecosystem-mdx-3a561ac2d105c9cd8a99.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-getting-started-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-getting-started-mdx-aa6c111f1dc65e616e00.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-jest-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-jest-mdx-9ed3369f0f05ca3c27a3.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-migrate-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-migrate-mdx-bcc42a6dd2902269b5cb.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-mocha-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-mocha-mdx-5e525205613424ff5097.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-next-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-next-mdx-f2834427658dc024e1f7.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-node-api-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-node-api-mdx-e87adbe687d4da943e4f.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-options-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-options-mdx-2f34c8d11137f0f6716e.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-parcel-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-parcel-mdx-71c662729cc3cfcd51e8.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-remix-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-remix-mdx-64b4f7388fc4a32cf5b4.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-rollup-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-rollup-mdx-cec907ab865da7dd2b14.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-supporting-svgr-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-supporting-svgr-mdx-6b38447ecabad6d5dbc8.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-webpack-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-webpack-mdx-1f565d6c32f8
22001ee2909.js"],"component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-what-is-svgr-mdx":["/component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-what-is-svgr-mdx-5f3e5d127d1f921e8fe4.js"],"component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-node-modules-smooth-doc-pages-404-mdx":["/component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-node-modules-smooth-doc-pages-404-mdx-65a7b56ec8baff0b1eaa.js"],"component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-pages-index-mdx":["/component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-pages-index-mdx-a601d9207740f0cf2c60.js"],"component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-pages-playground-mdx":["/component---node-modules-smooth-doc-src-templates-page-js-content-file-path-opt-build-repo-website-pages-playground-mdx-f8aa4377378aca4efb66.js"]};/*]]>*/</script>
220<script src="/polyfill-1351e861e7d7b6245c3d.js" nomodule=""></script>
220<script src="/app-4d8cb5ebe3600af22650.js" async=""></script>
220<script src="/f0e45107-38f7a1307772ea7422a4.js" async=""></script>
220<script src="/78e521c3-f4f0dfacacd601757268.js" async=""></script>
220<script src="/17007de1-f157a30b65e6dba5e449.js" async=""></script>
220<script src="/framework-5dc14f577513e2c09922.js" async=""></script>
220<script src="/webpack-runtime-e9b4d1164e04f6d871e6.js" async=""></script>
220</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.