Merge pull request #36 from mtlewis/svg-support

Add support for SVGs
schibsted · Apr 20, 2020 · bf858db · bf858db
2 parents feaf84c + 4654660
commit bf858db
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 2.2.0
+
+## New Features
+
+- SVGs are now supported
+
+## Other changes
+
+- All dependencies updated to latest version. No breaking changes affecting consumers.
+
 # 2.1.1
 
 - All dependencies updated to latest version. This means that we've switched from `babel-plugin-transform-react-jsx` to `@babel/plugin-transform-react-jsx` in our peerDependencies and documentation. While this means that if you're still using the old package you'll get a warning, both versions of the plugin should work just fine.

diff --git a/README.md b/README.md
@@ -432,6 +432,28 @@ const doc = (
 );
 ```
 
+### SVGs
+
+The `svg` tag can be used to render SVG images. The `width`, `height` and `fill` attributes can be used to control the size of the image as described in the [pdfmake docs](https://pdfmake.github.io/docs/document-definition-object/svgs/).
+
+```jsx
+import JsxPdf from 'jsx-pdf';
+
+const doc = (
+  <document>
+    <content>
+      <svg
+        content={`
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <circle fill="red" cx="50" cy="50" r="50"/>
+          </svg>
+        `}
+      />
+    </content>
+  </document>
+);
+```
+
 ## API
 
 ### renderPdf

diff --git a/example/components/templates/mydocument.js b/example/components/templates/mydocument.js
@@ -1,4 +1,5 @@
 import JsxPdf from '../../../dst';
+import PDFIcon from './pdf-icon';
 
 const baseMargin = 40;
 const headerHeight = 100;
@@ -45,6 +46,7 @@ export default ({ size, title }, context) => (
       sapien malesuada sed. Cras ac nisl felis. Donec laoreet mi eget eleifend
       pellentesque. Sed eget nisi eleifend, ullamcorper orci eget, eleifend
       felis. Donec gravida enim dapibus nibh sollicitudin euismod.
+      <PDFIcon width={150} alignment="center" margin={[0, 50, 0, 0]} />
     </content>
     <footer {...footerStyle}>
       {(page, count) =>

diff --git a/example/components/templates/pdf-icon.js b/example/components/templates/pdf-icon.js
@@ -0,0 +1,30 @@
+import JsxPdf from '../../../dst';
+
+const PDFIcon = (props) => (
+  <svg
+    content={`
+      <svg width="100" height="100" viewBox="0 0 550.801 550.801">
+        <path d="M160.381,282.225c0-14.832-10.299-23.684-28.474-23.684c-7.414,0-12.437,0.715-15.071,1.432V307.6
+          c3.114,0.707,6.942,0.949,12.192,0.949C148.419,308.549,160.381,298.74,160.381,282.225z"></path>
+        <path d="M272.875,259.019c-8.145,0-13.397,0.717-16.519,1.435v105.523c3.116,0.729,8.142,0.729,12.69,0.729
+          c33.017,0.231,54.554-17.946,54.554-56.474C323.842,276.719,304.215,259.019,272.875,259.019z"></path>
+        <path d="M488.426,197.019H475.2v-63.816c0-0.398-0.063-0.799-0.116-1.202c-0.021-2.534-0.827-5.023-2.562-6.995L366.325,3.694
+          c-0.032-0.031-0.063-0.042-0.085-0.076c-0.633-0.707-1.371-1.295-2.151-1.804c-0.231-0.155-0.464-0.285-0.706-0.419
+          c-0.676-0.369-1.393-0.675-2.131-0.896c-0.2-0.056-0.38-0.138-0.58-0.19C359.87,0.119,359.037,0,358.193,0H97.2
+          c-11.918,0-21.6,9.693-21.6,21.601v175.413H62.377c-17.049,0-30.873,13.818-30.873,30.873v160.545
+          c0,17.043,13.824,30.87,30.873,30.87h13.224V529.2c0,11.907,9.682,21.601,21.6,21.601h356.4c11.907,0,21.6-9.693,21.6-21.601
+          V419.302h13.226c17.044,0,30.871-13.827,30.871-30.87v-160.54C519.297,210.838,505.47,197.019,488.426,197.019z M97.2,21.605
+          h250.193v110.513c0,5.967,4.841,10.8,10.8,10.8h95.407v54.108H97.2V21.605z M362.359,309.023c0,30.876-11.243,52.165-26.82,65.333
+          c-16.971,14.117-42.82,20.814-74.396,20.814c-18.9,0-32.297-1.197-41.401-2.389V234.365c13.399-2.149,30.878-3.346,49.304-3.346
+          c30.612,0,50.478,5.508,66.039,17.226C351.828,260.69,362.359,280.547,362.359,309.023z M80.7,393.499V234.365
+          c11.241-1.904,27.042-3.346,49.296-3.346c22.491,0,38.527,4.308,49.291,12.928c10.292,8.131,17.215,21.534,17.215,37.328
+          c0,15.799-5.25,29.198-14.829,38.285c-12.442,11.728-30.865,16.996-52.407,16.996c-4.778,0-9.1-0.243-12.435-0.723v57.67H80.7
+          V393.499z M453.601,523.353H97.2V419.302h356.4V523.353z M484.898,262.127h-61.989v36.851h57.913v29.674h-57.913v64.848h-36.593
+          V232.216h98.582V262.127z"></path>
+      </svg>
+    `}
+    {...props}
+  />
+);
+
+export default PDFIcon;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsx-pdf",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "main": "dst/index.js",
   "description": "Generate modular PDFs using JSX.",
   "files": [
@@ -64,6 +64,6 @@
   },
   "peerDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.0.0",
-    "pdfmake": "^0.1.36"
+    "pdfmake": "^0.1.59"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -133,6 +133,8 @@ function resolveChildren(tag, parentContext, isTopLevel) {
       return { columns: resolvedChildren, ...attributes };
     case 'image':
       return { image: attributes.src, ...omit(attributes, 'src') };
+    case 'svg':
+      return { svg: attributes.content, ...omit(attributes, 'content') };
     case 'table':
       return {
         table: {

diff --git a/src/index.test.js b/src/index.test.js
@@ -764,6 +764,70 @@ describe('#jsx-pdf', () => {
       });
     });
 
+    describe('svg', () => {
+      it('should be converted', () => {
+        expect(
+          JsxPdf.renderPdf(
+            <document>
+              <content>
+                <svg
+                  content={`
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                      <circle fill="red" cx="50" cy="50" r="50"/>
+                    </svg>
+                  `}
+                />
+              </content>
+            </document>,
+          ),
+        ).toEqual({
+          content: {
+            stack: [
+              {
+                svg: `
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                      <circle fill="red" cx="50" cy="50" r="50"/>
+                    </svg>
+                  `,
+              },
+            ],
+          },
+        });
+      });
+
+      it('should set passed attributes', () => {
+        expect(
+          JsxPdf.renderPdf(
+            <document>
+              <content>
+                <svg
+                  content={`
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                      <circle fill="red" cx="50" cy="50" r="50"/>
+                    </svg>
+                  `}
+                  margin={[0, 40, 10, 30]}
+                />
+              </content>
+            </document>,
+          ),
+        ).toEqual({
+          content: {
+            stack: [
+              {
+                svg: `
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                      <circle fill="red" cx="50" cy="50" r="50"/>
+                    </svg>
+                  `,
+                margin: [0, 40, 10, 30],
+              },
+            ],
+          },
+        });
+      });
+    });
+
     describe('stack', () => {
       it('should be converted', () => {
         expect(

diff --git a/yarn.lock b/yarn.lock
@@ -1707,7 +1707,7 @@ braces@^3.0.1:
   dependencies:
     fill-range "^7.0.1"
 
-brfs@^1.3.0, brfs@^1.4.0:
+brfs@^1.4.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/brfs/-/brfs-1.6.1.tgz#b78ce2336d818e25eea04a0947cba6d4fb8849c3"
   integrity sha512-OfZpABRQQf+Xsmju8XE9bDjs+uU4vLREGolP7bDgcpsI17QREyZ4Bl+2KLxxx1kCgA0fAIhKQBaBYh+PEcCqYQ==
@@ -3045,7 +3045,7 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
   integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
 
-fontkit@^1.0.0, fontkit@^1.8.0:
+fontkit@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-1.8.0.tgz#deb9351619e90ddc91707b6156a9f14c8ab11554"
   integrity sha512-EFDRCca7khfQWYu1iFhsqeABpi87f03MBdkT93ZE6YhqCdMzb5Eojb6c4dlJikGv5liuhByyzA7ikpIPTSBWbQ==
@@ -3366,13 +3366,19 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-[email protected], iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+[email protected], iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.4.4:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 iconv-lite@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.1.tgz#b2425d3c7b18f7219f2ca663d103bddb91718d64"
@@ -4314,15 +4320,6 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-linebreak@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/linebreak/-/linebreak-0.3.0.tgz#0526480a62c05bd679f3e9d99830e09c6a7d0ed6"
-  integrity sha1-BSZICmLAW9Z58+nZmDDgnGp9DtY=
-  dependencies:
-    base64-js "0.0.8"
-    brfs "^1.3.0"
-    unicode-trie "^0.3.0"
-
 linebreak@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/linebreak/-/linebreak-1.0.2.tgz#4b5781733e9a9eb2849dba2f963e47c887f8aa06"
@@ -5081,17 +5078,7 @@ pdf2json@^1.2.0:
     optimist "^0.6.1"
     xmldom "^0.3.0"
 
-pdfkit@>=0.8.1:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.10.0.tgz#88f2aa8e3cf9e1cc2caff6447b68dd4e435cb284"
-  integrity sha512-mRJ6iuDzpIQ4ftKp5GvijLXNVRK86xjnyIPBraYSPrUPubNqWM5/oYmc7FZKUWz3wusRTj3PLR9HJ1X5ooqfsg==
-  dependencies:
-    crypto-js "^3.1.9-1"
-    fontkit "^1.0.0"
-    linebreak "^0.3.0"
-    png-js ">=0.1.0"
-
-pdfkit@^0.11.0:
+pdfkit@>=0.8.1, pdfkit@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.11.0.tgz#9cdb2fc42bd2913587fe3ddf48cc5bbb3c36f7de"
   integrity sha512-1s9gaumXkYxcVF1iRtSmLiISF2r4nHtsTgpwXiK8Swe+xwk/1pm8FJjYqN7L3x13NsWnGyUFntWcO8vfqq+wwA==
@@ -5171,11 +5158,6 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-png-js@>=0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/png-js/-/png-js-0.1.1.tgz#1cc7c212303acabe74263ec3ac78009580242d93"
-  integrity sha1-HMfCEjA6yr50Jj7DrHgAlYAkLZM=
-
 png-js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/png-js/-/png-js-1.0.0.tgz#e5484f1e8156996e383aceebb3789fd75df1874d"