Skip to content
Permalink
Browse files

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

…tore

Output components as svgstore (SVG Sprites)
  • Loading branch information
marcomontalbano committed Dec 2, 2019
2 parents 96a1fa4 + 0bc410d commit 76c748edb832b1d76eecea428e3faa9ede8d9297
@@ -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,0 +1,10 @@
{
"plugins": [
["@babel/plugin-transform-react-jsx", { "pragma":"h", "jsxPragma": "h" }],
["babel-plugin-jsx-pragmatic", {
"module": "preact",
"import": "h",
"export": "h"
}]
]
}
@@ -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']
}
}),
]
}]
]

0 comments on commit 76c748e

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