feat(542): Add basic support for <img> tags

biome.json

@@ -60,7 +60,6 @@
 				"noExportedImports": "error",
 				"noHeadElement": "error",
 				"noHeadImportInDocument": "error",
-				"noImgElement": "error",
 				"noIrregularWhitespace": "error",
 				"noNestedTernary": "error",
 				"noOctalEscape": "error",

examples/index.ts

@@ -15,8 +15,9 @@ console.error = (...args) => {
 const main = async () => {
 	await import('./recharts-basic');
 	await import('./recharts-composed');
-	await import('./victory-basic');
 	await import('./recharts-gradient');
+	await import('./recharts-images');
+	await import('./victory-basic');
 
 	return console.debug('✅ /examples updated!');
 };

examples/recharts-images.tsx

@@ -0,0 +1,76 @@
+import { fileURLToPath } from 'node:url';
+import { Document, Page } from '@react-pdf/renderer';
+import ReactPDF from '@react-pdf/renderer';
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
+import ReactPDFChart from '../src';
+
+const data = [
+	{
+		name: 'Page A',
+		pv: 2400,
+		amt: 2400,
+	},
+	{
+		name: 'Page B',
+		pv: 1398,
+		amt: 2210,
+	},
+	{
+		name: 'Page C',
+		pv: 9800,
+		amt: 2290,
+	},
+	{
+		name: 'Page D',
+		pv: 3908,
+		amt: 2000,
+	},
+	{
+		name: 'Page E',
+		pv: 4800,
+		amt: 2181,
+	},
+	{
+		name: 'Page F',
+		pv: 3800,
+		amt: 2500,
+	},
+	{
+		name: 'Page G',
+		pv: 4300,
+		amt: 2100,
+	},
+];
+
+const MyDocument = () => (
+	<Document>
+		<Page size='A4' style={{ padding: 20 }}>
+			<ReactPDFChart>
+				<div>
+					<LineChart data={data} height={300} width={500}>
+						<XAxis dataKey='name' />
+						<YAxis />
+						<CartesianGrid stroke='#eee' strokeDasharray='5' />
+						<Line dataKey='pv' stroke='#8884d8' type='monotone' />
+					</LineChart>
+					<img
+						alt='Red Apple'
+						height='100'
+						src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/661px-Red_Apple.jpg'
+						style={{
+							border: '2px solid black',
+							right: 10,
+							position: 'absolute',
+							top: 10,
+						}}
+						width='100'
+					/>
+				</div>
+			</ReactPDFChart>
+		</Page>
+	</Document>
+);
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+ReactPDF.render(<MyDocument />, `${__dirname}/recharts-images.pdf`);

src/index.tsx

@@ -4,6 +4,7 @@ import {
 	Defs,
 	Ellipse,
 	G,
+	Image,
 	Line,
 	LinearGradient,
 	Path,
@@ -172,6 +173,22 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 					);
 				case 'g':
 					return <G {...baseProps}>{children}</G>;
+				case 'img':
+					return (
+						<Image
+							src={attribs.src}
+							style={getElementStyle(attribs, chartStyle, {
+								height: attribs.height,
+								width: attribs.width,
+							})}
+						/>
+					);
+				case 'li':
+					return (
+						<View {...baseProps} style={getElementStyle(attribs, chartStyle)}>
+							{children}
+						</View>
+					);
 				case 'line':
 					return (
 						<Line
@@ -185,12 +202,6 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							{children}
 						</Line>
 					);
-				case 'li':
-					return (
-						<View {...baseProps} style={getElementStyle(attribs, chartStyle)}>
-							{children}
-						</View>
-					);
 				case 'lineargradient':
 					return (
 						<LinearGradient
@@ -204,6 +215,9 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							{children}
 						</LinearGradient>
 					);
+				case 'link':
+					// Not supported in react-pdf. Rendering will be skipped.
+					return <></>;
 				case 'path':
 					return (
 						<Path

src/styling.ts

@@ -54,7 +54,19 @@ export const getElementStyle = (
 			const [rawKey, value] = styleString.split(':');
 			const key = rawKey.toLowerCase();
 
-			if (['backgroundColor', 'color', 'fill'].includes(key)) {
+			if (
+				[
+					'backgroundColor',
+					'border',
+					'bottom',
+					'color',
+					'left',
+					'fill',
+					'position',
+					'right',
+					'top',
+				].includes(key)
+			) {
 				style.push({ [key]: value });
 			} else if (key === 'font-size') {
 				style.push({ fontSize: convertUnits(value) });