https://react-svgr.com/component---node-modules-smooth-doc-src-tem…es-docs-options-mdx-2f34c8d11137f0f6716e.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[150],{82268:function(e,t,l){l.r(t),l.d(t,{default:function(){return o}});var n=l(67294),r=l(39626);function a(e){var t=Object.assign({h1:"h1",a:"a",div:"div",p:"p",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code",ul:"ul",li:"li",blockquote:"blockquote",strong:"strong",h3:"h3",h4:"h4"},(0,r.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"options",style:{position:"relative"}},n.createElement(t.a,{href:"#options","aria-label":"options permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Options"),"\n",n.createElement(t.p,null,"SVGR ships with a handful of customizable options, usable in both the CLI and\nAPI."),"\n",n.createElement("carbon-ad"),"\n",n.createElement(t.h2,{id:"config-file",style:{position:"relative"}},n.createElement(t.a,{href:"#config-file","aria-label":"config file permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Config file"),"\n",n.createElement(t.p,null,"Specify a custom config file."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"null")),n.createElement(t.td,null,n.createElement(t.code,null,"--config-file")),n.createElement(t.td,null,n.createElement(t.code,null,"configFile: string"))))),"\n",n.createElement(t.h2,{id:"runtime-config",style:{position:"relative"}},n.createElement(t.a,{href:"#runtime-config","aria-label":"runtime config permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Runtime config"),"\n",n.createElement(t.p,null,"Disable runtime config (",n.createElement(t.code,null,".svgrrc"),", ",n.createElement(t.code,null,".svgo.yml"),", ",n.createElement(t.code,null,".prettierrc"),")."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"true")),n.createElement(t.td,null,n.createElement(t.code,null,"--no-runtime-config")),n.createElement(t.td,null,n.createElement(t.code,null,"runtimeConfig: boolean"))))),"\n",n.createElement(t.h2,{id:"jsx-runtime",style:{position:"relative"}},n.createElement(t.a,{href:"#jsx-runtime","aria-label":"jsx runtime permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"JSX runtime"),"\n",n.createElement(t.p,null,"Specify a JSX runtime to use."),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,'"classic": adds ',n.createElement(t.code,null,"import * as React from 'react'")," on the top of file"),"\n",n.createElement(t.li,null,'"automatic": do not add anything'),"\n",n.createElement(t.li,null,'"classic-preact": adds ',n.createElement(t.code,null,"import { h } from 'preact'")," on the top of file"),"\n"),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"classic")),n.createElement(t.td,null,n.createElement(t.code,null,"--jsx-runtime")),n.createElement(t.td,null,n.createElement(t.code,null,"jsxRuntime: 'classic' | 'automatic' | 'classic-preact'"))))),"\n",n.createElement(t.h2,{id:"jsx-runtime-import-source",style:{position:"relative"}},n.createElement(t.a,{href:"#jsx-runtime-import-source","aria-label":"jsx runtime import source permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"JSX runtime import source"),"\n",n.createElement(t.p,null,"Specify a custom JSX runtime source to use. Allows to customize the import added at the top of generated file."),"\n",n.createElement(t.p,null,"Example: ",n.createElement(t.code,null,"jsxRuntimeImport: { source: 'preact', specifiers: ['h'] }"),' for "classic-preact" equivalent.'),"\n",n.createElement(t.p,null,"To use the default import instead of a list of names, you can use ",n.createElement(t.code,null,"defaultSpecifier"),", for example to use svgr with ",n.createElement(t.code,null,"hyperapp-jsx-pragma"),", you can specify ",n.createElement(t.code,null,"jsxRuntimeImport: { source: 'hyperapp-jsx-pragma', defaultSpecifier: 'h' }")," to get an end result of ",n.createElement(t.code,null,'import h from "hyperapp-jsx-pragma";')),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"null")),n.createElement(t.td,null,"-"),n.createElement(t.td,null,n.createElement(t.code,null,"jsxRuntimeImport: { source: string, specifiers: string[], defaultSpecifier: string }"))))),"\n",n.createElement(t.h2,{id:"icon",style:{position:"relative"}},n.createElement(t.a,{href:"#icon","aria-label":"icon permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Icon"),"\n",n.createElement(t.p,null,"Replace SVG ",n.createElement(t.code,null,"width")," and ",n.createElement(t.code,null,"height")," by a custom value. If value is omitted, it uses ",n.createElement(t.code,null,"1em")," in order to make SVG size inherits from text size."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--icon [value]")),n.createElement(t.td,null,n.createElement(t.code,null,"icon: boolean | string | number"))))),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"If you use ",n.createElement(t.code,null,"--icon")," without any argument, be careful of separating files from arguments using ",n.createElement(t.code,null,"--"),", ex: ",n.createElement(t.code,null,"svgr --icon -- assets/svg")),"\n"),"\n",n.createElement(t.h2,{id:"native",style:{position:"relative"}}

