Transform SVGs into React components 🦁
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.
[@svgr](https://github.com/svgr)/core (#555) (681303a)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;
[@svgr](https://github.com/svgr)/core (#555) (681303a)