Merge pull request #21 from marcomontalbano/output-components-as-svgs…

…tore

Output components as svgstore (SVG Sprites)

packages/output-components-as-svgstore/README.md

@@ -0,0 +1,34 @@
+# @figma-export/output-components-as-svgstore
+
+> Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports components in svg file (`SVG Sprites`).
+
+With this outputter you can export all components as `<symbol>` inside a `.svg` file named with the page name.
+
+This is a sample of the output:
+
+```sh
+$ tree output/
+# output/
+# ├── icons.svg
+# └── monochrome.svg
+```
+
+Probably you already know what <a target="_blank" rel="noopener noreferrer" href="https://css-tricks.com/css-sprites/">CSS Sprites</a> are, basically you can combine multiple images into a single image file and use it on a website.
+
+**SVG Sprites** are very similar, but use svg instead of png.
+
+You can read more on <a target="_blank" rel="noopener noreferrer" href="https://css-tricks.com/svg-sprites-use-better-icon-fonts/">Icon System with SVG Sprites</a> article where you can find how to use them.
+
+## Install
+
+Using npm:
+
+```sh
+npm install --save-dev @figma-export/output-components-as-svgstore
+```
+
+or using yarn:
+
+```sh
+yarn add @figma-export/output-components-as-svgstore --dev
+```

packages/output-components-as-svgstore/index.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+const makeDir = require('make-dir');
+const svgstore = require('svgstore');
+
+module.exports = ({
+    output,
+    iconPrefix = '',
+    options = {},
+}) => {
+    makeDir.sync(output);
+    return async (pages) => {
+        pages.forEach(({ name: pageName, components }) => {
+            const sprites = svgstore(options);
+
+            components.forEach(({ name: componentName, svg }) => {
+                sprites.add(`${iconPrefix}${pageName}-${componentName}`, svg);
+            });
+
+            const filePath = path.resolve(output, `${pageName}.svg`);
+            fs.writeFileSync(filePath, sprites);
+        });
+    };
+};

packages/output-components-as-svgstore/index.test.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+/* eslint-disable import/no-extraneous-dependencies */
+
+const { expect } = chai;
+
+const fs = require('fs');
+
+const figmaDocument = require('../core/lib/_config.test');
+const figma = require('../core/lib/figma');
+
+const outputter = require('./index');
+
+describe('outputter as svgstore', () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+
+    it('should create an svg with the page name as filename', async () => {
+        const writeFileSync = sinon.stub(fs, 'writeFileSync');
+        const pages = figma.getPages({ children: [figmaDocument.page1] });
+
+        await outputter({
+            output: 'output',
+        })(pages);
+
+        expect(writeFileSync).to.be.calledOnce;
+        expect(writeFileSync).to.be.calledWithMatch('output/page1.svg');
+    });
+});

packages/output-components-as-svgstore/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@figma-export/output-components-as-svgstore",
+    "version": "1.0.0",
+    "description": "Outputter for @figma-export that exports components in svg file ( SVG Sprites )",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/marcomontalbano/figma-exporter.git",
+        "directory": "packages/output-components-as-svgstore"
+    },
+    "author": "Marco Montalbano <me@marcomontalbano.com>",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "make-dir": "~3.0.0",
+        "svgstore": "~3.0.0-2"
+    }
+}

packages/website/.babelrc

@@ -0,0 +1,10 @@
+{
+    "plugins": [
+        ["@babel/plugin-transform-react-jsx", { "pragma":"h", "jsxPragma": "h" }],
+        ["babel-plugin-jsx-pragmatic", {
+            "module": "preact",
+            "import": "h",
+            "export": "h"
+        }]
+    ]
+}

packages/website/.figmaexportrc.js

@@ -25,16 +25,18 @@ module.exports = {
                     output: './output/es6-dataurl',
                     useDataUrl: true,
                 }),
-                // require('../output-components-as-svgstore')({
-                //     output: './output/svgstore',
-                // }),
-                // require('../output-components-as-svgstore')({
-                //     output: './output/svgstore-monochrome',
-                //     options: {
-                //         prefix: 'monochrome-',
-                //         cleanSymbols: ['fill']
-                //     }
-                // }),
+
+                require('../output-components-as-svgstore')({
+                    output: './output/svgstore',
+                }),
+
+                require('../output-components-as-svgstore')({
+                    output: './output/svgstore-monochrome',
+                    iconPrefix: 'unfilled-',
+                    options: {
+                        cleanSymbols: ['fill']
+                    }
+                }),
             ]
         }]
     ]