Svgr: Improve Template Documentation

[rwieruch]

Hello everyone.

First of all thank you for all your great work on this library. It made my life dealing with SVGs in React applications so much easier over the last year.

I have seen that svgr v4 is already up and running. In my projects, where I make heavily use of the template feature, I am still on v2 and have a hard time to migrate it over to v4 where a Babel AST is required. Before it was simple with template literals to get the desired lines of code in between in the template, now I have to know how to construct Babel AST. Therefore, a couple of examples that enhance the template would be helpful in the documentation.

Example

For instance, I want to import a higher-order component to my template and make use of it for the export. I have done it with these lines of code in svgr2, but I have no clue how to do it with Babel AST.

let result = `import React from 'react';\n\n`;
result += `import withoutWhitespace from '../withoutWhitespace'\n\n`;

...

result += `export default withoutWhitespace(${state.componentName})`;
return result;

Any help on this would be appreciated!

[gregberge]

Hello @rwieruch, I could explain how to do it with Babel AST but I think you raise a point with your issue. In SVGR templating is too complicated, I will work on a way to support basic template using strings. I keep you up to date.

To solve your issue:

function template(
  { template },
  opts,
  { imports, componentName, props, jsx, exports }
) {
  return template.ast`${imports}
import withoutWhitespace from '../withoutWhitespace'
const ${componentName} = (${props}) => ${jsx}
export default withoutWhitespace(${componentName})
`
}

module.exports = template

[rwieruch]

Hi @neoziro Perfect! Your solution worked for my case where I had to apply a HOC and forwardRef:

function template(
  { template },
  opts,
  { imports, componentName, props, jsx, exports },
) {
  return template.ast`
    ${imports}

    import withoutWhitespace from '../withoutWhitespace'

    const ${componentName} = React.forwardRef((${props}, ref) => {
      props = { ...props, ref };

      return ${jsx}
    })

    export default withoutWhitespace(${componentName})
  `;
}

module.exports = template;

I thought it is enforced to create Babel ASTs or something, but I can still inline strings as before as you have suggested. Thanks for your help. Maybe the documentation should add your example that shows how to extend a template. From there it is simple for people to apply their own enhancements.

Thanks for working on this great library! My go-to solution for SVGs in React.

[gregberge]

@rwieruch forwardRef is supported out of the box with SVGR, you have a ref option, so you could rely on it but your template is fine!

[gregberge]

I migrate the website in this repository, if someone want to create a "Template" page in "Advanced" section it would be great!

[zicodeng]

Hi, if I want to wrap generated svg with a CustomComponent, how can I do that with new template?

Desired output:

const GithubLogo = props => (
  <CustomComponent {...props}>
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
      d="M10 0C4.476 0 0 4.59 0 10.254c0 4.53 2.865 8.372 6.84 9.728.5.095.682-.222.682-.494 0-.243-.009-.888-.014-1.743-2.782.62-3.369-1.375-3.369-1.375-.454-1.184-1.11-1.5-1.11-1.5-.908-.636.07-.623.07-.623 1.002.072 1.53 1.057 1.53 1.057.893 1.566 2.341 1.114 2.911.851.09-.662.35-1.114.635-1.37-2.22-.26-4.555-1.139-4.555-5.067 0-1.12.39-2.035 1.03-2.752-.104-.26-.447-1.302.097-2.713 0 0 .84-.276 2.75 1.05A9.378 9.378 0 0 1 10 4.958c.849.005 1.705.118 2.503.345 1.91-1.326 2.747-1.05 2.747-1.05.546 1.411.203 2.453.1 2.713.64.717 1.028 1.632 1.028 2.752 0 3.938-2.338 4.805-4.566 5.059.359.316.679.942.679 1.899 0 1.37-.013 2.476-.013 2.812 0 .274.18.594.688.493C17.137 18.622 20 14.782 20 10.254 20 4.59 15.523 0 10 0"
        fill="#3E75C3"
        fillRule="evenodd"
      />
    </svg>
  </CustomComponent>
)

Thanks!

export default GithubLogo

[zicodeng]

Currently I am using HOC to achieve this, but not sure this is a best approach

[gregberge]

If you look at the previous example the « jsx » tag correspond to the jsx svg part. So you can just replace it in your code and it will work. Be careful of turning off prop spreading etc...

You know the simplest way to create template is to try it! But don’t be afraid by Babel part, it is as easy as before. It just gives you super power if you know how to use it.

[simoneb]

I was trying to do the same as @zicodeng but I kept getting parser errors. Using React.createElement did the trick for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.