编译有问题: ./src/assets/bug.svg 中的错误

Question

ERROR in ./src/assets/bug.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React’s JSX doesn’t support namespace tags.

Answer 1

慕莱坞444667 2022-03-11 13:16:22

我也碰到这个问题，https://stackoverflow.com/questions/59820954/syntaxerror-unknown-namespace-tags-are-not-supported-by-default

解决方案： 把 bug.svg task.svg 用这个 链接 转换 https://www.svgminify.com/

对应生成新的 ，存下来。拷贝到 assets中，并且在  相应 的 img中加上样式，限制宽度！

如果 这个网站打不开： 直接拷贝 代码 

bug.svg

bugCreated with Sketch.

task.svg

taskCreated with Sketch.

设置相应样 截图如下，（应该可以解决！）

• 慕莱坞444667 #1

  新的task.svg 为：
  <?xml version="1.0" encoding="UTF-8"?>
  <svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <title>task</title>
      <desc>Created with Sketch.</desc>
      <g fill="none" fill-rule="evenodd">
          <g transform="translate(1 1)">
              <rect width="14" height="14" rx="2" fill="#4BADE8"/>
              <g transform="translate(4 4.5)" stroke="#fff" stroke-linecap="round" stroke-width="2">
                  <path d="m2 5 4-5"/>
                  <path d="m2 5-2-2"/>
              </g>
          </g>
      </g>
  </svg>
  
  新的 bug.svg 为：
  <?xml version="1.0" encoding="UTF-8"?>
  <svg version="1.1" viewBox="0 0 16 16" xlinkHref="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <title>bug</title>
  <desc>Created with Sketch.</desc>
  <g fill="none" fill-rule="evenodd">
  <g transform="translate(1 1)">
  <rect width="14" height="14" rx="2" fill="#E5493A"/>
  <path d="m10 7c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3" fill="#fff"/>
  </g>
  </g>
  </svg>

• mkzlog #2

  有用，多谢

Answer 2

weixin_慕尼黑0237200 2023-02-01 00:20:18

把skety:type这个类型的property改成sketchType驼峰类这样才能被JSX接受。