Closed
Description
🐛 Bug Report
Using a SVG created by Inkscape using its default Inkscape-extended SVG format with the inline SVG feature fails with SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
Have you read the Contributing Guidelines on issues?
Yes
To Reproduce
-
Create a SVG in Inkscape and save in the default SVG file format (I've attached one for reference)
-
Reference the SVG using the inline SVG syntax, for example:
import MyDrawing from './drawing.svg'; <MyDrawing />
Expected behavior
SVG is loaded and displayed correctly
Actual Behavior
Error is thrown during compilation:
./docs/drawing.svg
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
6 | ...props
7 | }) {
> 8 | return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="125.87715mm" height="122.36498mm" viewBox="0 0 125.87715 122.36498" id="svg868" inkscape:version="1.0.1 (c497b03c, 2020-09-10)" sodipodi:docname="\\\\.svg" aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs862" /><sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity={1} inkscape:pageopacity={0} inkscape:pageshadow={2} inkscape:zoom={0.5} inkscape:cx={422.21944} inkscape:cy={577.65834} inkscape:document-units="mm" inkscape:current-layer="layer1" inkscape:document-rotation={0} showgrid="false" lock-margins="true" fit-margin-top={20} fit-margin-left={20} fit-margin-right={20} fit-margin-bottom={20} inkscape:window-width={1252} inkscape:window-height={1174} inkscape:window-x={2240} inkscape:window-y={23} inkscape:window-maximized={0} /><metadata id="metadata865"><rdf:RDF><cc:Work rdf:about=""><dc:format>{"image/svg+xml"}</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(5.8788924,4.6721033)"><path sodipodi:type="star" style={{
| ^^^^^^^^
9 | fill: "#000000",
10 | fillOpacity: 0.05,
11 | stroke: "#000000",
@ ./docs/doc1.mdx 1:791-828 1:1806-1815
@ ./.docusaurus/registry.js
@ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
@ ./.docusaurus/routes.js
@ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
@ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js
Your Environment
- Docusaurus version used: 2.0.0-alpha.66
- Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 86.0.4240.183, Node 15.0.1
- Operating system and version (desktop or mobile): macOS 10.15.7 desktop
Reproducible Demo
Repo: https://github.com/charleskorn/docusaurus-svg-issue
Run yarn start or yarn build to see error.