search

gregberge / svgr

Transform SVGs into React components 🦁
https://react-svgr.com
MIT License
10.58k stars 421 forks source link

How to use jsx elements in template #956

Open shivanand-harness opened 6 months ago

shivanand-harness commented 6 months ago

💬 Questions and Help

I want to wrap all my svg elements with span element and pass some props to span element. is there any way.

I was trying to do with custom template

cmd:

npx @svgr/cli -- src/zoom-in.svg

template.js

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

  ${variables.interfaces};

  const ${variables.componentName} = (${variables.props}) => (
    <span>${variables.jsx}</span>
  );

  ${variables.exports};
  `
}

module.exports = template

.svgrrc.js

// .svgrrc.js
module.exports = {
  template: require('./template')
}

error

/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:435
    throw error;
    ^

ReferenceError: /Users/testUser/core/packages/icons/src/zoom-in.svg: unknown node of type undefined with constructor "String"
    at Printer.print (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:320:13)
    at Printer.printJoin (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:422:12)
    at Printer.printSequence (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:498:10)
    at Printer.Program (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/generators/base.js:34:8)
    at Printer.exactSource (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:162:7)
    at Printer.print (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:351:10)
    at Printer.File (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/generators/base.js:17:8)
    at Printer.exactSource (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:162:7)
    at Printer.print (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:351:10)
    at Printer.generate (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/printer.js:47:10)
    at generate (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/generator/lib/index.js:86:18)
    at generateCode (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/core/lib/transformation/file/generate.js:47:39)
    at run (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/core/lib/transformation/index.js:39:33)
    at run.next (<anonymous>)
    at /Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/core/lib/transform-ast.js:23:33
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/gensync/index.js:251:28)
    at sync (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at Object.transformFromAstSync (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@babel/core/lib/transform-ast.js:43:83)
    at jsxPlugin (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/plugin-jsx/dist/index.js:77:23)
    at run (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/core/dist/index.js:174:16)
    at AsyncFunction.transform.sync (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/core/dist/index.js:184:10)
    at convert (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:70:25)
    at convertFile (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:79:10)
    at async fileCommand (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:135:18)
    at async run (/Users/testUser/.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:431:3) {
  code: 'BABEL_GENERATE_ERROR'
}
VietNguyenQuoc commented 3 months ago

Wrap the jsx around a pair of curly bracket like this. The caveat is the output jsx will contain that redundant bracket.

const ${variables.componentName} = (${variables.props}) => (
    <span>{${variables.jsx}}</span>
  );

Ref: https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/index.test.ts#L239-L249