Add new outputter 'output-components-as-svgstore'

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"
+    }
+}