diff --git a/parsers/svg-to-jsx/svg-to-jsx.parser.ts b/parsers/svg-to-jsx/svg-to-jsx.parser.ts index 51f6d6e1..4b0fe2a6 100644 --- a/parsers/svg-to-jsx/svg-to-jsx.parser.ts +++ b/parsers/svg-to-jsx/svg-to-jsx.parser.ts @@ -60,6 +60,11 @@ function convertObjectToXMLString(xmlObject: ExpandObject) { function camelCaseAttribute(attrName: string) { attrName = attrName.toLowerCase(); + + if (attrName === 'viewbox') { + return '@viewBox' + } + // attribute for xmlBuilder must start with '@' return (attrName.startsWith('data-') || attrName.startsWith('aria-')) ? `@${attrName}` diff --git a/parsers/svg-to-jsx/svg-to-jsx.spec.ts b/parsers/svg-to-jsx/svg-to-jsx.spec.ts index 014e8301..f5d8f978 100644 --- a/parsers/svg-to-jsx/svg-to-jsx.spec.ts +++ b/parsers/svg-to-jsx/svg-to-jsx.spec.ts @@ -80,6 +80,7 @@ describe('Svg to jsx', () => { expect(result[0].value.content).toContain("strokeWidth") expect(result[0].value.content).toContain("strokeLinecap") expect(result[0].value.content).toContain("strokeLinejoin") + expect(result[0].value.content).toContain("viewBox") return; }); it('Validate camelCase on Style rules', async () => {