1,n.createElement(t.a,{href:"#native","aria-label":"native permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Native"),"\n",n.createElement(t.p,null,"Modify all SVG nodes with uppercase and use a specific template with\n",n.createElement(t.a,{href:"https://github.com/react-native-community/react-native-svg"},n.createElement(t.code,null,"react-native-svg"))," imports. ",n.createElement(t.strong,null,"All unsupported nodes will be removed.")),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--native")),n.createElement(t.td,null,n.createElement(t.code,null,"native: boolean"))))),"\n",n.createElement(t.h2,{id:"typescript",style:{position:"relative"}},n.createElement(t.a,{href:"#typescript","aria-label":"typescript permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"TypeScript"),"\n",n.createElement(t.p,null,"Generates ",n.createElement(t.code,null,".tsx")," files with ",n.createElement(t.a,{href:"https://www.typescriptlang.org/"},"TypeScript")," typings."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--typescript")),n.createElement(t.td,null,n.createElement(t.code,null,"typescript: boolean"))))),"\n",n.createElement(t.h2,{id:"dimensions",style:{position:"relative"}},n.createElement(t.a,{href:"#dimensions","aria-label":"dimensions permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Dimensions"),"\n",n.createElement(t.p,null,"Keep ",n.createElement(t.code,null,"width")," and ",n.createElement(t.code,null,"height")," attributes from the root SVG tag."),"\n",n.createElement(t.p,null,"Removal is guaranteed if ",n.createElement(t.code,null,"dimensions: false"),", unlike the ",n.createElement(t.code,null,"removeDimensions: true")," SVGO plugin option which also generates a ",n.createElement(t.code,null,"viewBox")," from the dimensions if no ",n.createElement(t.code,null,"viewBox")," is present."),"\n",n.createElement(t.p,null,

1n.createElement(t.strong,null,"NOTE:")),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Any SVGO processing will occur prior to this removal."),"\n",n.createElement(t.li,null,"When removing dimensions, SVGO will be configured not to remove the ",n.createElement(t.code,null,"viewBox")," if one is present. You can override this behaviour via your own config."),"\n"),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"true")),n.createElement(t.td,null,n.createElement(t.code,null,"--no-dimensions")),n.createElement(t.td,null,n.createElement(t.code,null,"dimensions: boolean"))))),"\n",n.createElement(t.h2,{id:"expand-props",style:{position:"relative"}},n.createElement(t.a,{href:"#expand-props","aria-label":"expand props permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Expand props"),"\n",n.createElement(t.p,null,"All properties given to component will be forwarded on SVG tag. Possible values: ",n.createElement(t.code,null,'"start"'),", ",n.createElement(t.code,null,'"end"')," or ",n.createElement(t.code,null,"false")," (",n.createElement(t.code,null,'"none"')," in CLI)."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"end")),n.createElement(t.td,null,n.createElement(t.code,null,"--expand-props")),n.createElement(t.td,null,n.createElement(t.code,null,"expandProps: string"))))),"\n",n.createElement(t.h2,{id:"prettier",style:{position:"relative"}},n.createElement(t.a,{href:"#prettier","aria-label":"prettier permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Prettier"),"\n",n.createElement(t.p,null,"Use ",n.createElement(t.a,{href:"https://github.com/prettier/prettier"},"Prettier")," to format JavaScript code\noutput."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"true")),n.createElement(t.td,null,n.createElement(t.code,null,"--no-prettier")),n.createElement(t.td,null,n.createElement(t.code,null,"prettier: boolean"))))),"\n",n.createElement(t.h2,{id:"prettier-config",style:{position:"relative"}},n.createElement(t.a,{href:"#prettier-config","aria-label":"prettier config permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Prettier config"),"\n",n.createElement(t.p,null,"Specify Prettier config. ",n.createElement(t.a,{href:"https://prettier.io/docs/en/options.html"},"See Prettier options"),"."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"null")),n.createElement(t.td,null,n.createElement(t.code,null,"--prettier-config")),n.createElement(t.td,null,n.createElement(t.code,null,"prettierConfig: PrettierConfig"))))),"\n",n.createElement(t.h2,{id:"svgo",style:{position:"relative"}},n.createElement(t.a,{href:"#svgo","aria-label":"svgo permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"SVGO"),"\n",n.createElement(t.p,null,"Use ",n.createElement(t.a,{href:"https://github.com/svg/svgo/"},"SVGO")," to optimize SVG code before transforming it into a component."),"\n",n.createElement(t.p,null,n.createElement(t.strong,null,"NOTE:")," SVGR implicitly enables the ",n.createElement(t.a,{href:"https://github.com/svg/svgo/blob/master/plugins/prefixIds.js"},n.createElement(t.code,null,"prefixIds")," SVGO plugin")," which adds a prefix to values of ",n.createElement(t.code,null,"id")," and ",n.createElement(t.code,null,"class")," attributes to ",n.createElement(t.a,{href:"https://github.com/gregberge/svgr/issues/210"},"reduce the chance of collision issues"),"."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"true")),n.createElement(t.td,null,n.createElement(t.code,null,"--no-svgo")),n.createElement(t.td,null,n.createElement(t.code,null,"svgo: boolean"))))),"\n",n.createElement(t.h2,{id:"svgo-config",style:{position:"relative"}},n.createElement(t.a,{href:"#svgo-config","aria-label":"svgo config permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"SVGO config"),"\n",n.createElement(t.p,null,"Specify SVGO config. ",n.createElement(t.a,{href:"https://github.com/svg/svgo#configuration"},"See SVGO options"),"."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"null")),n.createElement(t.td,null,n.createElement(t.code,null,"--svgo-config")),n.createElement(t.td,null,n.createElement(t.code,null,"svgoConfig: SVGOConfig"))))),"\n",n.createElement(t.h2,{id:"ref",style:{position:"relative"}},n.createElement(t.a,{href:"#ref","aria-label":"ref permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Ref"),"\n",n.createElement(t.p,null,"Setting this to ",n.createElement(t.code,null,"true")," will forward ref to the root SVG tag."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--ref")),n.createElement(t.td,null,n.createElement(t.code,null,"ref: boolean"))))),"\n",n.createElement(t.h2,{id:"memo",style:{position:"relative"}},n.createElement(t.a,{href:"#memo","aria-label":"memo permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Memo"),"\n",n.createElement(t.p,null,"Setting this to ",n.createElement(t.code,null,"true")," will wrap the exported component in ",n.createElement(t.a,{href:"https://react.dev/reference/react/memo"},n.createElement(t.code,null,"React.memo")),"."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--memo")),n.createElement(t.td,null,n.createElement(t.code,null,"memo: boolean"))))),"\n",n.createElement(t.h2,{id:"replace-attribute-value",style:{position:"relative"}},n.createElement(t.a,{href:"#replace-attribute-value","aria-label":"replace attribute value permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Replace attribute value"),"\n",n.createElement(t.p,null,'Replace an attribute value by an other. The main usage of this option is to change an icon color to "currentColor" in order to inherit from text color.'),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"[]")),n.createElement(t.td,null,n.createElement(t.code,null,"--replace-attr-values <old=new>")),n.createElement(t.td,null,n.createElement(t.code,null,"replaceAttrValues: { [key: string]: string }"))))),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"You can specify dynamic property using curly braces: ",n.createElement(t.code,null,"{ '#000': \"{props.color}\" }")," or ",n.createElement(t.code,null,"--replace-attr-values #000={props.color}"),". It is particularly useful with a custom template."),"\n"),"\n",n.createElement(t.h2,{id:"svg-props",style:{position:"relative"}},n.createElement(t.a,{href:"#svg-props","aria-label":"svg props permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"SVG props"),"\n",n.createElement(t.p,null,"Add props to the root SVG tag."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"[]")),n.createElement(t.td,null,n.createElement(t.code,null,"--svg-props <name=value>")),n.createElement(t.td,null,n.createElement(t.code,null,"svgProps: { [key: string]: string }"))))),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"You can specify dynamic property using curly braces: ",n.createElement(t.code,null,'{ focusable: "{true}" }')," or ",n.createElement(t.code,null,"--svg-props focusable={true}"),". It is particularly useful with a custom template."),"\n"),"\n",n.createElement(t.h3,{id:"accessibility",style:{position:"relative"}},n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Accessibility"),"\n",n.createElement(t.p,null,"SVGs by default have an implicit ",n.createElement(t.code,null,'role="graphics-document"'),". To make SVG content accessible you may want to override the default behavior which can be done via the ",n.createElement(t.code,null,"svgProps")," override."),"\n",n.createElement(t.h4,{id:"for-web",style:{position:"relative"}},n.createElement(t.a,{href:"#for-web","aria-label":"for web permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"For web:"),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"[]")),n.createElement(t.td,null,n.createElement(t.code,null,"--svg-props role=img")),n.createElement(t.td,null,n.createElement(t.code,null,"svgProps: { role: 'img' }"))))),"\n",n.createElement(t.h4,{id:"for-native",style:{position:"relative"}},n.createElement(t.a,{href:"#for-native","aria-label":"for native permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"For native:"),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"[]")),n.createElement(t.td,null,n.createElement(t.code,null,"--svg-props accessibilityRole=image")),n.createElement(t.td,null,n.createElement(t.code,null,"svgProps: { accessibilityRole: 'image' }"))))),"\n",n.createElement(t.p,null,"Typically for role=img you will want to add either ",n.createElement(t.code,null,"alt")," text or ",n.createElement(t.code,null,"aria")," label/description properties to describe the image when rendering the SVG in y

