Replace 'iconPrefix' with 'getIconId' (output-components-as-svgstore)

marcomontalbano · Jan 28, 2020 · b46db83 · b46db83
1 parent 8391b82
commit b46db83
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/output-components-as-svg/index.js b/packages/output-components-as-svg/index.js
@@ -9,9 +9,10 @@ module.exports = ({
 }) => {
     return async (pages) => {
         pages.forEach(({ name: pageName, components }) => {
-            components.forEach(({ svg, figmaExport }) => {
+            components.forEach(({ name: componentName, svg, figmaExport }) => {
                 const options = {
                     pageName,
+                    componentName,
                     ...figmaExport,
                 };
                 const filePath = makeDir.sync(path.resolve(output, getDirname(options)));

diff --git a/packages/output-components-as-svgstore/index.js b/packages/output-components-as-svgstore/index.js
@@ -5,16 +5,22 @@ const svgstore = require('svgstore');
 
 module.exports = ({
     output,
-    iconPrefix = '',
+    getIconId = (options) => `${options.pageName}/${options.componentName}`,
     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);
+            components.forEach(({ name: componentName, svg, figmaExport }) => {
+                const opts = {
+                    pageName,
+                    componentName,
+                    ...figmaExport,
+                };
+
+                sprites.add(getIconId(opts), svg);
             });
 
             const filePath = path.resolve(output, `${pageName}.svg`);

diff --git a/packages/output-components-as-svgstore/index.test.js b/packages/output-components-as-svgstore/index.test.js
@@ -25,5 +25,6 @@ describe('outputter as svgstore', () => {
 
         expect(writeFileSync).to.be.calledOnce;
         expect(writeFileSync).to.be.calledWithMatch('output/page1.svg');
+        expect(writeFileSync.getCall(0).args[1].toString()).to.be.contain('id="page1/Figma-Logo"');
     });
 });
diff --git a/packages/website/.figmaexportrc.js b/packages/website/.figmaexportrc.js
@@ -36,7 +36,7 @@ module.exports = {
 
                 require('../output-components-as-svgstore')({
                     output: './output/svgstore-monochrome',
-                    iconPrefix: '[unfilled] ',
+                    getIconId: (options) => `[unfilled] ${options.pageName}/${options.componentName}`,
                     options: {
                         cleanSymbols: ['fill']
                     }