diff --git a/packages/html2react/src/libraries/__tests__/parse.tests.ts b/packages/html2react/src/libraries/__tests__/parse.tests.ts
index 26f68f152..5d9204105 100644
--- a/packages/html2react/src/libraries/__tests__/parse.tests.ts
+++ b/packages/html2react/src/libraries/__tests__/parse.tests.ts
@@ -26,4 +26,33 @@ describe("parse", () => {
expect((result[1].props as any).for).toBeUndefined();
expect(result[1].props.htmlFor).toBe("nothing");
});
+
+ test("maps from SVG attributes to react props", () => {
+ const resultOne = parse(
+ ''
+ ) as Element[];
+
+ expect((resultOne[0].props as any)["xmlns:xlink"]).toBeUndefined();
+ expect((resultOne[0].props as any).xmlnsXlink).toBe(
+ "https://www.w3.org/1999/xlink"
+ );
+
+ const resultTwo = parse(
+ ''
+ ) as Element[];
+
+ expect((resultTwo[0].props as any)["stroke-width"]).toBeUndefined();
+ expect((resultTwo[0].props as any).strokeWidth).toBe("1");
+ expect((resultTwo[0].props as any)["fill-rule"]).toBeUndefined();
+ expect((resultTwo[0].props as any).fillRule).toBe("evenodd");
+ });
+
+ test("should not map data attributes as SVG attributes", () => {
+ const result = parse(
+ '
'
+ ) as Element[];
+
+ expect((result[0].props as any)["data-src"]).toBe("https://frontity.org");
+ expect((result[0].props as any).dataSrc).toBeUndefined();
+ });
});
diff --git a/packages/html2react/src/libraries/parse/attributes/html.json b/packages/html2react/src/libraries/parse/attributes/html.json
index 0ace3d80a..d42e0e96c 100644
--- a/packages/html2react/src/libraries/parse/attributes/html.json
+++ b/packages/html2react/src/libraries/parse/attributes/html.json
@@ -39,5 +39,7 @@
"srcLang",
"srcSet",
"tabIndex",
- "useMap"
+ "useMap",
+ "acceptCharset",
+ "httpEquiv"
]
diff --git a/packages/html2react/src/libraries/parse/index.ts b/packages/html2react/src/libraries/parse/index.ts
index b6dc7cd48..4b4072c75 100644
--- a/packages/html2react/src/libraries/parse/index.ts
+++ b/packages/html2react/src/libraries/parse/index.ts
@@ -30,16 +30,14 @@ const adaptNode: AdaptNode = (himalayaNode, parent) => {
props.className = value;
} else if (key === "for") {
props.htmlFor = value;
- } else if (key === "accept-charset") {
- props["acceptCharset"] = value;
- } else if (key === "http-equiv") {
- props["httpEquiv"] = value;
-
- // Add inline styles to the component with `emotion`.
+ } else if (/^data-/.test(key)) {
+ props[key] = value;
} else if (key === "style") {
+ // Add inline styles to the component with `emotion`.
props.css = css(value);
} else if (!/^on/.test(key)) {
- const camelCaseKey = attributesMap[key.toLowerCase()];
+ const camelCaseKey =
+ attributesMap[key.replace(/[-:]/, "").toLowerCase()];
// Map keys with no value to `true` booleans.
props[camelCaseKey || key] = value === null ? true : value;
}