svgr

Bug Fixes

• cli: fix default dimensions, prettier & svgo (571d5c8)
• config: prefer cli config over rc config (#845) (8b97248)
• react-native: fix duplicate import (#894) (e612b6a)

Features

• esm: add support for svgo.config.cjs (#879) (ae91e2e)

Bug Fixes

• fix peer dependencies (2e05255)

Bug Fixes

• parseObject error causes website broken (05f2946)

Features

• types: change SVGProps from import to import type (#853) (095f021)
• add snake_case filename option (#857) (428b0c7)
• make index template more flexible (#861) (003009c)

BREAKING CHANGES

• index template now receives an array of objects containing both the created
  component path (path) and the original SVG path (originalPath)

Features

• allow specifying jsxRuntimeImport in config (86bb86f), closes #801 #801
• remove @svgr/plugin-jsx from core (a0f078d)
• upgrade to svgo v3 (#798) (21b6209)

BREAKING CHANGES

• plugin-jsx is no longer included by default in core
• svgr now requires Node.js v14+

Bug Fixes

• fix Yarn peer dependency warning from @babel/core (#786) (db35837), closes #785

Features

• babel-preset: fix 'role' attribute on svg element for react native (#787) (35d85e0)

Bug Fixes

• deps: add babel-preset to core dependencies (#782) (464ec5f)

Features

• a11y: add attribute role="img" to the svg element (#750) (8b9edc4)
• support spaces in file names (#779) (6ee639a)

Bug Fixes

• fix duplicate plugin/preset detected error (#747) (3c6a54c), closes #746
• fix exports compat with ESM (#749) (f3e304c)

Bug Fixes

• core: types field in package.json (#693) (a491ace)
• package.json: fix exports (#745) (2a368d1)

Features

• add descProp option (#729) (a0637d4)
• cli: output file name when error happen to handling a file (#702) (0ec1fbd)

Bug Fixes

• do not transform mask-type (#673) (6e58f2c), closes #643
• use .ts extension for generated index (#670) (d19abe2), closes #462

Bug Fixes

• cli: pass in parser to prettier format to avoid deprecation warning (#662) (74fa3ae)
• plugin-svgo: handle potential errors from optimize (#663) (7582d31)

Features

• support comments in templates (#661) (9afb590)

Bug Fixes

• specify valid peer deps (45a76ed)
• rollup: missing dep & missing map return (#652) (12627fc)

Bug Fixes

• webpack: fix double export (#648) (7595d37), closes #645

Bug Fixes

• fix previous export system (1872829), closes #635

Features

• native: automatically convert inline style in native (138c493), closes #588

Performance Improvements

• remove useless loader-utils package (387bc72), closes #631

SVGR v6 uses SVGO v2 under the hood and includes tons of improvement. It also contains small breaking changes. In most cases you will have nothing to change. But be sure to check the migration guide.

Bug Fixes

• fix XML entities in generated JavaScript (#553) (b3998eb)
• formatExportName for single names (#548) (5decc94)
• template: make it possible to use type in template (#619) (5966714), closes #556
• webpack: fix webpack 5 behaviour with url-loader (1a8cc98)

Features

• add option to explicitly use named export (#584) (f18ea80)
• add TypeScript declarations to [@svgr](https://github.com/svgr)/core (#555) (681303a)
• add webpack typescript preset configuration (#573) (16072d4)
• upgrade to svgo v2 (1f107af)
• typescript: types everything (#611) (1666432)
• add "index" option (#607) (4978610)
• cli: allow all CLI options in config (#615) (aa9feb2), closes #570
• support jsxRuntime (#613) (3700aba)
• support mask-type property (#621) (a857bb1), closes #336
• allow to specify icon size (3c0b779), closes #571
• support CSS variables (cbdb47f), closes #582

BREAKING CHANGES

• Config format of SVGO changes & SVGR does not merge SVGO config
• Template has a new format
• core: @svgr/core now exposes { transform } instead of default export
• using --icon as latest arg now requires "--"

Features

• allow to specify icon size (3c0b779), closes #571

BREAKING CHANGES

• using --icon as latest arg now requires "--"

Features

• cli: allow all CLI options in config (#615) (aa9feb2), closes #570
• support jsxRuntime (#613) (3700aba)

Bug Fixes

• template: make it possible to use type in template (#619) (5966714), closes #556
• webpack: fix webpack 5 behaviour with url-loader (1a8cc98)

Code Refactoring

• core: use exportName transform (#616) (9ea5da4)

Features

• support mask-type property (#621) (a857bb1), closes #336

BREAKING CHANGES

• core: @svgr/core now exposes { transform } instead of default export.

Bug Fixes

• formatExportName for single names (#548) (5decc94)

Features

• typescript: types everything (#611) (1666432)
• add "index" option (#607) (4978610)

BREAKING CHANGES

Templates

Template signature has changed, it is now much more simpler to create custom templates. Also you don't have to do anything specific to use TypeScript in your template. If you need some Babel specific things you have to import it by yourself.

v5.x

const template = (
  { template },
  opts,
  { imports, interfaces, componentName, props, jsx, exports }
) => {
  const plugins = ["jsx"];
  if (opts.typescript) {
    plugins.push("typescript");
  }
  const typeScriptTpl = template.smart({ plugins });
  return typeScriptTpl.ast`${imports}

${interfaces}

function ${componentName}(${props}) {
  return ${jsx};
}
${exports}
  `;
};

module.exports = template;

v6.x

const template = (variables, { tpl }) => {
  return tpl`
${variables.imports};

${variables.interfaces};

const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
);
 
${variables.exports};
`;
};

module.exports = template;

Bug Fixes

• fix XML entities in generated JavaScript (#553) (b3998eb)

Features

• add option to explicitly use named export (#584) (f18ea80)
• add TypeScript declarations to [@svgr](https://github.com/svgr)/core (#555) (681303a)
• add webpack typescript preset configuration (#573) (16072d4)
• upgrade to svgo v2 (1f107af)

BREAKING CHANGES

• config format of SVGO changes & SVGR does not merge SVGO config.