Skip to content
Permalink
Browse files

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

  • Loading branch information
marcomontalbano committed Dec 2, 2019
1 parent 96a1fa4 commit 81315ea0196b8900ebf3a27e4b36dbaec83149ec
@@ -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
```
@@ -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);
});
};
};
@@ -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');
});
});

Some generated files are not rendered by default. Learn more.

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

0 comments on commit 81315ea

Please sign in to comment.
You can’t perform that action at this time.