1our application."),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,n.createElement(t.strong,null,"NOTE"),": On the web once you add ",n.createElement(t.code,null,"role: 'img'")," some screen-readers will automatically announce any ",n.createElement(t.code,null,"title"),"/",n.createElement(t.code,null,"text"),"/",n.createElement(t.code,null,"desc")," nodes within your SVG."),"\n",n.createElement(t.p,null,"SVGO can be configured to remove those nodes via the built-in ",n.createElement(t.code,null,"removeDesc")," and ",n.createElement(t.code,null,"removeTitle")," plugins if you only want to use ",n.createElement(t.code,null,"aria")," properties during consumption of the SVGs."),"\n"),"\n",n.createElement(t.h2,{id:"title",style:{position:"relative"}},n.createElement(t.a,{href:"#title","aria-label":"title permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Title"),"\n",n.createElement(t.p,null,"Add title tag via title property. If titleProp is set to true and no title is provided (",n.createElement(t.code,null,"title={undefined}"),") at render time, this will fallback to an existing title element in the svg if exists."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--title-prop")),n.createElement(t.td,null,n.createElement(t.code,null,"titleProp: boolean"))))),"\n",n.createElement(t.h2,{id:"description",style:{position:"relative"}},n.createElement(t.a,{href:"#description","aria-label":"description permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Description"),"\n",n.createElement(t.p,null,"Add desc tag via desc property. If descProp is set to true and no description is provided (",n.createElement(t.code,null,"desc={undefined}"),") at render time, this will fallback to an existing desc element in the svg if exists."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--desc-prop")),n.createElement(t.td,null,n.createElement(t.code,null,"descProp: boolean"))))),"\n",n.createElement(t.h2,{id:"template",style:{position:"relative"}},n.createElement(t.a,{href:"#template","aria-label":"template permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Template"),"\n",n.createElement(t.p,null,"Specify a template file (CLI) or a template function (API) to use. For an example of template, see ",n.createElement(t.a,{href:"https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts"},"the default one"),"."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.a,{href:"https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts"},n.createElement(t.code,null,"basic template"))),n.createElement(t.td,null,n.createElement(t.code,null,"--template")),n.createElement(t.td,null,n.createElement(t.code,null,"template: <func>"))))),"\n",n.createElement(t.h2,{id:"output-directory",style:{position:"relative"}},n.createElement(t.a,{href:"#output-directory","aria-label":"output directory permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Output Directory"),"\n",n.createElement(t.p,null,"Output files into a directory."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"undefined")),n.createElement(t.td,null,n.createElement(t.code,null,"--out-dir <dirname>")),n.createElement(t.td,null,n.createElement(t.code,null,"outDir: string"))))),"\n",n.createElement(t.h2,{id:"indexjs-template",style:{position:"relative"}},n.createElement(t.a,{href:"#indexjs-template","aria-label":"indexjs template permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"index.js template"),"\n",n.createElement(t.p,null,"Specify a template function (API) to change default index.js output (when --out-dir is used)."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.a,{href:"https://github.com/gregberge/svgr/blob/main/packages/cli/src/dirCommand.ts"},n.createElement(t.code,null,"basic template"))),n.createElement(t.td,null,n.createElement(t.code,null,"--index-template")),n.createElement(t.td,null,n.createElement(t.code,null,"indexTemplate: <func>"))))),"\n",n.createElement(t.h2,{id:"indexjs-file",style:{position:"relative"}},n.createElement(t.a,{href:"#indexjs-file","aria-label":"indexjs file permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"index.js file"),"\n",n.createElement(t.p,null,"Disable index.js file generation"),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--no-index")),n.createElement(t.td,null,n.createElement(t.code,null,"index: boolean"))))),"\n",n.createElement(t.h2,{id:"ignore-existing",style:{position:"relative"}},n.createElement(t.a,{href:"#ignore-existing","aria-label":"ignore existing permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Ignore existing"),"\n",n.createElement(t.p,null,"When used with ",n.createElement(t.code,null,"--out-dir"),", it ignores already existing files."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"false")),n.createElement(t.td,null,n.createElement(t.code,null,"--ignore-existing")),n.createElement(t.td,null,"not available")))),"\n",n.createElement(t.h2,{id:"filename-case",style:{position:"relative"}},n.createElement(t.a,{href:"#filename-case","aria-label":"filename case permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Filename case"),"\n",n.createElement(t.p,null,"Specify a custom filename case. Possible values: ",n.createElement(t.code,null,"pascal")," for PascalCase, ",n.createElement(t.code,null,"kebab")," for kebab-case, ",n.createElement(t.code,null,"camel")," for camelCase, or ",n.createElement(t.code,null,"snake")," for snake_case."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"pascal")),n.createElement(t.td,null,n.createElement(t.code,null,"--filename-case")),n.createElement(t.td,null,n.createElement(t.code,null,"filenameCase: string"))))),"\n",n.createElement(t.h2,{id:"file-extension",style:{position:"relative"}},n.createElement(t.a,{href:"#file-extension","aria-label":"file extension permalink",className:"anchor before"},n.createElement(t.div,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"File extension"),"\n",n.createElement(t.p,null,"Specify a custom extension for generated files."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Default"),n.createElement(t.th,null,"CLI Override"),n.createElement(t.th,null,"API Override"))),n.createElement(t.tbody,null,

1n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,'"js"')),n.createElement(t.td,null,n.createElement(t.code,null,"--ext")),n.createElement(t.td,null,n.createElement(t.code,null,"ext: string"))))))}var c=function(e){void 0===e&&(e={});var t=Object.assign({},(0,r.ah)(),e.components).wrapper;return t?n.createElement(t,e,n.createElement(a,e)):a(e)};function i(e){return e.children}function o(e){return n.createElement(i,e,n.createElement(c,e))}}}]);
2//# sourceMappingURL=component---node-modules-smooth-doc-src-templates-doc-js-content-file-path-opt-build-repo-website-pages-docs-options-mdx-2f34c8d11137f0f6716e.js.map